Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. READ MORE

Use Google AMP for WordPress to Improve SERP in Smart Devices

Updated on September 25, 2018

9 Min Read
AMP For WordPress
Reading Time: 9 minutes

You have probably noticed that reading some web content on a smartphone is long, very long, even endless. Fortunately, Google is here! By launching at the end of February 2016, the Accelerated Mobile Pages (AMP) project, Google expects to accelerate the loading time of web pages on mobiles and thus improve the reading comfort for mobile users.

What is Google AMP?

The Google AMP project, Accelerated Mobile Pages, is an open-source project by Google aimed at delivering the content of a website quickly. Content that is accessible within seconds, and is, simple to navigate. But what is Google AMP concretely?

Pages in AMP are a bare-bones version of web pages which retain all the important content. In fact, the markup of AMP pages may be different from conventional HTML pages. They also have important restrictions, including the use of JavaScript and CSS.

amp landing page vs regular landing page

— Source: Digital Muscle

According to Google, AMP websites render 15 to 85% faster than Standard HTML format.

optimized amp website

— Source: Google AMP Project/Milestone

Google considers the speed of loading pages and the mobile-friendly aspect of a website as essential criteria for SEO. An optimized AMP website will certainly be better positioned than the others. Knowing that more than 40% of visitors leave a website with a loading time longer than 3 seconds, a faster website will increase your mobile conversion rate.

40 percent visitors leave website

— Source: Think with Google

The goal is for AMP pages to appear almost instantaneously, which is typically 90% faster than usual. Due to AMP high speed, the mobile user experience is greatly improved, which according to a studies drops the bounce rate convincingly.

amp bounce rate

— Source: Google

In order for web editors to adopt this format, even though the format is really simple, the AMP project has introduced the possibility of including images, videos, some audience tracking scripts as well as advertisements.

How Does Google AMP Work?

Google Accelerated Mobile Pages (AMP) uses its own components, where for example <amp-img /> replaces <img />. The reason is simple: it allows the browser to have the choice of loading priority on the element according to the current view. AMP can use extended versions that can be called in JavaScript to be eligible for certain tags, like Facebook or Twitter tags to display interactions specific to these platforms.

how does google amp work

— Source: AMP Project

How Are Google AMP Pages Built?

For simplicity, we can consider Google AMP as a framework with these three core components:

google amp core components

  1. AMP HTML: The pages are coded in AMP HTML, a kind of simplified HTML: you take the standard HTML but you remove all the elements that can slow down page loading. Even the tag <img> is removed, replaced by an equivalent.
  2. AMP JS: The third-party scripts are forbidden, except in special cases. For example, JavaScript is not totally forbidden, but only some predefined and ultra-fast libraries are allowed.
  3. AMP Cache: Even if these pages are stored on your website, it is possible to go through a cached version located on Google’s servers.

Pros of Google AMP

SEO experts put forward a few arguments about Google Accelerated Mobile Pages (AMP):

  • A faster loading of a website content is a great way to improve the user experience, which encourages users to return to AMP-enabled website.
  • Google AMP improves load times and thus decreases the dropout and bounce rate of your website, which is beneficial for SEO.
  • If the AMP format is not a positioning factor for Google, the Accelerated Mobile Pages involve statistics and significant improvements in indirect factors such as load time.
  • Google AMP provides much better visibility on the SERP. The AMP icon is clearly visible and highlights items via the carousel or other feature snippets. This increases the click rate on the SERP.
  • The AMP format is also available for commercials, paid search. The goal is to be able to open an advertising page faster than a page that is not in AMP format. This improves the user experience and decreases the bounce rate.

Cons of Google AMP

Other professionals, ecommerce store owners, bloggers, and digital marketers have a different point of view:

  • Google AMP can be difficult to implement or validate even if you are a developer.
  • Since JavaScript and CSS are restricted in AMP, some features, plugins or widgets and other dynamic scripts might not work on mobile. However, you can use custom JavaScript using the AMP guidelines.
  • Google AMP is compatible with a limited number of platforms, so if you are using any other, you may not get accurate statistical data.
  • Google AMP is only compatible with some online advertising platforms.
  • However, they recognize that the AMP pages will be better positioned in Google and thus see an increase in their traffic from mobile searches.

Why Use Google AMP and When?

Google AMP is equivalent to an optimized responsive website and has two advantages to achieve an AMP version:

  1. Appear in the Google Top Stories
  2. Offer an optimal version for pages with great editorial content

Indeed, you will be more sensitive to an AMP version if the pages concerned are mainly related to editorial content: blogs, press, news, newspapers, documentation, encyclopedia, information, thesis, etc. Because optimizing an AMP page is ideal for this type of content.

In addition, if you are eligible to publish on Google News, your articles will appear on the new Top Stories news carousel. The effort offers an interesting benefit.

However, if your website does not concern the enhancement of editorial content only (all categories of websites that don’t fall into the type of the preceding categories), you have the choice between:

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

Indeed, either you offer your full website for desktop views and an AMP version with the design and the possibilities of interaction and ergonomic incompatibility (which is similar to having a desktop website and a separate mobile website); either you offer the same website and the same design for all your views.

As long as the latter is properly optimized on performance and adopts Rich Snippets when possible, it does not matter if you don’t use Google AMP. This avoids the multiplicity to access of the content, the visitor can be lost by accessing a different version of the website via Google mobile search results and another version by accessing the website directly.

For example, for our website, the blog offers a Google AMP version (because it favors the development of editorial content) and the main website keeps its responsive version, without making an AMP version available (because it is not favorable to an editorial content that is not consistent and already optimized on mobile performance).

google amp core components

If you are on WordPress, there is a plugin named “AMP for WordPress” developed by Automattic, the owner of WordPress. It allows you to automatically and dynamically generate an AMP version of your website. For the moment, compatible only with the articles and not yet with the pages and archives, this will allow in a first time to quickly setup Google WordPress AMP plugin.

google amp core components

— Source: WordPress

Setup Google WordPress AMP Plugin

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

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

Once AMP for WordPress plugin is activated, go to your dashboard on the left: Appearance → AMP. You can view the rendering of your website on mobile (if you see your WordPress dashboard instead of the website, click on the mobile window on the small house/go to the website).

google amp appearance view

You can change the background color of the top of your website (header background), a color that will be reused for your links and the color of the text on this top band. Your logo or favicon will be taken over by the plugin if your theme allows it. Don’t forget to save your changes!

You can now view all of your AMP content by just adding /amp/ at the end of your web page’s URL.

google amp website

Google AMP SEO

Looking at the source code of your page, you will see two lines of code:

<link rel="canonical" href="" />

            <script type='text/javascript' src='' async></script>

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

Note: if you ever have a 404 error when trying to see your WordPress AMP pages, go to Settings → Permalinks and just click “Save Changes” button without touching anything.

Validate Your AMP Page

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

validate amp page

Customize WordPress AMP Pages

The Google WordPress AMP plugin contains only a few customization options while other plugins will allow you to go beyond. If you already use Yoast SEO, you need to install and activate Glue for Yoast SEO & AMP, an extension of Yoast SEO.

glue for yoast seo and amp

— Source: WordPress

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

glue for yoast seo and amp

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 one.

amp yoast seo design

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

amp yoast seo design

Note: Don’t forget to save your changes in each tab.

There are many plugins that allow you to include some modules in your WordPress AMP pages: related articles, footer widgets, your social network icons. If you ever use them, have your AMP pages validated after installation.

And What’s Next?

The big deal, in the long run, will be to see how Google treats its algorithm with AMP pages, whether it will only favor AMP technology or remain impartial by favoring fast loading websites.

The AMP project wants to solve performance problems on current websites that find their sources via external and third-party interactions and scripts that weigh down the page: heavy advertising, innumerable trackers, etc.

The expectations of consumers on mobile are different from desktop visitors. It is a fact that we have limited data on mobile, the speed of transfer may not be at the top, they don’t appreciate being blocked in their search for content through obstructive advertising, blocking messages asking them to download an app, a banner covering 30% of the content asking them to download the same app, etc.

There is a notable misunderstanding between advertisers and mobile visitors for several years. And Google AMP wants to stop this plague of a slow website. But an optimized website will do just as much as a restricted website under AMP.

However, if you’re interested in using Google Accelerated Mobile Pages (AMP) comprehensively, it’s because you’re already paying attention to the performance of your website. And that it is probably already sufficiently optimized. Websites that offer an execrable mobile browsing experience are slow because they are not interested in these performance issues.

As Google will promote the speed of websites, especially on mobile (and hoping that it does not lose its bias favoring AMP), you can begin to advise your customers and publishers on the issue of performance in connection with their referencing and ranking.

We hope this article helps you understand the dynamics and functions of Google AMP for WordPress. Now it’s your turn to contribute to this article. You can share it on social networks. And what do you think of Google AMP? Its usefulness, relevance, and target context? If you have questions, ask them in the comments section below. Feel free to share your own feedback!

Frequently Asked Questions (FAQs)

What is Google AMP?

Google AMP refers to Accelerated Mobile Pages (AMP) for mobile browsing, on a tablet or smartphone. The mobile terminal requires adapted pages otherwise the content of the website will take a long time to load. The loading speed of a website plays a vital role in the customer experience. Google supports this open-source technology to enhance mobile user experience.

How to setup AMP on WordPress?

There are WordPress AMP plugins to convert your website pages into Google Accelerated Mobile Pages (AMP) format. The two best-known plugins are:

  1. AMP for WordPress by Automattic: This plugin allows you to convert your website articles to Google AMP format on WordPress. The visitors will be able to open your articles instantly.
  2. AMP for WP: This plugin adds AMP functionality to your WordPress website.
Share your opinion in the comment section. COMMENT NOW

Mansoor Ahmed Khan

Passionate about technology, entrepreneurship, and marketing, Mansoor Ahmed Khan is in computing since he knows how to type on a keyboard. His daily life is rocked by his family, projects, and his screen. Probably in this order, he likes to be convinced at least.

Be the first to check out WordPress 5.0

Use our Staging feature before upgrading your website to WordPress 5.0.

Get Our Newsletter
Be the first to get the latest updates and tutorials.