Accelerated Mobile Pages — the AMP project was launched by Google in 2016, as an attempt to deal with the slow page load time on the mobile web. AMP makes your web pages load faster, which enhances user experience and brings more traffic to your site. In this article, I am going to explain how you can invoke AMP in WordPress, customize it, and enable Google Analytics for it.
What is AMP?
AMP is an open source project by Google which aims to load pages instantly on the mobile devices. Mobile devices are on the boom and people read lots and lots of web content through it. However, despite all the speedy internet connections the web page loads too slow. So, this is where AMP steps in and loads a web page quickly by stripping down the design of your website.
The three major components of AMP pages are:
- AMP HTML
- AMP JS
- AMP Cache
AMP HTML:
AMP HTML is a form of HTML with some restrictions, custom tags, and properties. The most simplest AMP page looks like this:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
The first two children of the head tag are fixed, and they must be in the same order as shown in the code snippet. However, the other children are also compulsory for a valid AMP HTML to function. It does not support form elements, which means no comments. Also, it does not allow linkage of any external stylesheet except fonts. You can read more about building AMP HTML page here.
AMP JS
AMP JS library is what lies at the core of AMP HTML, and handles tasks like loading, custom tags management, and fast rendering. External resources loading is managed asynchronously, and no third party javascript library is allowed.
AMP Cache
Google AMP Cache is utilized as Content Delivery Network (CDN) to cache your AMP content. It comes with a built-in validation system which performs AML HTML check and guarantees the working of the page.
AMP Pages & SEO
You might have noticed a high voltage (⚡) sign showing up on some of your Google searches on mobile.
It shows that a website is AMP enabled. Such links are opened way too quickly. Another interesting feature about AMP pages is, if they made it to the google news carousel in the search result, you can open one of them and then literally slide across the screen to open another.
Also, AMP may not affect your site rankings directly but indirectly YES!. Because speed has always been an appreciated feature so, a fast web page brings better user experience, lesser bounce rate, and ultimately better site ranking.
How Can I Invoke AMP In My WordPress Website?
You can use this plugin called AMP by Automattic to dynamically generate an AMP-compatible version of your website.
Step#1: Install The Plugin
Download the plugin from plugins repository, install, and enable it. When you enable this plugin, it generates the AMP versions of your posts automatically. If you have pretty permalinks enabled, you can access the AMP versions of your pages by appending /amp/ at the end of your post URL. In case if you don’t have pretty permalinks, you can access the AMP version by adding ?amp=1 at the end of your post URL. The reason why I am saying ‘at the end of your post URL’ is that this plugin does not support WordPress pages right now.
Step#2: Validate AMP Pages
Once you have installed and enabled the AMP plugin, you can validate your pages in Chrome by concatenating #development=1 at the end of your post URL. Open the console from Chrome Developer Tools and refresh the page. You will see a successful confirmation message just like the one I attached below.
Next step is to validate Schema Markup. You can use Google’s Structured Data Testing Tool to verify the valid Schema Markup. Just visit the link and paste the link of AMP version of your post.
You can track your AMP pages in Google Search Console by navigating to Search Appearance > Mobile Accelerated Pages section. Don’t worry if no result appears right now. Google takes some time to identify and crawl the AMP pages.
Customizing The AMP Pages
As I mentioned at the start of the post, AMP strips down your fancy design to a basic design that load instantly. AMP by Automattic allows you to customize basic components like header text color, header background color, and it also allows you to choose from dark and light color scheme. Move to Appearance > AMP to customize these components.
Integration of Google Analytics in AMP Pages
There’s a plugin by Yoast called Glue for Yoast SEO & AMP; it does not only allow you to integrate analytics but also allow more customization than the AMP plugin.
Make sure you have installed SEO by Yoast, and download the plugin from the plugin repository, install it, and activate it. Navigate to SEO > AMP.
Post Types
By default, it opens the ‘Post types’ tab of the plugin.
Here you can select the post types for which you want to enable the post types that will support AMP Pages. Currently, it supports posts and media attachments.
Design
In the design tab, you can change the appearance of header, text, links, and blockquotes. It also allows you to add extra CSS & <head> code, but make sure that the code is valid AMP HTML code. You can also select default image for your posts, in case if AMP fails to fetch an image from your post, or maybe the post doesn’t have one.
Analytics
In this section, you can add your analytics code to track the traffic. You can’t use the code provided in your Analytics Dashboard because AMP HTML does not support it. You can use the following code to track the pageviews on your website:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Replace UA-XXXXX-Y by your analytics tracking code. You can extend this code to track more details of visitors by using this guide by Google.
That’s all for today! I think adding the AMP Pages into your website is the right action to take. It will definitely streamline a great chunk of mobile users to your site. If you any thoughts or questions, share in comments.
TheDevCouple
AHMAD AWAIS
Developer edutainer: NodeCLI.com · VSCode.pro
Ahmad Awais is an award-winning open-source engineer, Head of Developer Relations at RapidAPI, Google Developers Expert Dev Advocate, Node.js Community Committee Outreach Lead, WordPress Core Dev, and ex VP of Engineering at WGA. He has authored various open-source software tools used by millions of developers worldwide, like his Shades of Purple code-theme or projects like the corona-cli.
Say Hi to him on Twitter — @MrAhmadAwais.
MAEDAH BATOOL
Developer Content Manager: Writy.io
Maedah Batool is an official WordPress Marketing Team Representative, a WordPress Core Contributor, Technical Content Manager and Director of Developer Content at WGA. She created a tech-training startup called FinkTanks where she has taught 7,500+ girls how to code with WordPress, Next.js, React, and more. After FinkTanks was acquired she took a role in DevRel as a Technical Content Manager.
Say Hi to her on Twitter — @MaedahBatool.
🙌
SUBSCRIBE TO DEVELOPERS TAKEAWAY!
A Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?
Meet Ameer Dagha the man behind ReviewsPK
Read Article
Ebad Ali – Auto Industry Expert Talks About the Success of Kia and Lucky Motor Corporation
Read Article
Thanks Guys i have implemented it