The Full Guide/Tutorial to WordPress Accelerated Mobile Pages (AMP)

Introduction

Modern-day internet users become more and more demanding, and that’s not necessarily a bad thing for web developers and webmasters. Isn’t a great user experience is all we should care about? Maybe not, there is also SEO, traffic, brand reputation and many more, but they should all go in hand with the experience we, as web owners/developers/marketers/webmasters have to provide users with.

With the evolution of the mobile web, search giants like Google have been pretty pushy on web owners to make their sites responsive and lightning fast. Both, mobile friendliness and website speed are one of more than 200 search engine rankings factors. Moreover, Google has recently announced that they will make the mobile index as a primary index, leaving desktop behind. This is clearly an indication that Google puts emphasis on the “mobile-first” web (which is true, to be honest).

Although this has been pretty successful, the majority of sites are still struggling to make their websites fast for all users, especially for the ones using mobile devices.

Did you know that 40% of users will abort the session if the site is loading more than 3 seconds? That’s pretty frightening. Imagine, you could be potentially losing up to 40% of traffic! Let’s assume you earn $2,000/month through website monetisation, so, 40% would account for $800.

There are many aspects that determine the website speed, which include:

• Proper Caching
• JS, CSS & HTML Magnification
• Image Compression
• CDN Integration
• Web Hosting
• Website Theme
• DNS Lookups and more.

We’ve already talked about how to increase the speed of your website, but AMP is something of another level.

In this post, we’re going to explain what AMP is, who should use it and what are the benefits, how to configure AMP on your WordPress website, how to install Google Analytics, Social Sharing Buttons, Menu, how to customise and test your Accelerated Mobile Pages.

There are a lot of aspects involved, especially when it comes to customisation and tracking, so you are better off paying attention 🙂

What’s AMP (Accelerated Mobile Pages)?

In October 2015, Google officially introduced Accelerated Mobile Pages (also known as AMP) to the world, following the introduction of the Facebook’s Instant Articles. Developed primarily by Google and a couple of partners like Twitter, the main aim of AMP is to provide mobile users with almost an instant page loading.

Google’s main goal is to provide relevant search results, giving users the content they were looking for at a super fast speed, that’s why they’ve introduced the AMP project.

So, How Does AMP Work?

In basic terms, AMP is a stripped HTML version of your normal page that restricts the usage of fancy designs & JavaScript functions. Meanwhile, it contains the most important part – the content.

Generally, standard mobile pages/posts have scripts, carousels, social sharing plugins and so forth. With AMP, most of this is stripped out, leaving users with what’s truly important.

Later in this guide, we’ll explain how to integrate AMP with your WordPress website and avoid the headaches that we have dealt with :).

What are the Benefits of AMP?

There are benefits for both, publishers/content marketers and users/readers. Let’s go through each one.

Publishers/Content Marketers:

• Implementation of AMP means that content can get easily discovered on mobile search results. Google places AMP pages in the “top stories” carousel on top of the search results, as well as organic listings. AMP pages are highlighted with a grey lightning bolt (as seen below).

TOP STORIES

SEARCH RESULTS

• Fast loading pages lead to satisfied users, a decrease in bounce rate, an increase in traffic, pageviews, and ultimately, an increase in conversion rate. Google rewards sites that show impressive results, so, you shouldn’t be surprised to see AMP pages ranking higher than standard mobile pages.

• Potential increase in Search Rankings. Although Google has stated that AMPs do not receive a ranking boost yet, it’s clear that the speed is indeed a ranking factor, which is directly correlated with AMP and its other benefits.

• As a result of a better user experience and faster loading time, users are likely to consume more content and check out other pages on the site. For monetised websites, it means that more revenue can be generated. In fact, according to Google, AMP Ads have shown some impressive results: 80% of publishers that are using AMP are getting higher viewability rates, and 90% of publishers see higher CTR (Click Through Rate). For the full list of supported ad networks head over here.

Users/Readers:

• As a web user, you know that it can be a daunting experience waiting an enormous amount of time for a page to load. AMP allows getting the content almost instantly.

• No more pop-ups. Yesssss!!! Users often get very frustrated seeing numerous pop-ups appear one after another. As AMP does not support 3rd party JS scripts, there is currently no way to place pop-ups. Hence, better experience for readers.

What’s The Difference?

Typically, AMP pages look very stripped with little or no navigation options, social sharing buttons, etc.

Here is how a typical AMP page would look like:

Not much on it, right? There is no navigation, no social buttons, just plain HTML. But, we’ve taken a step further and designed our AMP, so they don’t look much different from regular mobile posts. In fact, some may think they look even better.

Here is how our typical blog post looks like on mobile devices:

And here is the AMP Version:

As you can see, on our AMP pages we have a nice header with the logo, sticky hamburger menu that opens up a sidebar with navigational links to our main pages, and some nice social sharing buttons. Pretty cool, right? It doesn’t look so naked.

The difference in load time is significant, though.

Here is our performance score for Non-AMP Blog Post:

We must admit, our loading time for normal posts is above the average, which is pretty cool already. But, let’s see what AMP has to say.

And here is the AMP Version of that post:

Look at that!

Although the performance grade is slightly lower (due to external javascript calls) the speed is very impressive. Notice the change in page size, 1.3MB to 188KB. That’s about 85% decrease.

Should I Implement AMP?

This is a tough question and really depends on whether you are a frequent publisher, and whether you are receiving income through website monetisation.

Let’s go over a couple of scenarios:

• You are a high profile publisher with high traffic and ads – Yes, you would absolutely need to implement AMP.

• You run a news site or a blog that isn’t mobile-friendly – No, before applying Accelerated Mobile Pages, you need to ensure that your site is mobile friendly. If it isn’t responsive, it already means that your site is at a significant disadvantage. In basic terms, AMPs would not work properly on non-responsive sites.

• You run a news site or a blog that is optimised for mobile – Yes, you would need to implement AMP.

• Your site attracts high traffic and is monetised – Yes, it’s recommended to implement AMP.

• You are a service based website with a couple of pages – Depends on whether you have a healthy blog that offers a regular stream of fresh content and attracts high traffic. If this is the case, yes, we would recommend implementing AMP. If this is isn’t the case, and your site works as just a “business card”, you shouldn’t worry too much about AMP. That said, you should still ensure that your site is optimised for the mobile experience.

As you can see in our own example, although we’re a service-oriented company, we have a blog that provides our users with a regular stream of content. Thus, we’ve taken advantage of AMP.

How To Install AMP On a WordPress Website?

The basic integration of AMP with WordPress is as simple as downloading the AMP Plugin.

But, the challenging bit comes after…

If you wish to customise your AMP pages, make them trackable, insert menu and add social sharing buttons – keep reading this guide. If not, simply download the plugin, activate it, and all of your posts will have dynamically generated AMP versions. Simply enter /amp/ at the end of your post URL, and you will see the AMP version of that post.

NOTE: Currently, AMP works for posts only.

Step 1: Download AMP Plugin

As mentioned above, the first step in integrating your WordPress website with AMP is to download the AMP Plugin.

Go to your WordPress Dashboard Panel > Plugins > New > AMP

When the download is complete, go ahead and activate the plugin.

Note: The plugin has no features nor design options, so as soon as you activate the plugin, all of your posts would have standard AMP versions, with your site name and a blue header.

As mentioned above, you can check that by simply entering /amp/ at the end of the post URL.

The plugin automatically adds meta tags to your normal posts that tell Google that there is also an AMP version of that post.

You can check that by viewing the source code of your regular post. You should be looking for the following tag:

<link rel=“amphtml” href=“https://yoursite.com/post/amp/”/>

Here is an example as seen on our site:

Another tag would be added to the AMP version of that post, which will tell Google that your original post is a canonical version. This ensures that AMPs are not treated as duplicate content.

You should be looking for the following line in the source code of your AMP post version

<link rel=”canonical”href=“https://yoursite.com/post/”/>

Here is an example as seen on our site:

That’s it. If you’re happy with the general layout and do not require any other configuration, you can skip other sections.

But, if you wish to find out how to carry out customisations, set-up Google Analytics, add menu and social buttons – keep on reading.

Step 2: Download Yoast SEO Glue

Hopefully that by now you have all AMP posts set-up, and they are all running smoothly. You can check whether your posts are valid for AMP by using tools like APM Validator or Google Search Console AMP Test. Simply enter your AMP URL into the tool.

Now, let’s get back to the topic.

If you wish to carry out some customisations to your AMP pages, go ahead and download Yoast AMP Glue Plugin, a tool by the famous “Yoast SEO”.

Note: In order to use Yoast AMP Glue, you need to have Yoast SEO Plugin installed.

Go to your WordPress Dashboard Panel > Plugins > New > Yoast AMP Glue

Access its settings by going to Yoast > AMP

The plugin is divided into 3 main categories:

• Post Types – Allows you to select Post Types that you wish to run AMP on. Currently, pages are not supported. That said, the only option that you really need to enable is – posts (enabled by default).

• Design – This tab is dedicated to the customisation options. The plugin allows you to select a custom icon, a default featured image (only if the post does not have one), AMP header colour, text colour, meta info colour, links colour, and more.

• Analytics – Allows adding a Google Analytics tracking code. But, we couldn’t get the code working with this feature and had to go with the manual option (which we’ll explain later in this guide). If it works for you, simply ignore the “Adding Google Analytics to AMP” section.

Now that you have your preferred colours and styling set-up, it’s time to test whether your posts are valid for Accelerated Mobile Pages.

Step 3: Test If It Works

AMP is quite sensitive :), so it is important to check the validation of your posts every time you make any significant changes.

As we’ve mentioned above, there are 2 official tools available to test your AMPs – Search Console AMP Test and AMP Validator. It is also important to carry out tests using both tools. There was an occasion in our case where the AMP Validator was showing a valid page, while Search Console Tester was showing an error. We do not know which one is more accurate and reliable, but it can be worthwhile making sure that there is a PASS on both tools.

Search Console AMP Test

AMP Validator

If both tools show no errors, you can be sure that your Accelerated Mobile Pages are valid and ready to be shown in mobile search results.

Adding Google Analytics To WordPress AMP

First thing first, your standard Google Analytics script would not work on AMP pages. So, don’t waste your time figuring out where and how to place that Javascript code Google has provided you with.

In order to implement Google Analytics Tracking on AMP, you would need to place the necessary Javascript library provided by the AMP Project in the <head> section and then add JSON markup in the <body> section. We’ll show you the exact step-by-step guide in just a minute.

Step 1: Create a New Google Analytics Property

Google recommends that you set-up a separate Google Analytics property for AMP tracking.

In case you don’t know how to add a new property, follow the steps below:

So, let’s first add a new property by logging-in into our existing Google Analytics account.

On GA dashboard, click on Admin > Drop-down Menu Under Property Container > Create New Property

You will then be taken through a quick process of creating your new property.

Then, go back to Admin > Property > Property Settings and grab your tracking ID, which looks something like:

UA-11171117-2

You will need this ID for the next step.

Step 2: Paste The Following Codes

In order to get you GA working properly on AMP posts, you would need to paste 2 sets of codes.

Code 1:

Place the following code in the <head> section of your single.php AMP file (we’ll show you how in the next section):

<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

Code 2:

Place the following code in the <body> section of your single.php AMP file, replacing the account ID with the ID you just got from your new Google Analytics property.

<amp-analytics type=”googleanalytics” id=”analytics1″>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y”

},

“triggers”: {

“trackPageview”: {

“on”: “visible”,

“request”: “pageview”

}

}

}

</script>

</amp-analytics>

Option 1: Do It Manually

To place these codes manually, you will need to go back to your WordPress Dashboard and navigate to Plugins > AMP > Edit

On the next screen, select amp/templates/single.php

You will then be presented with the following screen. Don’t panic! It’s easier than it looks.

Place Code 1 straight after the opening <head> tag as seen in the image above:

Then, place Code 2 in the <body> section as seen in the image below:

Note: This particular code is for tracking pageviews, if you wish to implement social and event tracking, head over to Google’s Guide on Adding Analytics to AMP.

Again, don’t forget to replace the default UA ID with your own tracking ID.

Option 2: Try Using Yoast SEO Glue

If you don’t wish to go hard with coding, you can try placing your tracking code using Yoast AMP Glue Plugin.

Again, this option did not work for us but may work for you.

Step 3: Test Real Time Sessions

Hopefully, by now you have Google Analytics integrated, now you should go ahead and test whether it’s working properly.

Note: Currently, Google Tag Assistant is not able to recognise this type of Analytics code. Hopefully, this is something that Google looks into.

So, you would need to open any of your AMP posts in incognito mode and log-in to your new Google Analytics in a separate window.

In Google Analytics, navigate to Real-Time > Overview

If codes are working properly, you will be able to see real-time visitors (as seen below).

Okay, hopefully, by now you have fully functioning AMP posts with Google Analytics Tracking implemented.

Adding Social Sharing Buttons

As you can see, AMP is very stripped out and do not have fancy social sharing buttons. But, what’s the point of having a super-fast post that can’t be shared easily, right?

In this section, we’re going to show you how to implement social sharing buttons, as seen on our own AMP:

Step 1: Go To AMP Project Website

Similarly to Google Analytics integration, you would have to place the necessary Javascript library in the <head> section of your AMP single.php and then put social sharing code in the <body> of that document.

We’ll show you how to do all of that in just a second.

To learn more and see what social platforms are supported, head over to AMP Project Social Share.

Step 2: Choose Your Networks & Copy The Codes

You will need to place 2 sets of codes.

Code 1:

Navigate to Plugins > AMP > Editor > single.php and place the following code in the <head> section (as seen on the image below):

<script async custom-element=”amp-social-share” src=”https://cdn.ampproject.org/v0/amp-social-share-0.1.js”></script>

Code 2:

Secondly, you would need to place the following code in the <body> AMP single.php that will trigger the actual social buttons. An example is shown below.

<div id=”social-sharing-amp”>

<amp-social-share type=”twitter” layout=”fixed”

width=”30″

height=”30″> </amp-social-share>

<amp-social-share type=”gplus” layout=”fixed”

width=”30″

height=”30″></amp-social-share>

<amp-social-share type=”email” layout=”fixed”

width=”30″

height=”30″></amp-social-share>

<amp-social-share type=”linkedin” layout=”fixed”

width=”30″

height=”30″></amp-social-share>

<amp-social-share type=”facebook” layout=”fixed”

width=”30″

height=”30″

data-param-app_id=”123456789″></amp-social-share>

</div>

</article>

Note: Facebook takes an extra step with the authorisation process that requires you to add an App ID. You would need to create a Facebook app and then link it with your website. Here is a tutorial on how to do this.

After you create your first Facebook App, ensure to replace the default ID in the code with your own App ID.

In our case, we have 2 sets of social icons on a single page. One at the top, before the featured image and the other one at the end of the post.

So, for icons to display above the featured image code (shown in the yellow box), place the code as shown on the image below:

In order to place social icons at the bottom of the post, just position the code under “post_amp_content”.

Step 3: Customise

There are a couple of customisations you can carry out to your AMP social sharing icons, such as tweaking the sizes and layouts.

Currently, AMP supports the following layouts: container, fill, fixed, fixed-height, flex-item, no display and responsive.

In order to change the size of your icons, simply change the width and height for each social icon. Same applies to layouts.

In order to add your own styles, read the following section.

Customising AMP Pages

We’ve already carried out some basic customisations using Yoast AMP Glue, but if you wish to take a step further – follow the next couple of paragraphs.

In this section, we’re going to show how to change colours & fonts, footer content, add & customise the menu.

1: Changing Colours, Fonts & Logo

As long as you are familiar with basic CSS, you should be able to carry out the following styling changes.

In order to view the AMP style.php file, got to your WordPress Dashboard > Plugins > AMP > Edit > style.php

You will be presented with the following stylesheet (see below):

In this file, you can make changes to font families, colours, alignment of certain elements (e.g. logo), background colours, padding, margins, border sizes and many more.

As an example, let’s change the background colour of our AMP posts (currently set to “white”).

Navigate to “body” and change the background to any colour of your choice.

Hit “Publish” at the bottom of the page and check the changes.

Use this example to carry out other styling changes.

2: Changing Footer Content

By default, AMP Plugin displays the name of your website, powered by “Wordpress” attribution and a back to top button.

To some of you, this may look slightly generic, so you might decide to change what’s displayed.

To do that, go to Plugins > AMP > Edit > footer.php

As you can see, we haven’t got much in the footer. We’ve taken down the back to top button and WordPress attribution, and left just the name of our website.

3: Adding Menu To AMP

What really lacks in AMP Plugin is that it does not offer an option to add a menu to your AMP. You can imagine how effective menus are, and what kind of negative user experience lack of menu can lead to.

What if the user likes your post and wants to check out more? Lack of navigation can result in a decrease in pageviews, higher bounce rate and negative user experience.

That said, AMP Project does indeed offer a solution to add a sidebar where you can list your web links.

Here is how ours looks:

Again, similarly to adding Google Analytics and Social Buttons, you would need to place 2 sets of codes. One in the <head> and the other one in the <body> .

Code 1:

Navigate to Plugins > AMP > Editor > single.php and place the following library code in the <head> section (as seen on the image below):

<script async custom-element=”amp-sidebar” src=”https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script>

Code 2:

This process is slightly different from the ones we showed above.

Navigate to Plugins > AMP > Editor > header-bar.php

This file only has <header> and </header> tags. So, you would need to create body tags. To do this, simply type in <body> straight after the closing </header> tag and paste the following code:

<button class=”hamburger” on=’tap:sidebar1.toggle’>☰</button>

<amp-sidebar id=’sidebar1’layout=”nodisplay”

      side=”right” layout=’nodisplay’>

  <ul>

    <li id=”close-button” role=”” tabindex=”” on=”tap:sidebar1.close”>x

    <li><a href=“https://yourwebsite.com/link>Link 1</a></li>

    <li><a href=“https://yourwebsite.com/link>Link 2</a></li>

    <li><a href=“https://yourwebsite.com/link>Link 3</a></li>

    <li><a href=“https://yourwebsite.com/link>Link 4</a></li>

    <li><a href=“https://yourwebsite.com/link>Link 5</a></li>

  </ul>

</amp-sidebar>

After this, close the body tag with </body>

You would need to replace our example URLs with your custom links.

You might ask – why didn’t you just paste the code in the “single.php” file. Yes, we’ve tried that, but Search Console AMP Test was showing errors until we’ve placed the code in the “header-bar.php”.

Here is an image of how this looks at our end:

You might have noticed that we also have social sharing buttons in our menu. If you wish to implement these, simply add the social sharing code inside.

Note: Don’t wrap the menu code in <div>, as Google Search Console AMP Test will return an error.