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.
- 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.
- AMP JS: Third-party JS scripts are forbidden, except in special cases that use several predefined and ultra-fast libraries.
- 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:
- AMP enabled websites to appear in the Google Top Stories
- 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.
What is AMP?
AMP refers to Accelerated Mobile Pages (AMP), a Google-approved technique for improving page load speed for mobile devices. AMP reformats the content on the web pages and greatly improves page load speed for AMP-enabled pages of your website.
How to set up AMP on WordPress?
Several WordPress AMP plugins convert your website pages into Google Accelerated Mobile Pages (AMP) format. The two popular plugins are:
- AMP by AMP Project Contributors: This plugin allows you to convert your website articles to Google AMP format.
- AMP for WP – Accelerated Mobile Pages: This plugin adds AMP functionality to your WordPress website.
Mansoor Ahmed Khan
Been in content marketing since 2014, and I still get a kick out of creating stories that resonate with the target audience and drive results. At Cloudways by DigitalOcean (a leading cloud hosting company, btw!), I lead a dream team of content creators. Together, we brainstorm, write, and churn out awesome content across all the channels: blogs, social media, emails, you name it! You can reach out to me at [email protected].