How to Set up Google AMP on a WordPress Blog

More and more people are using their mobile devices to connect to the internet. However, because not all smartphones, phablets, and tablets are created equal, performance issues can be quite a headache. And while mobile website developers are continuously looking for ways to improve both the user experience and the content of mobile sites, there are simply too many elements that severely impacts page loading times.

Introducing AMP

First utilised by leading news organisations, Accelerated Mobile Pages, or AMP, has been described by experts as essential diet HTML. It is like your ordinary website except that it does not carry non-essential elements which can affect page-loading times. AMP is a framework upon which web pages can be optimised for mobile devices.

It is primarily composed of three parts – an AMP HTML, an AMP JavaScript framework, and an AMP Content Delivery Network. The AMP CDN is required primarily to ensure better page performance. Additionally, the CDN already comes with a validation system built into the cache. This makes validation of AMP pages a lot easier. Limited tags, highly streamlined CSS, standardized JavaScript components, lazy loading and rendering, and heavily-cached nature makes AMP lightning fast to make for a pleasant reading experience for end-users.

Getting Your WordPress Blog Fully AMPed

Being one of the leading Content Management System platforms in the world and one of the most frequently used both by newbies and by serious web professionals alike, WordPress provides an excellent platform for trying out the lightning speed loading times of Accelerated Mobile Pages.

Here’s how you can turn your WordPress website into something that your readers or users will clearly be amazed about.

  1. Install the WordPress AMP Plugin 

The very first thing you have to do is to install the official AMP plugin that is developed by WordPress/Automattic. Logon to the amp-wp page of GitHub and download the WordPress AMP plugin. Install the ZIP file you have just downloaded in your WordPress website. Upon installation, append /amp/ on every WordPress article page. Now if you don’t have permalinks yet, you can use ? amp=1 instead.

How to Set up Google AMP on a WordPress Blog

 

You can also find the plugin here – https://wordpress.org/plugins/amp/

  1. Validate your AMP Version and Make Appropriate Changes 

Make sure to double check if your AMP version is working or not or that if it is recognised as valid by Google. Normally, Google’s Search Console can automatically pick up or identify the AMP version of your WordPress articles through the rel=”amphtml” tag that was appended by your AMP plugin. Unfortunately, it often takes several days before Google recognizes any changes that you make after the initial appending.

How to Set up Google AMP on a WordPress Blog

If you have made changes to your WordPress AMP version, you need to validate this using a combination of Google Chrome’s validation process and the Search Console. In order to fully utilize the Chrome validation facility, navigate to one of your WordPress AMP pages using Chrome. On your URL, add #development=1 then hit Ctrl + Shft + I in order to open Google Chrome’s Developer Tools. From here, click on the Console tab next to Elements. If you are having problems logging onto the Developer Tools, just hit the refresh button. This should give you a message saying either you have successfully validated your AMP or you need to fix on some issues in order to have it validated.

using chrome developer tools to validate accelerated mobile pages

You need to understand that the WordPress AMP plugin is really not enough because you will still need to validate every WordPress page or article that you want to be in an AMP version. One of the most common reasons why AMPs are not automatically validated is the height and width attributes of the images that are present on the web pages that need to be AMPed.

Additionally, putting legacy YouTube videos that are not embedded using https can also invalidate the AMP page. As such, you will have to solve these issues first before you can give validation another try.

Just a quick view of what you cannot do with AMP includes the use of third party JavaScript and the integration of form elements. Your AMP page is designed for ease of reading as such, it must not have any unnecessary elements which you would otherwise see in an ordinary website.

Additionally, your choice of fonts must be carefully selected so that loading times are not compromised. This also means that you need to use highly customizes amp-img elements with a very definitive height and width attributes. If you are using animated GIFs, make sure to use an entirely different extended component, the amp-anim. 

For videos, custom tags must also be used. These are other tags and extended components for a variety of AMP elements such as amp-YouTube, amp-video, amp-image-lightbox, and amp-carousel, just to name a few. The point is that your AMP pages must adhere to these rules in order to be successful at validation.

  1. Validate Your AMP Page using Schema Markup 

One of the essentially important components of your AMP pages is the schema metadata in order to specify the type of content of your WordPress page. With this in mind, it is therefore very important to have a valid schema markup. In order to check whether your WordPress AMP page has a valid schema markup, you need to use the Structured Data Testing Tool of Google. Use this tool to make changes in the class-amp-post-template.php file which you can access through the Dashboard of WordPress. Alternatively, you can also use FTP in making the much-needed changes until you can have your schema markups validated.

 

  1. Integrate Your WordPress AMP Plugin with Google Analytics

 Understand that while the WordPress AMP plugin can be enabled to work well with Google Analytics, it does require a fairly simple amount of effort on your part. Open your FTP site or your WordPress Dashboard and navigate to Plugins and click on Editor. Select AMP and edit the amp-post-template-actions.php. Look for the account tag under vars and place your WordPress website’s Google Analytics property ID. Using the methods in Step 2, revalidate your WordPress AMP pages to see if it is already setup with Google Analytics fully enabled.

AMP is practically still in its infancy. Nevertheless, with the promise of lazy loading and lightning-quick loading times, maybe now is the time to integrate AMP into your WordPress website.

Matthew Marley

Matthew Marley is a Social Media & Search Specialist from Glasgow Scotland with a passion for the web and emerging technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>