Creating Accelerated Mobile Pages on WordPress

This guide will help take you step by step through the process of installing and setting up the AMP plugin for your WordPress blog. If you’re here then you probably know what AMPs do, but if not there’s a lot of reading for you on Search Console Support, the AMP project website, and our blog post on AMPs. Here’s an overview of the steps we will be taking:
  1. Install and activate the AMP plugin for WordPress
  2. Validate AMP pages
  3. Validate markup for Top Stories
  4. Track Errors & Indexation in Search Console

Install and activate the AMP plugin for WordPress

There are two ways to install a plugin for WordPress: via FTP and via the WordPress dashboard. This guide will use the dashboard. Navigate your menu to Plugins > Add New, and search for “AMP” in the search box for the AMP plugin and click install.

AddPlugins After installing the plugin, go ahead and activate it. Once activated, navigate to Settings > Permalinks, and without changing anything, click save changes. This will ensure the new AMP URLs are active. Go ahead and test it by going to one of your blog posts and adding “/amp/” to the end of it. You should get something like this:

onlinecommunities Now that the plugin is activated and AMP pages are showing up, let’s validate them using Chrome.

Validate AMPs

Validating AMPs means checking that they adhere to the AMP guidelines. This does not mean validating to have your AMPs show up in the Google Top Stores snippet. More on that later. Using Chrome, navigate to one of your AMPs. Then, right-click the page and click on “inspect” (or go to View > Developer > Developer Tools). This will open a window on your page. On this window, click on “Console.” console After clicking Console, move your mouse back up to the address bar and add “#development=1” to the end of your AMP URL. This will turn on the validator. After you’ve added that, refresh the page and you should get this if the page is valid:

console2 You now have a valid AMP. But the process isn’t over.

Validate Markup for Top Stories

One of the major benefits to AMPs is the ability to break into the Top Stories section of the SERPs. In order to do so, there are some structured data markup requirements. You can find the required fields here. Go to Google’s Structured Data Testing Tool to check if there are any errors in your markup.

urls The meta data portion of your AMPs is handled via the plugin with a .php file. That file can be found under Plugins > Editor > AMP > amp/includes/class-amp-post-template.php. The edits required will differ between themes, so please back up your original code. Here is an example of the code to edit to your needs (we have already made changes to this code, so yours may differ):
$metadata = array(
'@context' => '',
'@type' => 'BlogPosting',
'mainEntityOfPage' => $this->get( 'canonical_url' ),
'publisher' => array(
'@type' => 'Organization',
'name' => 'Wpromote',
'logo' => array(
'@type' => 'ImageObject',
'url' => '',
'width' => 220,
'height' => 60,
'Image' => array(
'@type' => 'ImageObject',
'url' => get_post_photo_url(),
'width' => 1600,
'height' => 375,
'headline' => $post_title,
'datePublished' => date( 'c', $post_publish_timestamp ),
'dateModified' => date( 'c', $post_modified_timestamp ),
'author' => array(
'@type' => 'Person',
'name' => $post_author->display_name,
Remember that your images need to have static sizes, and your logo needs to be at least 60px high.

Track Errors & Indexation in Search Console

Search Console now has a report specifically for AMPs under Search Appearance > Accelerated Mobile Pages. This report shows errors and the number of indexed AMPs.

graph1 Check for errors, and use the structured data testing tool to find specific issues. There is also a section in Search Traffic > Search Analytics to see how your AMPs are performing via Clicks and Impressions.

graph2 Please note that this plugin creates AMPs for only posts, not pages. This is because currently, posts and news articles are the main focus of AMPs and the Top Stories Carousel. If you want to track how your AMPs are performing in Google Analytics, you will need to add this script to the end of the amp-wp-master/includes/amp-post-template-actions.php file in the plugin editor. Be sure to put your unique Google Analytics ID in the code, replacing “UA-XXXXX-Y”.
written by: Doug Johnson

Check Out Other Relevant Guides

Get Educated! Recieve Wpro U Updates, Case Studies & More

Thanks for signing up to be a Wpromote Insider.
You’ll be the first to get the scoop on our latest services, promotions and industry news.