In this article I am going to show you how to equip your WordPress website for the Google AMP Project. As an add-on we are going to cover making sure that your AMP configuration works with Yoast SEO.

The Google AMP project stands for “Accelerated Mobile Pages.” The idea behind it is simple: make pages load wicked fast on mobile devices. For those of us in major metro areas (myself included), we forget that much of the world browses on a 3G or 2G connection.

Bundle that with heavy Javascript and CSS use, and we’ve got a web experience slower than pond water. WordPress themes use tons of Javascript and CSS as it is, so accelerated mobile pages are a great thing to implement.

End User Benefits of Accelerated Mobile Pages

  • Faster page loading on slower connections
  • Less cluttered pages for better mobile experience

Developer Benefits of Accelerated Mobile Pages

  • Higher search engine ranking
  • Greater visibility for publishers

Google has not outright said that accelerated mobile pages are an independent ranking factor for websites. However, mobile responsiveness and load times are two well known ranking factors. One might assume, that since accelerated mobile pages tackle both issues, it could have a peripheral impact on SEO and ranking. AMP enabled pages are beginning to populate in SERPS with an AMP icon indicating their validity. As mobile users learn what this is, one might also assume they will start intentionally seeking AMP results whilst searching.

Since accelerated mobile pages is a Google project, and based on how Google has worked in the past, it is hard to imagine AMP not being an independent ranking factor in the near future.

google-amp-live

What AMP Does to Content Pages

In a nutshell, AMP strips all of the advanced functionality and styling out of your content pages, stores them in a Google proxy as static HTML pages, and serves those static pages to viewers. Specifically, it forces:

Asynchronous Script Loading: Javascript prevents fast page rendering. AMP forces asynchronous script loading and blocks synchronous script loading. Only Javascript resources that can load simultaneously are allowed.

Static Resource Loading: Any resource on a page like images and iframes must declare their size in the HTML. This enables AMP to download and render page layouts before other resource load.

Blocking of Custom Scripts: Got a fancy piece of 3rd party code? Not with AMP you don’t. These are blocked to lower the number of HTTP requests being made when a page loads. Accelerated mobile pages do however support lightbox, Instagram, and Tweet embeds.

Inline CSS: AMP only allows inline stylesheets with a limit of 50KB. Time to clean up your coding style.

These requirements are typical of the minimalist Google perspective. Form over function. User experience first, developer experience second.

 

Implementing AMP into WordPress

We’re going to to this with a plugin. Unless you want to code a static page for each of your content pages. The plugin I would recommend is AMP, available for free in the WordPress codex. This is a very simple plugin that requires almost no time to implement. All you have to do is install it and activate it. Once activated, it creates automatic AMP formatted posts and pages.

It does not override your page layouts for either of them. Rather, it creates a second version of each page and post. You can access them by adding /amp/ to the end of any post URL.

amp-example

 

Adding Yoast SEO Metadata into Accelerated Mobile Pages

One pitfall to AMP configured pages is that they use a default set of metadata. I for one don’t like this from an SEO perspective. Majority of WordPress websites use Yoast SEO (or another plugin) to optimize pages for certain keywords, and people spend lots of time perfecting this metadata.

In other words, we don’t want AMP to toss our hard work out the window. It’s also probably not good to have different meta descriptions for identical content floating around on the interwebs.

The good news is that the fix is easy. Install and activate the plugin, Glue for Yoast SEO and AMP. It’s free and its magical. Once activated it will pull the optimized metadata from your posts and pages into your AMP posts and pages.

An additional benefit of Glue, is that it has some advanced settings that will allow you to style your accelerated mobile pages a little bit to spruce up your branding.

If you have implemented AMP pages on your site and have some feedback, comment below!