How To Setup WordPress for AMP: Accelerated Mobile Pages

What is AMP?

AMP stands for Accelerated Mobile Pages. It is an open source project initiated by Google in October 2015.  The idea behind AMP is to make website load faster on mobile phones.

Google said in their announcement:

Today, after discussions with publishers and technology companies around the world, we’re announcing a new open source initiative called Accelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web. We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device you’re using.

AMP was officially added to the SERPs in February 2016.

My website is responsive so why bother with AMP?

Responsiveness is great – it means your website will appear on a range of screen sizes and still be easy to read, use, and interact with. AMP takes this a step further and adds speed into the equation. This means not only is the content easy to read, it means it will appear in an instant giving greater user satisfaction.

Now we all know that Google often cites user satisfaction as their ultimate aim therefore it isn’t a stretch to imagine that this may be a ranking factor.

Indeed stories have surfaced that it is likely that Google will give a rankings boost to AMP websites.

AMP and WordPress

I build many of my client website using WordPress. Indeed latest estimates say that up to 25% of all website on the internet are WordPress based. So if you are like me then you will be keen to figure out how to setup AMP working on WordPress.

The good news is that there are some plugins that can help simplify the process. Unfortunatly they don’t do the whole job and you will need to get your hands dirty tweaking a variety of things to get your pages validated and including in the Google index.

Be prepared to get a little frustrated as it can take a while to figure out exactly what needs done to validate your pages properly.

How to setup WordPress for AMP

Firstly use Chrome to setup AMP. It is Google’s own browser and the console has been designed to validate AMP pages. This makes your life much easier than trying to figure out problems and troubleshoot them in FireFox or Safari.

Secondly, I am pretty sure most of you following this tutorial will be keen to get AMP working due to the possible ranking boost. If so you probably have your on-page SEO setup and configured using a plugin. I have no idea what you currently use but I’d recommend you switch to the excellent Yoast SEO. Why? Well this plugin has been configured to pass on the metadata to AMP which would be otherwise missing.

Stage 1 of 4: Install and setup the plugins

1. Login to the Admin area of your website

2. Install a plugin called AMP and enable it. When you enable this plugin, all the posts on your site will have an AMP version. Simply go to any post, add /amp/ to the end of the URL and you’ll see the AMP version of that post. Unfortunatly pages and archives are not currently supported by this plugin.

3. Next you need to install a second plugin called Glue for Yoast SEO & AMP. This provides some extra functionality to AMP so that you can configure things better.

4. Go to SEO > AMP to configure Glue for Yoast SEO & AMP. I have the following settings:

Post Types Tab

Posts = enabled

All others disabled

Design Tab

Add an AMP icon. This appears at the top of the page and is normally your company logo. I uploaded a small version of my logo.

Add a default image. Pick an image that will display if you haven’t got a featured image on all of your posts. Without a featured image you will get validation errors in the Google Search Console and the post won’t be added to the Google index. Just to be safe, add one.

Underneath you can customise the colour scheme to match your brand.

Analytics Tab

Since AMP is a lightweight subset of HTML scripts are stripped out including the Google Analytics code. This should be added back in here.

According to Yoast there’s a simple connection coded to the MonsterInsights plugin (formerly Google Analytics by Yoast). If you have that enabled and configured, the plugin automatically grabs the account code from it and enables tracking for your AMP pages. You can, however, also choose to use a custom tracking code. If you do this, the plugin no longer integrates with MonsterInsights.

Having said that this seemed to cause  a validation error in my Chrome inspector console so I manually added it. To add it manually the format needs to be like this:

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-xxxxxxxx-x"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

Make sure you add your own Google Analytics tracking code to replaceUA-xxxxxxxx-x on the ‘account’ line.

Stage 2 of 4: Create CloudFlare CDN rules for AMP

Most webmasters are running some form of Content Delivery Network (CDN) to speed their website up and I am no different. In my case I use the free version of CloudFlare. Unfortunatly CloudFlare injects scripts that causes AMP errors in the Chrome inspector console. This means you need to disable CloudFlare for /amp/ pages.

This actually sounds worse than it is because AMP is designed to load fast anyway. So removing CloudFlare shouldn’t make any difference to visitors being served content on their mobile phone. I believe that CloudFlare are investigate how AMP interacts with their service but at this point there is no fix in place.

1. Login to cloudflare

2. Select your website

3. Click ‘Speed’ from the menu along the top

4. Scroll down to ‘Rocket Loader’ and turn it off. If you have a paid account also switch off ‘Mirage’. Keep Polish and auto-minify On.

5. Click ‘Scrape Shield’ from the menu along the top

6. Turn off Email Address Obfuscation

7. Click ‘Page Rules’ from the menu along the top

8. Create a new rule with the following settings if the URL matches : *yourdomainname.com/*/amp/ where you add your own domain name in place of yourdomainname.com

9. Add the following settings:

Browser Inegrity Check : On

RocketLoader : Off

Browser Cache TTL : 4 hours

Always Online : On

Security Level : Essentially Off

Edge Cache TTL : 4 hours

Disable Apps

CloudFlare and WP-Rocket

If you use WP-Rocket to speed your website up then make sure you change the CloudFlare settings under the CLoudFlare tab as follows:

Auto enable the optimal CloudFlare settings (props WP Rocket) : No

HTTPS Protocol Rewrite : Off

Other caching plugins are available so you need to check the settings in each of them to see if they are likely to cause any problems. I use WP-Rocket so I can’t advise what to check on other plugins but the plugin author should be able to help.

Stage 3 of 4: Add your AdSense units to AMP (optional)

If you use Google AdSense you will notice that they have been removed by AMP. Since mobile visitors make up such a large percentage of search traffic this isn’t ideal. You will be keen to find out how to add your AdSense units to AMP so you can continue to earn revenue from mobile phone visitors.

In order to get this to work you need to edit the default single.php templates that ship with AMP together with the functions.php file for your theme. In my particular theme I wanted to have 3 ad units – 1 at the top, 1 above the content and 1 at the bottom. I created hooks in single.php to do this. Here is the code I used in functions.php:

/** AMP CODE AMP CODE AMP CODE AMP CODE **
* /adSense for AMP Pages
*/
add_action( 'amp_post_template_header', 'xyz_amp_add_advertisement' );
function xyz_amp_add_advertisement( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<?php
{ //Advertisement in header
printf(' <div class="amp-wp-content"><amp-ad width=auto height=200
type="adsense"
data-ad-client="ca-pub-111111111111111"
data-ad-slot="11111111111">
</amp-ad></div>');
}
?>
<?php
}

You need to go into AdSense and find the ad unit code for the ad you want to appear. When you look at the code you will see the ca-pub-????????? number and the ad-slot number. You simply substitute the 111111111 codes in the example above with your ad units codes. In my case I have 3 ad units so I added the code in 3 times.

Don’t forget you need to change the line add_action each time so the function has a unique name and so it is hooked where you want it to appear. In my case the top ad unit for AMP was called:

add_action( 'amp_post_template_header', 'xyz_amp_add_advertisement' );

The second was called:

add_action( 'amp_wp_content', 'xy_amp_add_advertisement' );

And the 3rd was:

add_action( 'amp_post_template_footer', 'x_amp_add_advertisement' );

Now we need to edit single.php so it contains the hooks to display the adds. I have highlighted the hooks with the text <–HOOK. Make sure you delete this text from the file before you use it or it will cause an error:

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<?php do_action( 'amp_post_template_head', $this ); ?>

<style amp-custom>
<?php $this->load_parts( array( 'style' ) ); ?>
<?php do_action( 'amp_post_template_css', $this ); ?>
</style>
</head>
<body>
<nav class="amp-wp-title-bar">
<div>
<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
<?php $site_icon_url = $this->get( 'site_icon_url' ); ?>
<?php if ( $site_icon_url ) : ?>
<amp-img src="<?php echo esc_url( $site_icon_url ); ?>" width="32" height="32" class="amp-wp-site-icon"></amp-img>
<?php endif; ?>
<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
</a>
</div>
</nav>
<div class="amp-wp-content">
<?php do_action( 'amp_post_template_header', $this ); ?> <--HOOK
<h1 class="amp-wp-title"><?php echo wp_kses_data( $this->get( 'post_title' ) ); ?></h1>
<?php do_action( 'amp_post_template_content', $this ); ?> <--HOOK
<?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>
<?php do_action( 'amp_post_template_links', $this ); ?>
<ul class="amp-wp-meta">
<?php $this->load_parts( apply_filters( 'amp_post_template_meta_parts', array( 'meta-author', 'meta-taxonomy' ) ) ); ?>
</ul>

</div>
<?php do_action( 'amp_post_template_footer', $this ); ?> <--HOOK
</body>
</html>

You then upload the updated single.php and functions.php using ftp and test the pages. If you have done it correctly you should see the ads appear.

Stage 4 of 4: Check Chrome Inspector validates the AMP pages

1. Go to Chrome and go to one of the amp pages by typing in the yourURL/amp/#development=1

2. Open the inspector Menu > More Tools > Developer Tools. If the AMP plugin is configured properly it shouldn’t display any errors. Instead it should say ‘AMP Validation successful’.

If you have got errors then you need to check you have set everything up properly as described in stage 1 and 2.

Don’t get too excited, even though your pages are validated it doesn’t mean they are formatted properly. AMP is customised to your individual website and you may find you get validation errors in your Search Console (Webmaster Tools).

Common AMP errors in Webmaster Tools  Search Console

Javascript errors

You may find javascript errors talking about files that are missing or invalid. This is normally caused by a CDN network adding additional javascript to your html on the fly. This is why you need to add rules to your CDN to prevent any manipulation of /amp/ pages. this is covered in Stage 2  below. I personally use CloudFlare so the instruction are specific to that but you should be able to do something similar on other CDN’s.

Inline style errors

If you have used <div style=””></div> in the HTML of your posts then this will also cause an error. This is not allowed on AMP pages and all styling MUST be done via CSS.

Inline CSS can often be injected by poorly written plugins. If you have an issue with a particular plugin you need to let the author know that it is not AMP compatible and that it needs to be updated.

Other common errors

Other errors that are quite common include:

The attribute ‘src’ in tag ‘amp-analytics extension .js script’ is set to the invalid value ‘//cdn.ampproject.org/v0/amp-analytics-0.1.js’.
The tag ‘script’ is disallowed except in specific forms.
The attribute ‘src’ in tag ‘amp-iframe extension .js script’ is set to the invalid value ‘//cdn.ampproject.org/v0/amp-iframe-0.1.js’.

The tag ‘amp-analytics extension .js script’ is missing or incorrect, but required by ‘amp-analytics’.
The tag ‘amp-iframe extension .js script’ is missing or incorrect, but required by ‘amp-iframe’.

The mandatory tag ‘amphtml engine v0.js script’ is missing or incorrect.

Other sources of help

AMP and Yoast:

• https://yoast.com/setting-up-wordpress-for-amp-accelerated-mobile-pages/
• https://yoast.com/wordpress-amp-part-ii/

CloudFlare:

• https://github.com/ampproject/amphtml/issues/2380

Did you find this post helpful?

If you found this post helpful please take a moment to tweet, like, or share this article by using the buttons at the top or bottom of this page. I’d really appreciate it. 🙂

Also, if you are feeling extra generous please leave some encouraging feedback in the comments section at the bottom of the page. I love getting feedback from visitors. It encourages me to continue writing useful articles for readers like you.

Thanks for taking the time to read my website! You can find other articles that you might find useful at the bottom of this post.

Enjoy!