Working AMP (Accelerated Mobile Pages) Into WordPress

Accelerated Mobile Pages (AMP) is a Google project that aims at making mobile web faster. It creates a less cluttered and less flashy way of viewing content on your mobile phone. Thus, mobile web pages load instantly. It is speculated to be beneficial for SEO in that; it is used as a page ranking factor, and it will have a quick label designation on SEO results page.

How AMP Works

As a framework for creating mobile web pages, AMP comprises of three basic parts. They are;

• AMP JS: JS stands for JavaScript framework used in mobile pages. It is responsible for handling resources and asynchronous loading. However, third party JavaScript does not integrate with AMP.
• AMP CDN: CDN (Content Delivery Network) is optional. However, it automatically caches and optimizes the performance of AMP enabled web pages.
• AMP HTML: HTML language bears custom properties and tags among other numerous restrictions. Nonetheless, people who are familiar with regular HTML usage find integrating existing web pages to AMP HTML easy.

Integrating AMP with WordPress

To integrate working AMP into WordPress pages, you can use a WordPress AMP plugin. When you enable AMP to WordPress plugin on your site, all URLs will have /amp/ version. Thus, you go to any page and add /amp/ at the end to view the AMP page version. The plugin adds a meta tag to the head of every normal page to make it possible for Google to recognize that AMP pages exist. The AMP plugin utilizes the site logo you set in the WordPress theme customizer. It has no additional settings. You just need to install and activate it.

The plugin fixes all existing content in your database to assimilate with AMP. WordPress stores all posts in your database as HTML. These HTML posts do not always fit in with the AMP HTML requirements. Therefore, the AMP plugin features a set of sanitizers. Sanitizers are filters that run over your content to get rid of tags and their attributes whose values are not allowed.

When using AMP, all articles on your WordPress website should have two versions; the original WordPress version for regular website visitors and the AMP version for mobile website users. Just like a regular website, the AMP version contains a lead and on-page comment forms among other features that are supported by third party JavaScript.

In some cases, you may have to rewrite your website’s template to put up with AMP restrictions. For instance, CSS in AMP should be in-line and not more than 50KB. Moreover, to control loading, the content ought to be uploaded using the amp-font extension. Multimedia are handled differently. For instance, images utilize amp-img element. They should have a specific height and width for an easy website to AMP integration. In addition, if you use animated gif images, you may have to use a separate amp-anim extended component for the images to reflect on the AMP pages.

Just like images, there are custom tags that are used to embed hosted videos through HTML5. It is known as amp-video. However, YouTube videos are embedded with a separate component amp-YouTube. Slideshows are supported through amp-carousel while image lightboxes are supported through amp-image-lightbox. Social media embeds have become part of every serious website. Thus, they cannot be left behind. They are supported via extended components.

Getting Started With AMP in WordPress

1. Install Official WordPress Plugin

The official WordPress plugin is developed by Automatic/Wordpress and is often updated on GitHub. Start by downloading the plugin on amp-wp GitHub page. Install it on your WordPress site just like any other plugin. After installing you just append /amp/ to any article page to view the AMP version.

2. Validate and Tweak

The rel=amphtml tag appended by the official plugin allows Google Search Console to pick up and validate AMP version articles in bulk. However, it does not detect changes promptly. If you make changes, they take days to reflect on the AMP version articles. Search Console and Chrome Validation process is recommended. Validation is easy and fast.

Installing the plugin is not enough, you have to take time to review and validate all the pages you would like to change to Accelerated Mobile Pages. Additionally, depending on how your articles formatting style, you may be required to make changes for them to integrate as AMP pages and validate. This mainly applies to height and width of your images.

3. Get Schema Markup to Validate

Having a valid schema markup on all AMP pages is crucial. Use Google Structured Data Testing Tool to test your pages for valid schema markup.

4. Ensure Google Analytics are working with AMP plugin

Tracking a website with analytics enables you to know what you are doing right or wrong. The WordPress plugin may not enable amp-analytics. However, amp-analytics is easy to enable as explained below.

How to Enable AMP-Analytics

AMP analytics data collection is enabled as a layer on top of a measurement protocol. Since it is an extended AMP component, it is included in every document as a custom element. To function on your pages, add the script below in the head and before AMP JS library.

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

User identifiers are generated randomly and stored in cookies or local storage. AMP analytics support the analytics opt-out option. Thus, if a user installs opt-out, data collection via the analytics feature is disabled.

Accelerated Mobile Pages offer an easy way of boosting mobile site speeds for WordPress publishers. It is designed to optimize the browsing experience for mobile users especially when on the move through standardizing the mobile versions of every website with AMP.