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 — 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
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.
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.
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.
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.
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.
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.
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.
Break for Lunch
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
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.
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.
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.
EXERCISE 6 - iframe via OEmbed
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.
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
Wrap Up & Recap
We’ll recap everything covered throughout the day.