Setting up WordPress for AMP: Accelerated Mobile Pages

Comments Off on Setting up WordPress for AMP: Accelerated Mobile Pages

By Joost de Valk

AMP WordPress plugin banner

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. It uses the site’s logo that you can set in the WordPress Theme Customizer, but other than that doesn’t add any styling. If you’re going for the bare minimum, install and activate this plugin and you’re done. The plugin has no settings, whatsoever.

Here at Yoast, we found that slightly to bare bones to our liking. We wanted to change the styling of our AMP pages somewhat and want to make sure there is Google Analytics tracking on those pages too. Luckily, there’s a second plugin which builds on top of the AMP plugin, that handles all that, it’s called PageFrog:

Facebook Instant Articles & Google AMP Pages by PageFrog plugin

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.

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:

Glue for Yoast SEO and AMP banner

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 about 5-6 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 slightly longer by now because we want to make sure every release is as good as can be. 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 3-4 months and will adapt as much as we can.

Get ready for AMP! Make sure your AMP plugin integrates smoothly with Yoast SEO with Glue for Yoast SEO and AMP »

So what should I do now?

The logical steps for you to take are as follows:

  • Are you a publisher who published posts / news regularly? Yes: go to step 2, no: go to step 7.
  • 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.
  • Install & activate the AMP plugin and see what your AMP pages look like.
  • Install & activate Pagefrog and change the styling to fit your brand.
  • Go to the Mobile Formats menu Pagefrog adds and click on Analytics to integrate with Google Analytics.
  • Are you using Yoast SEO? If not: why not? If you are, install & activate our glue plugin. It doesn’t have any settings for now.
  • You’re done.
  • : ‘Weekly SEO recap: AMPlified spam’ »

    Source:: SEO