The easy way to set up AMP for your WordPress posts

Published on: Updated: March 24, 2018

WordPress AMP pluginToday I have been experimenting with Accelerated Mobile Pages (AMP) plugins. I’d like to share the easiest way to set up WordPress AMP plugins for your blog posts or articles.

What is AMP?

AMP is a new technology which offers an instant way for people to read blog posts or other articles. Users are shown a simplified version of the post with no styling (instead of your full website), which loads approx. 4 times faster. You can read more at https://www.ampproject.org/.

As well as improved page load times, it’s worth setting up WordPress AMP because Google has updated its search algorithms to reward your AMP articles in the mobile search results. This means there’s an SEO benefit to using AMP and more people are likely to find your articles.

Who is AMP for?

AMP is for any website that publishes regular news, blog posts or articles.

There are some disadvantages to having AMP. The simplified format of the AMP articles means that they are less corporate and are not part of your main website.

Essentially, your AMP articles will consist of the text from your WordPress posts minus most of the styling and other elements. You can include your logo and adapt the colours to suit your brand but it won’t look like your website.

While this brings speed and SEO benefits, it may reduce your conversions because you will be losing content such as mailing list signup forms and other visual call to actions.

You can minimise the impact of this by including clear call to actions in the body of each article. For example, include a section at the end of each article about your company and what you want people to after reading the article (e.g. contact you for a quote).

How can I use AMP on my WordPress website?

While AMP is a new technology, there are already several plugins available allowing it to be easily integrated with WordPress. I have tried them all and recommend the following setup. This will suit a large proportion of WordPress sites but please see the alternatives at the end of this article if it’s not right for you.

Step 1 – Install the official WordPress AMP plugin

First, install the official WordPress AMP plugin by Automattic, the company behind WordPress. This is a free plugin. It works automatically and there are no settings for you to configure. Simply install and activate it.

AMP WordPress Plugin

To check it’s working, go to one of your blog posts and type /amp at the end of the URL – e.g.: https://barn2.co.uk/setup-amp-wordpress-posts/amp for this post. This should show the AMP version of your post.

While it’s nice to be able to set up AMP articles so easily, there are a few further steps to use them in the best possible way for your website and SEO.

Step 2 – Install Glue for Yoast SEO & AMP

If you’re using the Yoast SEO plugin (which a huge proportion of WordPress sites do), the next step is to install Glue for Yoast SEO & AMP. This is another free plugin which allows your WordPress AMP posts to work with your SEO data.

If you’re not using the Yoast SEO plugin then it will be harder to use your SEO titles and other data for your AMP posts. You will probably need to contact the author of your SEO plugin to find out the options.

As well as adding Yoast SEO data to your AMP articles, the Glue plugin has all the other features that you need to optimise your AMP setup. If you’re using the Yoast plugin for your Google Analytics (recently taken over by MonsterInsights) then the traffic to your AMP pages will automatically be tracked in your Google Analytics account. (If you using a different analytics plugin then you will need to paste your tracking code into the Analytics tab of the plugin settings.)

AMP Analytics Tracking Code

Glue for Yoast SEO & AMP also lets you style your AMP posts. You can replace the logo and change the colours of the various elements, branding it more closely to your main website.

Style AMP pages

Step 3 – Validate your AMP pages

A lot of people miss this step, but it’s important to make sure your AMP pages are working correctly.

For simplicity, I will explain how to do this in Chrome. If you don’t use Chrome then WPMU’s AMP tutorial describes the process for other browsers.

  1. In Chrome, visit one of your AMP pages and add /amp#development=1 to the end of the URL – e.g. you would go to https://barn2.co.uk/setup-amp-wordpress-posts/amp#development=1 to validate this post.
  2. Right-click and click ‘Inspect Element’
  3. Click on the ‘Console’ tab
  4. Look for any errors or a message saying the AMP post has been validated

If there are errors, contact the plugin author or your WordPress developer for support.

What are the alternatives?

If the setup that I’m recommending doesn’t suit your needs then there are alternatives. Whichever of these you choose, you will still need the official AMP WordPress plugin – these options are all designed to work alongside it.

Facebook Instant Articles & Google AMP Pages by PageFrog

The free PageFrog plugin is probably the most flexible option and offers many features to develop your AMP posts including styling and customisation options and integration with analytics packages such as Google Analytics.

If you want more fine-grained control over your AMP posts then it’s worth giving PageFrog a try. However it is over-complicated in some ways and doesn’t always work reliably. For example when I installed PageFrog, my AMP pages broke completely.

Custom AMP

Like PageFrog, the free Custom AMP plugin gives you more fine-grained control over the design of your AMP articles. You can make various changes such as replacing the logo and choosing whether to display the featured image and comments.

Personally, I would keep it simple because the whole point of AMP articles is to display a simplified version which will be fast to load. If you clutter up the article with featured images and other content then it will affect the load time. The official AMP plugin coupled with the Yoast plugin is a good option for anyone who is already using Yoast SEO and analytics plugins.

Filed under: WordPress Web Design ,