Setting up WordPress for AMP: Accelerated Mobile Pages

Google has been pushing a new concept called Accelerated Mobile Pages, in short AMP. This post explains what AMP is and aims to do, who should implement and why, how to get your WordPress site ready for AMP and how to make sure Yoast SEO integrates nicely with it.

What are Accelerated Mobile Pages? What is AMP?

The Accelerated Mobile Pages project aims to make pages load instantly on mobile. The web is slow for lots and lots of people, in fact, the majority of the people using the internet do so over a mobile phone, often on a 2G or sometimes 3G connection. To make pages load instantly, AMP restricts what you can do in HTML pages. Fancy design is stripped out in favor of speed. AMP is very much a function over form project.

AMP pages look like a very stripped down version of normal web pages, but do contain all the important content. Not all ads will work on AMP, not all analytics will work with AMP. All the “fluff” of your pages is stripped in AMP, including the read more links you might have built into your theme etc.

I have a personal opinion about AMP which is not very flattering, which I’ve written about here. Regardless of my opinion though, with Google pushing it this hard, news sites and blogs basically have no choice but to implement it. Google is giving prime real estate to AMP pages in mobile search results, and if you don’t have AMP on your site, you’re not getting any of that traffic.

So, while I’m reluctant, I’m also telling you: if you run a news site or a blog, you need to make sure your site supports AMP. It’s as simple as that.

Which plugin(s) to use?

There is a good plugin by Automattic that enables AMP for your site:

When you enable this plugin, all the post URLs on your site will have a /amp/ version. So you can go to any post, add /amp/ to the end of the URL and you’ll see the AMP version. The plugin adds a standard meta tag in the head of your normal pages that makes it possible for Google and others to recognize these pages exist.

As of version 0.4, the AMP plugin adds a new template and a Theme Customizer, so you can directly change the styling to your liking. This is something we also do in our Yoast SEO AMP Glue plugin. If you experience issues with this, you might find this post on WordPress.org helpful. If you’re going for the bare minimum, install and activate this plugin and you’re done.

Luckily, there’s a second plugin which builds on top of the AMP plugin, that handles all that, it’s called PageFrog.

This plugin allows you to change the styling of the AMP pages, for instance by choosing the color of the top bar, changing the logo and a few more simple tricks like that. The plugin also handles Facebook Instant Articles, a topic we will be writing about more soon.

The plugin adds a preview to the post editor which we found to be slightly too intrusive and most of all: unnecessary. I’m not going to preview each post anyway, so we decided to disable that. We had to code a bit for that but I hope they add an option to disable the preview soon.

Update: read our post WordPress & AMP part II, as we’ve changed how we handle this and now only use the Automattic AMP plugin and our own Glue plugin, which has bare bones design support.

How does this work with Yoast SEO?

The AMP plugin by Automattic uses a default set of metadata, which is sometimes, if you’re using Yoast SEO, not the most optimal metadata. That’s why we’ve built a small plugin that “glues” Yoast SEO and AMP together nicely. It’s aptly called Glue for Yoast SEO and AMP:

Why isn’t this in Yoast SEO itself?

Of course, we’ve thought about just adding this to Yoast SEO for WordPress itself. The truth is: we will. Probably in a couple of months from now, this will be part of Yoast SEO. We didn’t do that now because we know that our Yoast SEO release cycles have gotten shorter and we have to plan for bigger features. To be able to quickly iterate on this particular set of features, we’ve made it into a small plugin which we can update by itself. We fully expect both our own best practices as well as Google’s rules for AMP to change over the next couple of months and will adapt as much as we can.

So what should I do now?

The logical steps for you to take are as follows:

  1. Are you a publisher who published posts / news regularly? Yes: go to step 2, no: go to step 9.
  2. Are you on WordPress? Yes: go to step 3. No: replace the WordPress plugins in the following steps with plugins for your platform. If there are none, (re-)consider why you’re not on WordPress.
  3. Install & activate the AMP plugin and see what your AMP pages look like.
  4. Install & activate our Yoast SEO AMP glue plugin.
  5. Install & activate Pagefrog and change the styling to fit your brand.
  6. Go to the SEO → AMP settings menu, design tab, and change the styling to fit your brand. Also, upload a default image for posts that don’t have a featured image.
  7. Go to the Mobile Formats menu Pagefrog adds and click on Analytics to integrate with Google Analytics.
  8. Go to the SEO → AMP settings menu, analytics tab, and add AMP-specific tracking code if you want. If you use Monster Insights Pro, tracking will be added automatically.
  9. You’re done.

Read more: WordPress & AMP: part II »