Accelerated Mobile Pages in WordPress – Setup Guide

Today I am going to publish a post around Google’s new hot topic, Accelerated Mobile Pages (AMP) and how to set it up in Wordpress web sites. After reading this post you will learn how to add the following WordPress features to your AMP pages:

• Google Analytics
• Google Adsense
• Related Posts
• Featured Image
• SEO Meta Data
• Social Sharing Buttons

What is Accelerated Mobile Pages (AMP) and how is it different to Responsive Design

I am sure by now most of you have read Google’s latest release about Accelerated Mobile pages (AMP). If not, in a nutshell, Accelerated Mobile Pages is a shorter HTML version of your posts, stripped out by elements that might delay the page load on mobile devices such as JavaScript and/or 3rd party tags. It’s basically an answer to Facebook’s instant articles, and is mainly aimed at publishers, however anyone is welcomed to implement it.

Logically you might ask how is this different to “responsive” design.

Responsive design is a mobile version of your desktop web site, optimized for mobile/tablet screens. It’s using your original web site design, your call to actions, your banners, various on page elements/sidebars, contact forms and of course, all your JS and 3rd party tags.

Accelerated Mobile Pages on the other hand will strip out your web site’s original design, your CTA, your sidebar forms and all onpage elements, so it’s NOT a replacement for responsive design, and you are not advised to implement it widely across your whole site. This especially applies to your acquisition-focused landing pages. However, it’s a good way to speed up your blog and article pages – remember that this is aimed at publishers, so this is intended for content websites newspapers  or blogs.

To give you an example, here’s what my previous post about Google Analytics Path Analysis  looks like in a mobile without AMP:

And here is the same page after AMP is activated:

For those who have create a web site with WordPress, it looks like pretty much like the default page with the infamous “Hello World” post.

If you want to know more details about AMP, feel free to head over to the official page.

Should you use AMP?

AMP will be very useful to blog owners and publishers that have a strong presence in social media, especially Twitter and Facebook.

The Safari (in-APP) browser (pages that open in a UIWebView), known for its page load issues, presented no pageload delays when an AMP version was loaded.

The downside to this is that there are no social media buttons, sharing is disabled, but as expected, there is a plugin t0 sort all of this out.

What are the SEO benefits of Accelerated Mobile Pages?

According to Google, mobile friendly web sites that pass Google’s Mobile speed test appears higher in search results, with non-responsive pages already banished from the first page. Having said that, accelerating your mobile pages will definitely give a good boost to your search rankings on Mobile.

Do not underestimate the fact that this SEO boost is aimed ONLY at mobile devices.

In the UK, mobiles already overtake laptops and is the user’s preferable device. Ofcom’s 2015 Communications Market Report finds that a third (33%) of internet users see their smartphone as the most important device for going online, compared to 30% who are still sticking with their laptop.

In 2014 those numbers were 23% and 40% respectively. Furthermore, smartphones are now the most widely owned internet-enabled device (66%), on a par with laptops (65% of households) so this is a great opportunity to be ahead of the competition.

How to Install Accelerated Mobile Pages in WordPress

I personally use Yoast SEO plug-in for wordpress instead of the default Genesis SEO plug in for multiple reasons, thus this guide is for those who use Yoast’s plug-in.

You are going to have to install three additional plug-ins for this to work:

• AMP Plug-in
• Glue from YOAST
• AMP Styling by PageFrog

AMP Plug in

The AMP plug-in for WordPress will open both AMP and Instant Articled in case you already use them on Facebook.

By default it will pick up your pictures, content, WordPress tags and breadcrump.

And here is a below the fold view:

You will notice that the formating on the AMP is simpler, the social icons are gone, the banner is significantly smaller and the adsense banner along with the breadcrumb, is also gone.

However you can get all that back with the use of AMP styling plugin.

Glue by Yoast

Glue by Yoast is a plug in that will make sure that the SEO metadata from the Yoast SEO plug in will be in place, along with a couple of other cool things such as canonicals, use of company name from the general SEO settings, your organisation logo as well as your meta description. See below the structure data of the post before activating the plug-in:

Once you activate it you will notice that the original article description is now added:

AMP Styling by Page Frog

This plug-in will make your AMP pages look prettier and also add some additional features such as Google Analytics, Google AdSense, Featured Image and Social Sharing.

On the Styling options, make sure you tick the AMP HTML box. This will guarantee that your articles will be served in AMP HTML format when someone visits the post via Social Media such as Twitter, Google Plus, Pinterest and LinkedIn.

Once you activate this plug in your /amp/ posts will redirect automatically to your original posts and the preview you saw when you activated the AMP plug-in is gone.

Before you panic, this happens because you can enable or disable AMP HTML on an adhoc basis whenever you want in whichever post you want by a new “Mobile Preview” tag within your post editor (You will find it above the Publish tab on your right hand side).

Getting your WordPress Featured Image back

Simple head to your post and tick the relevant box on the right hand side at the top of your page as shown below:

Add AMP pages to Google Analytics

Then move to the Analytics Option and Click Enable on GA. You will now log in to your Gmail Account and once you do that, it will import all the google analytic properties that your email is linked with. Find the relevant property and then click “Choose site”.

Adding Adsense to your AMP pages

You will do exactly the same for the Ads Option but here once you connect with Adsense, you are presented with a couple of more options.

Firstly select the Ad Unit you would like to display to your pages. Then click on the “Ebable Google AdSense for AMP HTML Pages” and then select how often you want your ads to appear ( X words), I selected 500 words.

Your AMP pages will now include ads and they should look like this:

Finally go to the Settings tag and do the following:

• On the “Setting for published posts” select posts and then click on “Enable AMP”
• On the “Default Setting for new posts” select posts and then disable on pages.
• Save your settings and now every new post you publish will automatically have an AMP version

Non-WordPress Sites Guide

For those who do not have WordPress and still wish to implement Accelerated Mobile Pages on their posts there is a good starting guide published by Search Engine Land.

UPDATE (12/03/2016): Adding related posts

How to add related posts to your AMP pages

I found a nice video on YouTube that explains how to add the “related posts” feature to your AMP wordpress pages. Just make sure your developer checks the code recommended first.