Hello Sunil
Accelerated Mobile Pages (AMP)

How to set up WordPress for AMP (Accelerated Mobile Pages)

AMP stands for Accelerated Mobile Pages and it’s a project made by Google and Twitter that aims to offer fast loading mobile pages and enhance website mobile performance.

The web is slow for lots and lots of people, in fact, the majority of the people using the internet do so over a mobile phone, often on a 2G or sometimes 3G connection. The AMP should enhance the loading speed of your articles on mobile devices making it blazing fast or almost instant. However, on the other hand it restricts what you can do in HTML pages. Fancy design is stripped out in favor of speed. Google is forcing this technology from the start and it even gives prime time in search for a website that is already implemented AMP.

In this article, we will show you how to set up Google AMP in WordPress.

How to install AMP on WordPress website

Step 1: Install and activate base AMP plugin

First thing you need to do is install the free official AMP plugin by Automattic and activate it. This is the base plugin that you will need in order for AMP to work. For more details, see our step by step guide on how to install a WordPress plugin.

While activation, you can head over to Appearance -> AMP page to see how your site looks on mobile devices using AMP. However, your customize options are pretty limited with this plugin.

Customization page for WordPress AMP plugin
Customization page for WordPress AMP plugin

The AMP plugin will automatically generate AMP compatible versions of all your posts, which you can view by appending /amp/ to the end of your post URLs. For example:

Original URL: https://hello-sunil.in/5-best-upi-apps-for-instant-payments-in-india/

AMP Version URL: https://hello-sunil.in/5-best-upi-apps-for-instant-payments-in-india/amp/

**Note that only your posts  will be AMP compatible with this base plugin. (not your pages).

Step 2: Remove WordPress branding on AMP pages

WordPress branding on AMP pages
WordPress branding on AMP pages

If you want to remove WordPress branding (under footer) from base AMP plugin then you need to follow these steps.

a) Open WordPress Admin dashboard

b) Head over to Plugins -> Editor

c) From right side of windows select AMP plugin from drop down menu.

Select AMP plugin to edit
Select AMP plugin to edit

d) Open the file templates/footer.php from right side of the windows (you need to expand templates to see footer.php file)

e) You can find the default footer text in that file just replace it with the below code and save the file.

<?php
/**
 * Footer template part.
 *
 * 🚫🚫🚫
 * DO NOT EDIT THIS FILE WHILE INSIDE THE PLUGIN! Changes You make will be lost when a new version
 * of the AMP plugin is released. You need to copy this file out of the plugin and put it into your
 * custom theme, for example. To learn about how to customize these Reader-mode AMP templates, please
 * see: https://amp-wp.org/documentation/how-the-plugin-works/classic-templates/
 * 🚫🚫🚫
 *
 * @package AMP
 */

/**
 * Context.
 *
 * @var AMP_Post_Template $this
 */
?>
<footer class="amp-wp-footer">
	<div>
		<h2><?php echo esc_html( wptexturize( $this->get( 'blog_name' ) ) ); ?></h2>
		<p style="text-align: left;"> Copyright © 2017 – 2019</p>
		<a href="#top" class="back-to-top"><?php esc_html_e( 'Back to top', 'amp' ); ?></a>
	</div>
</footer>

That’s all now save the settings and check the WordPress AMP pages.

Step 3: Install and activate Glue for Yoast SEO & AMP plugin

Once you have the base AMP plugin installed, you can layer on additional plugins in order to gain greater functionality. There are several free options you can choose from, but the ones we use throughout this guide is Glue for Yoast SEO & AMP. (Remember: You must have the Yoast SEO plugin installed and activated in order for this to  work)

Glue for Yoast SEO & AMP

The steps you need to follow are described below:

a) Install & activate Glue for Yoast SEO & AMP plugin from WordPress repository.

b) You can head over to the SEO -> AMP settings menu, design tab, and change the styling to fit your brand. Also, upload a default image for posts that don’t have a featured image.

Customize your default image & favicon under design tab
Customize your default image & favicon under design tab

Step 4: Set up Google Analytics

Now, we can go ahead and make our accelerated mobile pages (AMP) trackable by integrating Google Analytics. In order to set your pages up for Google Analytics tracking, you will first need to find your tracking ID.

Log in to Google Analytics, then go to Admin -> Property -> Property Settings. You will find here your tracking ID which looks something like: UA-XXXXXXXX-Y (tracking ID should begin with UA)

Copy your tracking ID, then log in to WordPress. In the left hand navigation, go to SEO -> AMP -> Analytics tab and paste your AMP specific version of your Google Analytics script. Then click Save Changes.

Adding a valid google analytics tracking code
Adding a valid google analytics tracking code

Remember generic Google Analytics (GA) scripts will not work with the AMP framework, so you will have to add an AMP specific version of your GA script. Simply add the following lines to the tracking analytics code field. Ensure to replace a default tracking ID with your unique ID.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXXXX-Y" – Replace this with your tracking code
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Step 5: Troubleshoot your errors in Google Search Console

Google Search Console provides a way to manage all your AMP pages in one location. For the same you can head over to your property -> Enhancements -> AMP

AMP page impressions on Google (error, valid with warnings, valid)
AMP page impressions on Google (error, valid with warnings, valid)

Here you will be able to see how many of your Accelerated Mobile Pages (AMP) are being indexed and which ones, if any have critical issues then you can troubleshoot them using the following tools.

Tools 1 :  AMP Validator

Tools 2 :  AMP Test

Tools 3 :  Google Chrome (Developer Console) by appending #development=1 to the URL

Step 6: Check your page speed

Once you have completed the above, now it’s time to see the benefits of your efforts. Run your AMP version and standard mobile version pages through a page speed tool like WebPageTest and compare the results:

AMP Version

AMP Version

Standard mobile version

Standard mobile version

Now let’s discuss its pros and cons which are describe as follows:

Pros of AMP

  • It speeds up website load time
  • It increases mobile ranking
  • Low bounce rate

Cons of AMP

  • Stripped down version of content
  • Limited analytics supported
  • Slow loading of video content
  • Ad revenue is reduced

So as you can see there are some easy ways to get AMP up and running on your WordPress site. AMP is young in its adoption and as more sites continue to roll out their own versions, we will start to see more data and be able to better quantify the advantages. In the meantime, AMP can be extremely powerful and effective for large online publications, news agencies and high traffic blogs. Before you integrate AMP on your site, make sure that you already have an ordinary mobile version of the website.

Have any other tips about using AMP with WordPress? If so we would love to hear about them below in the comments.

Similar articles you may like

Was this article helpful to you?
[Total: 0 Average: 0]

 

Sunil Pradhan

Sunil is a front-end developer, illustrator and an online entrepreneur. He is the founder of "Hello Sunil" where he shares his love of technology with the world. He loves to write technical how-tos and tutorials. He is open minded and willing to explore beyond his knowledge.

Add comment