How to Set up AMP for WordPress Websites

Since mobile phones are rapidly dominating the way users consume content on the web, it is crucial to optimize your web pages for mobile devices.

According to Google, page load speed is an important ranking signal, which is why every website owner strives to shave off milliseconds from their page load speed score. However, optimizing page load speed for mobile devices has been a challenge for everyone.

Google, the current standard for search engine optimization, initiated the Accelerated Mobile Pages (AMP) project in February 2015. The idea was to come up with a set of standards that websites can use to decrease page load time and thus improve the user experience for smartphones and similar devices.

In this article, I will talk about what AMP is, and how you can configure AMP for WordPress websites.

What is AMP?

The AMP project is an open-source project by Google that helps deliver quick website content delivery. In addition to an increase in page load speed, AMP also improves content navigation of the content on mobile devices.

In essence, AMP pages are the barebone versions of web pages that retain all the important content elements on delivery. The markup of AMP pages may differ from the conventional HTML code of the web pages, and to reduce page size, it imposes restrictions on the use of JavaScript and CSS.

Let’s take a look at an AMP vs. a non-AMP website:

— Source: Digital Muscle

When compared to standard HTML markup, AMP improves page load speed by as much as 85%, as proved in several tests.

— Source: Google AMP Project/Milestone

A survey suggests that almost 40% of visitors leave a website that takes longer than three seconds to load. This means that a faster performing website, particularly on mobile devices, is an essential factor in conversion rate optimization. An AMP-enabled website is certainly better positioned than the others in this respect.

— Source: Think with Google

The goal of AMP pages is to load web pages near instantaneously, typically 90% faster than the current standards. Due to this fact, the mobile user experience improves significantly, which according to studies, improves the bounce rate.

— Source: Google

Despite the simple format, the AMP project also introduced the possibility of including images, videos, some audience tracking scripts as well as advertisements.

How AMP Works?

AMP uses its own components, for example, <amp-img /> replaces the standard HTML <img /> tag. This allows the browsers to set loading priority according to the device.

AMP can also use extended versions for certain tags, like Facebook or Twitter tags to display interactions specific to these platforms.

— Source: AMP Project

How Are AMP Pages Built?

AMP framework has the following three core components.

1. AMP HTML: Web pages are written in simplified HTML, in which all such standard HTML elements that can slow down pages are replaced with simpler versions. For instance, the standard <img> tag is replaced by an equivalent.
2. AMP JS: Third-party JS scripts are forbidden, except in special cases that use several predefined and ultra-fast libraries.
3. AMP Cache: Google maintains a repository of AMP pages so that the page load speed can be further optimized through the cached version.

You can also add additional features to your website with ready-to-use components that are classified into Built-in, Extended, and Experiments.

— Source: AMP

Pros of AMP

According to SEO experts, AMP offers several important benefits such as:

• Faster Page load times.
• A decrease in bounce rate and session-drop out frequency improve dramatically.
• AMP ensures significantly better visibility in search engine results pages (SERP).
• AMP supports advertisements and paid searches. The goal is to open an advertising page faster than a non-AMP ready page.

Cons of AMP

While AMP looks great, the process is not trouble-free at all. At the minimum, it has the following issues:

• AMP could prove to be difficult to implement or validate.
• Since JavaScript and CSS are restricted in AMP, some features, plugins or widgets and other dynamic scripts might not work on mobile devices. However, AMP guidelines cover the use of custom JavaScript.
• It is compatible with a limited number of platforms.

However, despite the issues mentioned above, experts concede that AMP pages are better positioned to rank higher in SERP, and website owners see an increase in their traffic from mobile searches.

Why (and When to) Use AMP?

AMP is equivalent to an optimized responsive website with the following two advantages:

1. AMP enabled websites to appear in the Google Top Stories
2. They offer an optimal version of the web pages

AMP pages are ideal for content-focused pages that require additional optimization for rendering on smartphones. AMP speeds up the delivery of these pages for all devices.

However, you have the choice between.

• A responsive website for desktop, mobile, and tablet, and an AMP version for Google mobile search results.
• A website for desktop, and an AMP version for mobiles
• A responsive website for desktop, mobile, and tablets

As long as your website is properly optimized for performance and adopts Rich Snippets (when possible), it does not matter if you don’t use AMP. This avoids multiple listings in SERP that might confuse the users.

For example, on Cloudways, the website and blog have AMP version for mobile devices and responsive site for desktop visitors.

Back in December 2018, AMP Project Contributors announced AMP for WordPress plugin to help generate AMP version of the websites automatically. As I write this, the Accelerated Mobile Pages WordPress plugin only works with articles, but future versions are planned to work with pages and archives as well.

Configuring the plugin is simple and creates AMP versions of your posts by adding /amp in your URLs. The Google Mobile Bot will then index these URLs and show the AMP versions of your website in search results.

— Source: WordPress

Setup AMP for WordPress

If you have decided to generate Accelerated Mobile Pages (AMP) version of your WordPress website, you must install and activate the AMP for WordPress plugin.

Go to Plugins → Add New → search for “AMP for WordPress” → click the Install Now button, and then activate the plugin.

Once the plugin has been activated, you’ll see the AMP option in your dashboard.

In the General section, you have Templates Mode and Supported Templates options. By default, you will see Reader and Posts options enabled. However, you can simply enable or disable these options and click the Save Changes button.

After configuring the template settings, go to Dashboard → Appearance → AMP. You can view the rendering of your website on mobile (if you see your WordPress dashboard instead of the website, click the home button).

You can change the website header background color. Note that the plugin might take over the logo or favicon if the theme allows it. Once done, don’t forget to save the changes!

You can now view all of your AMP content by just adding /amp/ at the end of the URLs.

AMP for SEO

When you check the source code of the page, you will see the following two lines:

<link rel="canonical" href="http://wordpress-168726-487246.cloudwaysapps.com/index.php/2018/09/07/repellat-sit-error-rerum-maxime-2/" />

The canonical URL avoids duplicate content between the regular page and the AMP page and informs Google that the desktop version is the original. The script below is used to call the AMP JS library.

<script type='text/javascript' src='https://cdn.ampproject.org/v0.js' async></script>

Note: if you get a 404 error when viewing WordPress AMP pages, go to Settings → Permalinks and just click the “Save Changes” button without making any changes.

Validate AMP Pages

If you want test AMP’s validity, insert the page URL and click the Run Test button.

Customize AMP for WordPress Pages

WordPress AMP plugin contains only the basic customization options. Several other plugins allow you to go beyond the basic options. If you are using Yoast SEO, for example, you need to install and activate an extension called Glue for Yoast SEO & AMP.

— Source: WordPress

Once the plugin is activated, go to the left menu bar in SEO → AMP. In the Post types tab, you can allow AMP for your articles, pages or media.

In the Design tab, you can choose different colors, download a logo and a default header image when an article does not have its own image.

In the Analytics tab, you can enter your Google Analytics ID.

Note: Don’t forget to save your changes before switching tabs.

Several plugins allow you to include modules in your WordPress AMP pages such as related articles, footer widgets, your social network icons. If you opt to use these modules, don’t forget to validate the AMP pages after installation.

Wrapping up!

I hope this article helps you understand the dynamics and functionality of Accelerated Mobile Pages for WordPress. Now it’s your turn to contribute to this article. You can share it on social networks, and comment your thoughts below. Do you find it useful or relevant to SEO and website optimization?

If you have questions, you ask them in the comments section below.