Blog

We write about Ember.js, Ruby on Rails as well as Elixir and Phoenix.

Front End Development

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.

1
Module 1 Duration: 525 minutes

1 — 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!

Agenda
Modern SEO Duration: 30 minutes
9:00
Traditional 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 SEO Duration: 30 minutes
9:30
Optimizing 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 SEO Duration: 30 minutes
10:00
EXERCISE 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 SEO Duration: 30 minutes
10:30
Structured 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 schema.org standard, to Google and other search engines.

Modern SEO Duration: 30 minutes
11:00
EXERCISE 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 SEO Duration: 30 minutes
11:30
Accelerated 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 SEO Duration: 30 minutes
12:00
EXERCISE 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 SEO Duration: 60 minutes
12:30
Lunch

Break for Lunch

Modern SEO Duration: 30 minutes
13:30
Social 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 SEO Duration: 30 minutes
14:00
EXERCISE 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 SEO Duration: 30 minutes
14:30
Rules 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 SEO Duration: 30 minutes
15:00
EXERCISE 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 SEO Duration: 30 minutes
15:30
Embedding 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 SEO Duration: 30 minutes
16:00
EXERCISE 6 - iframe via OEmbed

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

Modern SEO Duration: 30 minutes
16:30
Mobile 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 SEO Duration: 30 minutes
17:00
EXERCISE 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 SEO Duration: 15 minutes
17:30
Wrap Up & Recap

We’ll recap everything covered throughout the day.

Get your team trained!