Accelerated Mobile Pages in WordPress

Adding support for Accelerated Mobile Pages (or AMP) in WordPress is a heck of a lot easier than it might seem.  All you need is a few plugins installed and configured and you’re off to the races.

What is AMP?

Accelerated Mobile Pages (AMP) Project is an open source initiative by Google that aims to provide mobile optimized content which loads instantly everywhere.

There are basically just three core components:

1. AMP HTML: HTML with some restrictions for reliable performance.
2. AMP JS: The JavaScript library which ensures the fast rending and manipulation of AMP HTML.
3. AMP Cache: Google uses their own caching servers to serve your AMP content super-fast.

I’ll let team-lead, Paul Bakaus, at Google tell you what AMP is all about.

AMP Advantages

Aside from the obvious advantage of being able to serve a stripped-down, super-fast, Google-cached version of your WordPress posts, there are a few other advantages Google and others have offered to incentivize publishers and content marketers to enable AMP on their websites.

Search Engine Results

Google REALLY wants publishers to enable AMP.  To that end, they may add the little “AMP” badge to your SERP listing or even include your post in a carousel.  Doesn’t that make your mouth water a little?

After all, the more attractive the result, the more clicks you’ll get.

Improved Search Rankings

Some argue there is a very strong relationship between conversion rate and site speed.  If the users seem to be happy on a fast-loading website, there is a high probability they’ll convert from visitors to customers.

For this reason, many SEO experts report their Accelerated Mobile Pages are ranking higher in mobile organic search results than their non-AMP ones.

More than just Google

Although the Accelerated Mobile Pages Project is a Google initiative, many other big brands are getting in on the action.  Twitter, for example, prefers the AMP version of posts to the non-AMP when using their mobile app.

Other platforms include LinkedIn, Pintrest, Reddit, and Medium.

Even Bing joined the effort back in September of 2016.

Blazing Fast

AMP itself is already very fast, as custom JS is forbidden, critical path is unblocked, CSS is inlined and many other optimizations.  Aside from that, it also sports some fancy stuff like caching and prerendering.  Check out this post about measuring AMP performance on Medium.

AMP Your Content

Are you sold?  Great.  Let’s go through how to enable Accelerated Mobile Pages on your WordPress posts.

First off, install the AMP plugin from the WordPress repo.  This plugin was built and supported by Automattic, the people behind WordPress itself, so it’s a fair bet they know what they’re doing.

Once installed and activated, you’ve already taken the biggest step towards Accelerated Mobile Pages for your WordPress posts.

UPDATE:
AMP for WordPress now supports WordPress posts, pages, and custom post types!  Learn more.

There’s a few things this plugin is missing and needs a little help playing nicely with Yoast SEO.  Thankfully, Yoast has a plugin that helps combine AMP with Yoast and even makes the two work BETTER together.  It’s appropriately named, Glue.

To add some custom style and structure to your AMP pages, you can paste custom CSS into the “Extra CSS” field within Glue from SEO >> AMP >> Design.

Preview your new AMP pages by going to one of your blog posts and appending ?amp to the URL of any of your posts.

Now all that’s done, let’s make sure we don’t have any validation errors.  There’s some cool stuff already built into Chrome Developer Tools, but let’s play with the online validator at: search.google.com/test/amp.

After a few days or a week, you’ll start to see your new AMP posts showing up in your Search Console.