It’s important to know where we’re starting from before we talk about where we’re going. Let’s look at some SEO basics, including content quality, page rank, positive and negative metrics.

Giving hints to crawlers, by way of a robots.txt file, meta tags and DOM attributes can go a long way in allowing search engines to index and represent your content in the best way possible.

Using what we’ve just learned, make some optimizations that will give web crawlers some important hints as to how your URLs relate to each other.

While search engines are good at inferring what your content is all about in general, providing structured data can allow further enrichment of how your site is represented in search results. We’ll look at providing standardized structured data, aligned with the schema.org standard, to Google and other search engines.

Events are one of several types of structured data that popular search engines use to enrich listings in results pages. Using the google structured data tester, add some of this metadata to your app, and fix any warnings brought to your attention.

Accelerated Mobile Pages are part of a standards-based effort to provide a nearly instant loading experience for content on mobile devices. While AMP-ready pages make use of familiar technologies, there are some strict constraints we must adhere to, in order to enable this fast-loading experience.

We discussed two strategies for building AMP pages. For this exercise, make a separate namespace for equivalent AMP content, and build a simple representation of a news article, while staying within the relevant constraints.

Break for Lunch

Modern web crawlers execute at least a limited subset of your app’s JavaScript, but this doesn’t help much when it comes to sharing links on Facebook, Twitter, Slack and other sites. To provide a great social sharing experience, we need to employ server-side rendering and a combination of OpenGraph and Twitter Card metadata, to go along with our content.

The product pages for our e-commerce site currently provide a very basic sharing experience. Using your newfound knowledge of Twitter Card and OpenGraph meta tags, enrich the sharing experience with a large product image, and a short description

Now that we’ve learned about social metadata, we can see that generating thumbnails will be a bit of a challenge. We’ll look at a battle-tested library called ImageMagick to generate all the sizes we need on the fly, and learn some tips and tricks to make sure our cropping and resizing will turn out beautifully.

Find a set of ImageMagick arguments that results in a great group of thumbnails, given a collection of source images. Make sure not to cut any area indicated as “critical” out of the thumbnail image.

We’ll go beyond simple link sharing, and explore the OEmbed standard, whereby our apps can instruct consumers as to how our rich web content should be represented on their sites.

Build a new express route that returns an OEmbed-compliant JSON response, instructing consumers to iframe your content.

In mid-2016, Google announced that mobile-friendliness would have a significant impact on SEO for their new “mobile index”. We’ll take a look at a few tools designed to measure how well our apps work on mobile devices and provide some key metrics and thresholds to keep an eye on. We’ll also take a look at some additional metadata that modern mobile devices can use to provide a more native-app-like experience.

Add a web app manifest to our app, and make other easy improvements to boost our app’s lighthouse score

We'll recap everything covered throughout the day.