How to Enable AMP or Accelerated Mobile Pages in WordPress

What is Google AMP?

AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

AMP builds on your existing skill sets and frameworks to create web pages. AMP is supported by many different platforms, and it’s compatible across browsers.

AMP’s ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more!

In order to load a webpage instantly on mobile, AMP ecosystem manages HTML, rendering of resources, caching and optimization of the webpage.

AMP filters all that large HTML, uses inline & size-bound CSS, and load the resources asynchronously. And at the same time, it retains all important content of the webpage. This is how AMP helps to render mobile optimized content which loads instantly.

AMP is an ecosystem that creates and delivers mobile optimized web pages called AMP Pages in general.  There 3 key components of the AMP pages:

AMP HTML: A markup language like HTML but with custom AMP properties and some limitations for optimum performance. In other words, it is a subset of HTML. That is why, the one who knows HTML can easily adapt AMP HTML.

AMP JavaScript: AMP JS library is an environment for AMP pages. It helps fast rendering of AMP HTML pages. AMP JS library follow best performance practices like loading all JavaScripts asynchronously, sandboxing iframes and pre calculation of layout for all elements of the page before page resources are loaded.

AMP Cache: AMP Cache is a proxy based Content Delivery Network that cache AMP pages, optimize them and deliver them when it is required.

If you are interested to learn more about how AMP works, you can follow this official link.

Why You Should Setup AMP on your WordPress Website

• Firstly, AMP improves loading time of your WordPress website on mobile devices. And everyone (including Google) loves faster websites.
• Google’s latest DoubleClick study shows that 53% user bounce from the websites which take longer than 3 seconds to load. That means more than half of the audience never see your content if your site takes more than 3 seconds to load. AMP (Accelerated Mobile Pages) aims to fix this by loading webpages instantly.
• Since its launch in October, 2015 AMP has become more mature and feature rich. Now AMP supports in-content faster loading AMP Ads. So that the publishers can choose AMP without being worried about decline in ads revenue.
• AMP Open Source JavaScript Library is highly cashable. Which ensures snappy fast performance of your AMP pages.
• Basically, AMP focused on fast delivery of static content. As there is no user authored JavaScript supported. But using AMP as Progressive Web App (PWA) and/or embedding AMP inside PWA, dynamic tweaks are possible.
• AMP improves engagement of your mobile audience by loading your website instantly.
• Because speed is Google’s core principle for their products and services. Perhaps that is why Google is continuously boosting and refining AMP. In early 2017 Google introduced two new improvements to AMP: optimized image delivery and AMP for slow network conditions.
• Though as of now AMP is not a ranking factor but in future AMP may be ranking factor as well. As Google has always been concerned about user experience. And Google will definitely want to offer seamless user experience to rapidly increasing mobile user base.
• As per an official blog post on ampproject.org; more than 2 billion AMP pages have been published by 900K+ domains.

For all these reasons, you must consider to Enable Accelerated Mobile Pages in WordPress site.

How to Enable Accelerated Mobile Pages or AMP in WordPress

1. AMP – Accelerated Mobile Pages Plugin

Automattic (the company behind WordPress) introduced an exclusive plugin called AMP for setting up Accelerated Mobile Pages in WordPress.

Follow 5 simple step to setup AMP in WordPress:

1. Go to Add New plugin in WP dashboard.
2. Search for AMP in plugin search bar.
3. Install and activate plugin called AMP authored by Automattic.
4. You are done, your site will start supporting AMP. All the posts of your site will have AMP version.
5. You can access your AMP webpages by adding /amp at the end of URL.

AMP plugin by Automattic has very limited settings to make any changes. You can change header text color, background & link color and color scheme. You can access AMP settings menu by navigating: WP Dashboard > Appearance > AMP.

If you wish to tweak the style of AMP pages, you need to find another way. In the next para, I have explained how you can change some basic styling of AMP pages and can tweak few other things.

2. Glue for Yoast SEO & AMP

If you are already using Yoast SEO, then you need to install and activate the Glue for Yoast SEO & AMP.

Glue for Yoast SEO & AMP plugin make sure that AMP plugin uses Yoast SEO metadata properly. This plugin is written by Yoast and work with Yoast SEO plugin.

Glue AMP plugin integrates Yoast SEO with AMP pages. From technical SEO point of view Glue plugin also offers to customize basic AMP pages styling. You can tweak basic design, link color, AMP icon etc.

• Install and activate Glue for Yoast SEO & AMP
• It will add new AMP menu under Yoast SEO plugin
• You can access AMP settings by clicking it.

For Glue plugin settings, see screenshots below.

Under Post Types you can select, which post type you want to enable with AMP.

In Design tab, there are some style settings for AMP version of webpages.

Under Analytics tab you can paste Google Analytics.

Don’t forget to click on the save settings button to store your changes.