Google’s search showing accelerated mobile pages rise up on their search and its continuous mention in the world of SEO has made the name quite familiar. It enhances the mobile user experience and drastically improves a webpage’s rankings thereby growing its reach. To the new SEO learner, the terminology can be baffling and not-so-direct, yet is not as difficult as it is perceived to be.
What are Accelerated Mobile Pages?
Accelerated Mobile Pages, more commonly known as AMP, is an easy and accessible framework to create fast-loading mobile web pages and is an initiative by Google. The best part of AMP is that it’s open source and is available to all publishers to help them conveniently improve their website’s performance and speed, thereby improving user experience without sacrificing ad revenue or quality of their content.
High-quality and well-coded websites with fast-loading mobile pages and a well-thought user experience design could always be achieved but was not always attainable due to a lack of resources. These high-intensive optimizations that could once only be performed by experienced developers have today become easy for all without altering primary web mobile experience. This is encouraged heavily by Google as well as other search engines, and is another vital aspect of SEO.
AMP is broken down into three fundamental parts on the basis of its functionality –
1. HTML: An AMP HTML is a subset of HTML with custom tags and properties. Although this mark-up language comes with a few restrictions as well, adapting to AMP HTML is easy for those already familiar with regular HTML.
2. JavaScript: A JavaScript framework, especially designed for mobile, manages resource handling and asynchronous loading. The only drawback some might believe to be is that it does not permit third-party JavaScript.
3. CDN:A CDN stands for Content Delivery Network and its responsibility is to cache AMP-enabled pages and make performance optimizations automatically.
Starting Out with AMP
- The first key aspect to keep in mind is that all creators must keep two versions of each article page – a regular version and an AMP version. There are certain restrictions and rules that come with using AMP, which are enlisted below.
- AMP does not permit third-party JavaScript and consequentially, does not permit lead forms, on-page comments or other elements to be in standard implementation.
- All CSS in AMP must be in-line and less that 50KB, which implies that one may need to rewrite the site template.
- Due to loading-intensiveness of custom fonts, they must be loaded using a special amp-font extension to aid loading.
- Images and gifs must also be handled with restrictions in width and height as they utilize the custom amp-img element, or amp-anim extended component. Videos must be embedded using HTML5 and are called amp-video, but YouTube videos get their own special extended component called amp-youtube. Similarly, there is support for a wide range of other multimedia or links.
For Google and other search engines supporting AMP to detect these, the original version of the article must be modified to add a canonical tag for AMP pages. AMP also requires Schema.org meta data to specify the content type of the page, as per the guidelines of AMP discovery page. Getting the schema right is a mandatory pre-requisite to appear in the demo of the Google Search news carousel.
Google also provides a demonstration of an AMP feature in SERP at g.co/amp demo on a mobile phone. When searching for something, a carousel toward the top with AMP articles is evidently observable. Clicking on any one of these will also give an insight into the reading experiences and note differences.
Another great benefit from Google’s Accelerated Mobile Pages initiative is its analytics. A philosophy of “measure once, report to many” was implemented to AMP keeping in mind how multiple analytics tracking can slow down a sit. AMP analytics can be enabled in the following ways:
1. Amp-Pixel Element: Used to count page views via a GET request, this simple tag is similar to the functioning of a typical tracking pixel. A number of variable can be passed through it, for e.g., DOCUMENT_REFERRER and Title.
2. Amp-Analytics Extended Component: Used to implement analytics on a site, allowing greater level of configuration of analytics interactions, this component is slightly more advanced than amp-pixel.
Anyone who wishes not to, or finds it troubling to use Google analytics also have other options. Adding the necessary JavaScript library in the <head> and then configuring it via JSON markup in the <body> section of the page. This is popularly referred to as amp-analytics.
Monetizing AMP
Many a times, improving website load time is directly proportional to lower number of ads, adding as an incentive to ad blockers. As mentioned earlier, Google had claimed that the very purpose and goal of Accelerated Mobile Pages Project is to ensure effective ad monetization whilst improving user experience at the same time.
There are now numerous amp-ad extended component with ever growing compatibility and is being used by some of the most popular ad networks such as Amazon A9, AdReacter, Google AdSense, AOL AdTech, Taboola, and many more.
In case someone’s monetization methods are more complex, that is, they involve utilizing paywalls or subscriptions, there are options to explore as well such as “AMP Access” extension or one can visit the documentation available for implementing it within AMP by Google.
AMP and WordPress
WordPress today, is one of the easiest and most-popular website builders on the internet with an array of features available. As a consequence of the same, finding tutorials, plugins and much more when working with a WordPress website. Similarly, with AMP and WordPress, an official plugin is being developed and frequently being updated on GitHub. A Step-by-Step Process of accessing such a plugin is mentioned below:
1. Installing: The official WordPress Plugin can be downloaded from amp-wpGithub page (The download ZIP button button) This plugin is installed the same way all other plugins are, the only difference being that post-installation, appending “ /amp/ “ to an article page is needed. In case of not owning decent permalinks, one can append to “ ?amp=1 “
2. Validation: Other than just adding an AMP plugin, it is just as essential to allow Google Search Console should pick up on the AMP version of articles via the rel=“amphtml” tag appended by the plugin. The issues faced involve not detecting changes quickly and may take days to show up, but allows easy validation of articles in bulk. Using a combination of the Search Console and Chrome validation process may ease the problems faced.
3. Schema MarkUp: A valid schema markup on AMP pages is another important aspect which can be tested by Google’s Structured Data Testing Tool. In case WordPress fails to display a publisher’s logo, the following modifications may be made:
Edit the class-amp-post-template.php file, either via FTP or within your WordPress Dashboard (go to Plugins > Editor and then select “AMP”) and change:
if ( $site_icon_url ) {
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => $site_icon_url,
‘height’ => self::SITE_ICON_SIZE,
‘width’ => self::SITE_ICON_SIZE,
);
}
to:
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => ‘http://domain.com/wp-content/uploads/logo-60.png’,
‘height’ => 60,
‘width’ => 170,
);
4. Google Analytics: In order to enable AMP WordPress Plugin with Google Analytics, an amp-post-template-actions.php needs to be edited. This can be done either via FTP or by changing the code withing the WordPress Dashboard. One thing to ensure is to change the UA-XXXXX-Y to represent the website’s Google Analytics property ID, after which the AMP pages ned to be re-validated and a basic AMP must be setup with tracking enabled for the subsequent WordPress website.
As complicated as it may seem, following a step by step process and looking into the depths of each, one at a time, AMP is fairly easy to execute, even for non-WordPress websites. AMP is the future of SEO, and every publishes must start thinking, learning and implementing Accelerated Mobile Pages in their SEO tactics.