How to Enable Accelerated Mobile Pages in WordPress – 2017

Updated on

Google introduced Accelerated Mobile Pages (AMP) project in October, 2015. Since then the web witnessed a large number of websites with AMP pages. Learn how to Enable Accelerated Mobile Pages in WordPress.

This article is focused on how to setup AMP in WordPress, what are Accelerated Mobile Pages, what is AMP and how it works, who should implement AMP. And why you should Enable Accelerated Mobile Pages in WordPress website.

Fastest WordPress Hosting Anywhere!
How to Enable Accelerated Mobile Pages in WordPress
How to Enable Accelerated Mobile Pages in WordPress

What are Accelerated Mobile Pages? What is AMP?

First of all, AMP i.e. Accelerated Mobile Pages is an open source and free project which aims to load webpages instantly on mobile devices. AMP is brought to us by Google in collaboration with many others (publishers, platforms and technology companies etc.) of the industry.

The fact is, a lot of people use internet on their mobile phones on 2G, 3G or 4G mobile network. And the number of mobile internet users is increasing rapidly. That’s why every publisher trying to target the huge mobile user base. But the user experience of mobile browsing is not up to mark for most of the websites because of slow internet speed and large webpage size.

Studies conducted on internet users’ behavior show that if a webpage loads slower, there are greater chances that user will go off from that webpage and will try another. AMP aims to fix this.

How AMP Works?

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.

Who Should Implement AMP?

The straight answer is everyone who wants snappy fast webpages on mobile. If you are still not sure whether you should setup AMP or you should not. See next two bullet points and make your mind.

  • If most of your site’s content is static (like a news site or a blog may be), then you should.
  • As AMP does not support user authored JavaScript. Therefore, sites with necessary dynamic content (like payment gateway for online payments) may hold back implementation of AMP. Rather webmasters of such sites can explore AMP as Progressive Web App (PWA) or can embed AMP inside PWA.

AMP Pages on Google: What will They Look Like?

AMP pages (in Google Search Results) look like as shown here. See the pictures below:

amp-pages-in-mobile-google-search-results-putin1amp-page-in-mobile-browser-putin1

amp-pages-in-mobile-google-search-results-obama2amp-page-in-mobile-browser-obama2

How to Enable Accelerated Mobile Pages in WordPress

Accelerated Mobile Pages or AMP can be enabled by adding amp link meta tag in the html tag <html> of your webpage. Search engines recognize amp meta tag and serve such webpages in AMP format. For example

<html amp>
<body>
Hello
</body> </html>

Because it is not easy task to manually add amp tag in all the pages of our website. Therefore, it’s a good idea to use readily available WordPress plugins to setup Accelerated Mobile Pages in WordPress.

I am elaborating two methods to implement AMP in WordPress. First method involves two plugins. And the second one is single plugin method.

Method 1: Basic AMP implementation with little styling and customization to Enable Accelerated Mobile Pages in WordPress.

1.1 AMP by Automattic

1.2 Glue for Yoast SEO & AMP

Method 2: Enable Accelerated Mobile Pages in WordPress with several features like Ads, Analytics for AMP etc.

2.1 AMP for WP (We are presently using on technumero.com)

Method #1

#1.1 AMP – Accelerated Mobile Pages

AMP plugin for Accelerated Mobile Pages
AMP plugin for Accelerated Mobile Pages

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.

For example, we have Enabled Accelerated Mobile Pages on our website and you can access any post of technumero.com by adding /amp at the end of the URL. i.e. https://technumero.com/display-code-snippets-in-wordpress/amp/

Accelerated-Mobile-Pages-in-Mobile-Browser

Accelerated-Mobile-Pages-in-Desktop-Web-Browser

(Previously we enabled AMP using AMP by Automattic plugin. Now we are using AMP for WP plugin, new screenshots are in Method 2)

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.

#1.2 Glue for Yoast SEO & AMP

How to Integrate AMP by Automattic with Yoast SEO [And Why?]

 Enable Accelerated Mobile Pages in WordPress with Glue for Yoast Seo and AMP
Enable Accelerated Mobile Pages in WordPress with Glue for Yoast Seo and 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.

AMP Menu Enabled by Glue Plugin
AMP Menu Enabled by Glue Plugin

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

post-types-amp-yoast-seo

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

design-amp-yoast-seo

Under Analytics tab you can paste Google Analytics.

analytics-yoast-seo

Method #2

#2.1 AMP for WP

AMP for WP - WordPress Plugin
AMP for WP – WordPress Plugin

This plugin is bundled with some awesome features:

  • Custom logo support for AMP pages.
  • Design: Post Builder, Design Selector (Schemes), Custom CSS.
  • Page builder: allow to create landing pages easily with the builder in AMP pages.
  • Single post settings: Overlay social share buttons, Next-previous links, Meta entry show/hide settings, Related posts etc.
  • Advertisements: Ads support in AMP pages with various ads placement choices.
  • Social: Social Share buttons for more Social Media reach.
  • SEO: Meta description support, adds social and open graph meta tags from Yoast SEO plugin.
  • Analytics: Several analytics services supported including Google Analytics. Or you can use Google Tag Manager.
  • Structured data: Default structured data logo and post image.
  • Contact Form: supported.
  • Notification: can enable/disable notifications.
  • Comments: supported. Including Disqus and Facebook comments.
  • Custom AMP validated HTML: can enter in Header and Footer.
  • Extensions: offer several paid extensions.
Follow these steps to Enable Accelerated Mobile Pages in WordPress:
  1. Install and activate AMP for WP
  2. Go to WordPress Dashboard.
  3. Navigate to plugin’s settings by clicking AMP in WP Dashboard sidebar menu.
  4. Change/modify settings as shown in screenshots. Or you may tune settings as per your requirements.

General: Upload logo for AMP pages, Custom logo Size and  AMP on Page On/Off.

Homepage:

Home Page Settings AMPforWP
Home Page Settings

Page Builder: Page Builder On/Off.

Design: Can tweak design and can launch post builder from here. Once you click to launch Post Builder, it will take to builder page as shown here. 

Design Options
Design Options
AMP Post Builder options
AMP Post Builder options

Single: Settings for single AMP page.

Advertisements: Ads placement at different position in AMP layout.

Menu: Menu  On/Off.  Enabling this adds AMP menu under WordPress Menu. You can select Menu for AMP pages from there.

Social: Social Buttons for Facebook, Twitter, GooglePlus, LinkedIn, WhatsApp, Pinterest, Line, and Email etc. are available.

SEO:

SEO Options
SEO Options

Analytics:

Analytics support for AMP
Analytics support for AMP

 

Structured Data: Under structured data, you can select Default Structured Data Logo, Default Post Image, Default Post Image Width and Height.

Contact Form: Contact form 7 supported.

Notification: Enable/Disable notifications on all AMP page for cookies or anything else.

Comments:

Comments in AMP
Comments in AMP

Translation Panel: Offers to translate AMP Link Anchor Texts to your website language.

Conclusion

You work hard to create useful and informational content. And you definitely want your content to be seen by a large number of people. Also, you work on your site’s SEO to make sure that your content reaches to the larger audience. Consequently a result of hard work, your site starts showing up higher in SERPs (Search Engine Result Pages).

But all of your efforts go in vain if the user jumps off from your site because it took too long to load. This scenario is true for mobile and desktop user. And there a are lot of things that you can do to fix this. AMP is one of those low hanging fruits. As it enables to load your site instantly on mobile devices. Hence Accelerated Mobile Pages make user experience better. Which is awesome for your audience as well as your site ranking.

Because of all these reasons, you must consider to Enable Accelerated Mobile Pages in WordPress website.

I hope this guide helps you to Enable Accelerated Mobile Pages in WordPress. Let me know your experience, what other tricks or plugin you use to setup AMP. If you have a question regarding this, post it via comment section below. I will happy to answer.

Cheers!

Read More:
How to Optimize WordPress Robots.txt file for SEO
Learn How to Enable Keep-Alive to Speed up Your Site
How to Disable Server Signature to Secure your Website
How to Write a Great Blog Post

Photo of author
Shashank Singh
Shashank is a web addict and amateur blogger. His current interests include blogging, SEO, and WordPress. See his social profiles to know him even better.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

5 thoughts on “How to Enable Accelerated Mobile Pages in WordPress – 2017”

  1. Avatar of Shahar

    Hi, great post, did you get to work also with ‘pages’ and ‘media attachments’ or ONLY ‘posts’? Thank you.

    Reply
    • Hey,
      Glad that it was useful for you. As of now AMP works with posts only.
      Thanks for stopping by.

      Reply
  2. Avatar of Hifzur Rahman

    I have implemented Google AMP pages to my WordPress website using your explanation. Awesome blog post.

    Reply
    • Hey Hifzur,

      Glad that I could help.
      Thanks for stoppin’ by.

      Reply
  3. Avatar of SAHID MANDAL

    Thanks for your nice post. I got all answer in your AMP post. Thanks again!

    Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.