How to Set Up Accelerated Mobile Pages (AMP) For WordPress

A step-by-step guide to set up WordPress with AMP

NOTE: I recommend that you skip to the bottom and read the “important additional notes” and then come back to read the rest.

Overview

  • Google introduced the Accelerated Mobile Pages Project (AMP) on October 17, 2015.
  • In short, the initially stated objective of the AMP project is to make News web pages load extremely fast – almost instantly – on mobile devices to improve user experience, and this is achieved by restricting use of existing HTML, CSS & JavaScript technologies on AMP pages.
  • Google’s AMP project is open source, and originally only applied to News publishers because the only places AMP pages were appearing was in a special AMP carousel appearing on mobile phones as Google deemed fit based on the user query.
    Update: Google has already rolled AMP out to the main search results starting on August 2, 2016.
  • The step-by-step documentation in this article will help you to get you ahead of the curve on AMP and gain a defensible head-start position relative to your competitors.

Note that implementing the steps outlined in this document should not take more than 1-2 hours of your Developer’s resources to complete – possibly even less.

What follows is a step-by-step guide to implementing the necessary plugins and configurations to achieve the end result of your WordPress pages and/or posts existing not only in their current form, but also as Accelerated Mobile Pages (AMP) complete with proper Google Analytics tracking & necessary rel=”canonical” configurations, and an XML Sitemap as icing on the cake.

STEP 1

Install & activate the official AMP WordPress plugin

The plugin can be installed in 3 different ways.

  1. Download & install the official AMP WordPress Plugin located here.
  2. Download & install the official AMP WordPress Plugin from GitHub here.
  3. RECOMMENDED: Install the plugin via the WordPress Admin interface
    1. Navigate to Plugins > Add New
    2. Search for “AMP”
    3. Install the AMP plugin (see screenshots below)
    4. Activate the plugin

amp03

 

amp02

 

 

STEP 2

Install & activate the Yoast SEO AMP Glue plugin*

This is needed to make sure that your existing blog page and/or post meta data and canonical tags are preserved and properly configured.

* Similar to Step 1, the plugin can be downloaded from WordPress, or installed via the Admin Panel (recommended).

In your WordPress Admin Panel:

  1. Navigate to Plugins > Add New
  2. Search for “Yoast SEO AMP Glue
  3. Install the AMP plugin (see screenshots below)
  4. Activate the plugin

amp01

 

amp04

 

 

STEP 3

Configure Yoast SEO AMP Glue plugin

In your WordPress Admin Panel:

  1. Navigate to SEO > AMP – see screenshot below
  2. “Post Types” Tab: ensure that “Posts” are enabled – see screenshot below
    (Note that you may want to enable “Pages” too, if your entire site and not just your blog install is WordPress-based)
  3. OPTIONAL: on the “Design” tab, configure icon, default image, & color scheme (You can skip this for now and do this at a later time)
  4. “Analytics” Tab: copy/paste in your Google Analytics UA- number, then save changes – see screenshot below

amp05

 

amp06

Note: in the screenshot above I’m only showing posts as enabled, but if you’re entire site is WordPress, enable pages too. Your call to make based on what you have going on.

 

amp07

 

IMPORTANT NOTES:

  • This GA UA- part in the above screenshot didn’t work when I first tested it. Later it did.
  • The wording “Analytics code” would make you think you’d have to add the actual Google Analytics Tracking Code, but what works is the UA- number.
  • On one of my WordPress site installs I have a specific Google Analytics plugin – when I did this process a message popped up saying “you don’t need to enter the UA- number here because we’re already tracking your AMP posts/pages in GA” – so, your mileage may vary here.
  • Don’t add the UA- numbers in the above screenshot, add your Google Analytics UA- number in that field.

 

STEP 4 (Optional)

Verify Google Analytics Tracking Code is installed and recording

  1. Open an existing page or post in a browser
  2. Add /amp/ to the end of the page or post
    • You will now be viewing the AMP version of this page or post
  3. View the source code of the page or post
    • CTRL + U on your keyboard or right click and choose view page source
  4. Use CTRL + F keyboard command to open search function
    • Search for a snippet of the Google Analytics Tracking Code
    • Example: search for analytics.js
    • Confirm the Google Analytics Tracking Code is present – if you’re using Google Tag Manager or your GATC is configured to be invisible due to your GA Plugin settings, then this step may not be necessary for you… again, your mileage may vary.
  5. Open Google Analytics to your reporting View
    • Navigate to the “Real-Time” report
    • Click on the “Content” menu item
    • You should now see the page you opened in a browser
      (Example screenshot below)

amp08

 

 

STEP 5 (Optional)

Create and upload an XML Sitemap, then notify Google Search Console

There are several ways to create an XML Sitemap, and your Web Development team may have a preferred method.

Here is one option to create an XML Sitemap of your AMP blog posts:

  1. Take a current list of all blog page and/or post URLs
    • Exclude author, tag, category, & paginated URLs
  2. Append each URL with /amp/
    • This can be achieved easily in Excel using the CONCAT function
  3. Create the XML Sitemap
  4. Save the XML Sitemap with a unique name – example:
    • amp-sitemap.xml
  5. Upload the XML sitemap to your server root & verify
    • Verify by visiting the sitemap in a browser
      • Example: yoursite.com/amp-sitemap.xml
  1. Add the XML sitemap to Google Search Console
    • In Google Search Console Admin Panel
      • Crawl > Sitemaps > Add/Test a Sitemap (see screenshots below)

amp09

 

amp10

Conclusion

As previously noted, Google’s Accelerated Mobile Pages Project (AMP) was originally focused on large online publishing companies, but now they’re more and more opening it up to other verticals – AMP could completely go away in a few years, or it could end up being an internet mainstay.

It’s quite likely that Google used the AMP Project in conjunction with these large publishers as a test before rolling this project out to other industries and the web in general.

My experience has been that these processes should not take more than one to three hours of your time or your Web Developer’s time to implement these steps, which means the time investment is minimal given the potential advantages.

Setting up your WordPress pages and/or posts with corresponding Accelerated Mobile Pages (AMP) now puts you ahead of the curve and already prepared for if and when Google declares it an SEO ranking factor, and gives you the advantage over your competitors who will be left scrambling to catch up.

Good luck, and let me know how it goes!

IMPORTANT ADDITIONAL NOTES:

I’ve tested this across several different WordPress-based websites I have, and I’ve seen mixed results.

For example, oddly on one site the APM pages (not posts) are 301 redirecting; I haven’t made time to look further into this but will.

Another example: looking in Google Analyics’ real time content section when I’m on an /amp page or post, in some cases I see /amp in the URL string, in others not. Weird, right?

So bottom line, you may run into bugs as well that may have to do with your WordPress theme or other technical causes of glitches or roadblocks – this guide should hopefully get you 100% of the way to AMP without any roadblocks or bugs, but don’t be surprised if you run into them.

You might want to test this on a cloned version of your site on a development host/server before rolling out to your main site, but that’s 100% up to you. 

Leave a Reply

Your email address will not be published. Required fields are marked *