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.
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.
- A Unique way to Auto Add Dynamic Year in WordPress Post Titles
- How & Why Remove Google Fonts from WordPress Theme
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 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.
- A Complete Guide to Learn how to Create & Use Child Theme in WordPress
- How to Setup Yoast SEO WordPress Plugin with Most Optimized Settings
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 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.
AMP Pages on Google: What will They Look Like?
AMP pages (in Google Search Results) look like as shown here. See the pictures below:
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)
#1.1 AMP – 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:
- Go to Add New plugin in WP dashboard.
- Search for AMP in plugin search bar.
- Install and activate plugin called AMP authored by Automattic.
- You are done, your site will start supporting AMP. All the posts of your site will have AMP version.
- You can access your AMP webpages by adding
/ampat 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/
(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?]
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.
- How to Show or Hide Widgets on Specific Pages in WordPress
- Cache Gravatar Images in WordPress for WP Optimization
#2.1 AMP for WP
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:
- Install and activate AMP for WP
- Go to WordPress Dashboard.
- Navigate to plugin’s settings by clicking AMP in WP Dashboard sidebar menu.
- 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.
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.
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.
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.
Translation Panel: Offers to translate AMP Link Anchor Texts to your website language.
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.