Are you aware of the AMP buzz in the internet fraternity? Well, of course, you do, and this is the reason for your visit on this page. We can summarize the concept of AMP in a couple of sentences. The selected part of the screenshot depicts an AMP powered web page.
Accelerated Mobile Pages are optimized web pages that open at a blazing fast speed, without any delay. The constituents of these web pages are HTML codes and JS scripts that render functionality to the AMP web page.
The AMP Project is the driving force behind the development of mobile-friendly websites and blogs. This is an open source project that aims at promoting AMP concept amongst developers. Currently, more than 1.5 billion AMP friendly pages are already present on the web.
If you’re a WordPress website owner, here is the list of free AMP plugins. You can choose any of the plugin to install on your site.
To enable AMP feature on your website in just 60 minutes, follow the stepwise procedure drafted here. As Google prefers AMP friendly web pages that perform better than the rest, you can exploit the opportunity of ranking above your competitors.
Build AMP friendly Website in 60 Minutes
Step 1: Install and Configure AMP Plugin
The easiest way to enable AMP-friendly websites and blogs is using a plugin that can transform a website into AMP-friendly website. When we talk about AMP, we mean the addition of optimized web pages for mobile screens. The other components of your websites, such as existing blog posts and web pages, will remain the same.
There are two prominent AMP plugins available for accomplishing the job:
- AMP for WP – Accelerated Mobile Pages by Ahmed & Mohammed Kaludi
- AMP for WordPress by Automattic
Here, we will use AMP for WordPress plugin for creating AMP-friendly pages. As the plugin is made by the developers of WordPress, we can rely on it for efficient functioning.
To install the plugin, follow the outlined steps:
- Log in your WordPress account using credentials
- Go to Plugins > Add New
- Search for AMP for WordPress, and click on Install Now
- After successful installation of the plugin, click on Activate
The preinstalled settings will enable AMP implementation on your website’s posts. You can alter the settings to implement AMP for pages and other elements as well. However, it is recommended confining AMP to posts and pages only.
Next, go to Appearance > AMP for optimizing the appearance of AMP-friendly posts and pages. The plugin allows you to adjust two parameters – Header Text Color and Header Background & Link Color. Check out the live preview and confirm the settings.
To access AMP content, you just need to attach /amp at the end of the URL of a post or a page. For example:
Normal URL – https://www.xyz.com/wordpress-seo
AMP URL – https://www.xyz.com/wordpress-seo/amp/
If you witness 404 error for AMP URLs, just go the Settings > Permalinks. Simply click on Save Changes to refresh the permalinks structure.
Step 2: Install and Configure Glue for Yoast SEO & AMP
You have successfully enabled AMP pages on your website. Now, how do you plan to monitor the performance of AMP? Yoast SEO allows tracking and analysis by Google Analytics, but this is not applicable to AMP.
Thus, you have to configure Yoast SEO and Google Analytics with Glue for Yoast SEO & AMP. The plugin will enable tracking of AMP by Google Analytics and Yoast SEO. This will be beneficial in analyzing the performance of your posts and pages. Further, you can optimize the styling options for AMP web pages using Glue for Yoast & AMP.
After successful plugin activation, go to SEO > AMP > Analytics. Here, paste the Google Analytics tracking code and click on Save Changes. You are done!
Alternately, you can adopt the manual method as well. Click on Appearance > Editor > Functions.php. Sometimes, it is not available via WordPress dashboard. In that case, you can access it via FTP client by logging in using cPanel.
Paste the following code in the Functions.php file, and remember, replace XX-XXXXXXX-XX with Google Analytics tracking code. Save the settings to enable changes.
Step 3: Test AMP Settings Implementation
You have accomplished two major steps – activation of AMP and Google Analytics integration. These two aspects are sufficient for enabling AMP on your WordPress website. But you should not be convinced until you have verified the functioning of AMP-enabled web pages.
After you have added AMP with the assistance of AMP Plugin, the URLs must be crawled by search engines. If we talk about Google Search Console, it will take some time, even few days, to track the AMP-friendly URLs. So if you don’t witness immediate results, don’t panic.
The first method of verification includes searching for the AMP URL on a mobile web browser. Remember, AMP URLs work on mobile screen. Thus, check out the web page functioning on mobile devices, and not on desktops.
Type the regular URL, and just add /amp at the end of the URL to access AMP-enabled web page. For example,
URL – https://www.xyz.com/my-story/
AMP URL – https://www.xyz.com/my-story/amp/
The second consideration is verification of schema markup of AMP page. Schema markup represents structured data format that assists search engine crawlers to examine the web page. When an AMP web page is well-structured, the search engines will showcase it an effective manner.
For checking structured data, you can utilize Google Structured Data Testing Tool. It will display any errors or warnings, if any, after a complete analysis of web page code.
Conclusion
While AMP-friendly websites are optimized for superior performance and speeds, there are certain aspects that get compromised. As AMP pages use trimmed HTML code and JS scripts, most of the dynamic attributes like opt-in forms, social sharing buttons, and other features are omitted from the page.
However, you can reinsert these features. But you have to use plugins or alter the code to accomplish the job. Until now, AMP is not an official ranking factor for search engines. But if you look at the search engine results, AMP-powered websites occupy the top slots. Thus, if you are in favor of AMP, you will be one step ahead of your competitors.
About the Author: Anil Parmar is the co-founder of Glorywebs, a wordpress development company that help clients with services like mobile apps, IoT, AngularJS, NodeJS and more. Mobile apps, themes and plugins we develop have a common # 1 goal: Keep it as simple as possible for technical as well as non-tech geeks. Find him on Twitter @abparmar99 & say Hi!
