Modern SEO

Getting the most out of search engines and social networking is more important than ever! Take advantage of Google, Facebook and Twitter’s most advanced features, and boost user engagement.

Modern SEO

Modern SEO

Some aspects of SEO seem like black magic, but there’s a lot that can be done to ensure your app is at its best when shown in search results, and linked to on social networks.

In this course, we’ll begin with the basics of traditional SEO, and quickly move on to adding structured metadata to your app, so that your site shows up in search results in as rich a way as possible.

Next, we’ll explore Accelerated Mobile Pages - an open-source initiative to provide users with an instant-loading experience on mobile devices. To accomplish this, we have to play by a strict set of rules, but the end result is worth it!

Finally, we’ll look at mobile optimizations that will make your web applications more mobile friendly, including Web Application Manifests and more!

  • Modern SEOTraditional SEO

    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.

  • Modern SEOOptimizing for Crawlers

    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.

  • Modern SEOEXERCISE 1 - Crawler optimizations

    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.

  • Modern SEOStructured Data

    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 standard, to Google and other search engines.

  • Modern SEOEXERCISE 2 - An events page

    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.

  • Modern SEOAccelerated Mobile Pages

    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.

  • Modern SEOEXERCISE 3 - Build an AMP Page

    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.

  • Modern SEOLunch

    Break for Lunch

  • Modern SEOSocial Metadata

    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.

  • Modern SEOEXERCISE 4 - Enriched product pages

    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

  • Modern SEORules of Thumb

    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.

  • Modern SEOEXERCISE 5 - Thumb Generation

    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.

  • Modern SEOEmbedding in other places

    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.

  • Modern SEOEXERCISE 6 - iframe via OEmbed

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

  • Modern SEOMobile Optimizations

    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.

  • Modern SEOEXERCISE 7 - Lighthouse + Web App Manifest

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

  • Modern SEOWrap Up & Recap

    We'll recap everything covered throughout the day.