21 October 2016 | Asad Imam

How to AMPlify your SEO

We live in a mobile-first world and your target customers expect mobile browsing speed to match the fast pace of their lives. It is therefore hardly surprising that 40% of  people bounce off websites that haven’t been loaded in 3 seconds or less.

With this in mind and to allow webmasters to help load their content faster, Google and Twitter joined forces to develop an open source initiative called  Accelerated Mobile Pages, or AMP for short. The key aim was to help website owners to have a coding standard that will help them render pages on mobile devices significantly faster than a bog-standard responsive page.

Google AMP

source: Marketing Land

How does AMP work?

AMP is all about speed  and this is achieved through a trimmed down version of the source code called AMP HTML. Essentially, AMP is a simplified and lightweight form of HTML ( sometimes called diet HTML), designed to load on mobile devices with minimum server requests. To minimise the server requests, the AMP prohibits use of Javascripts completely. In addition, you also need a streamlined version of your CSS files.

When it comes to rendering a page, AMP HTML also uses techniques that prioritise the loading of certain page elements. For example, images load only when they get into view. Everything is being excessively cached in order for Google to host all of your website’s content for fast rendering.

Before diving into AMP, it is important to remember that AMP HTML is not a replacement of your regular HTML code. It only serves as an alternative for the search engine to consider.

Google AMP

source: KeyCDN.com

How can you AMPlify your website?

There are mainly two ways of enabling AMP. Either by hard-coding AMP HTML versions of your pages or you can use plugins for WordPress managed websites.

When hard-coding, below are the steps to consider,

  1. Create AMP HTML versions of the pages of the pages you would like Google to consider
  2. Reference the AMP version with a rel= “amphtml” link. This link needs to point to the hosted AMP page. Whatever appears in Google’s search results is a cached version hosted by Google. Both of these versions would contain a rel=canonical back to the original in their code.
  3. Ensure the AMP versions of your website pages have been validated. Be very strict about how you structure your AMP HTML code, as your pages will turn out invalid if don’t follow the strict HTML standard. You can use Google’s Search Console in order to check your site’s validation status.

Alternatively, if your website is using a Content Management System (CMS) such as WordPress, then getting started with AMP is simply managed through installing plugins.

 

google-is-finally-addressing-the-slow-loading-page-with-its-new-project-called-accelerated-mobile-pages

 

Don’t forget about Analytics

Tracking how your AMPs are doing in terms of attracting new visitors and whether they are providing the desired user experience, it is crucial to set-up analytics for it. There are two ways of enabling Analytics for AMP.

  1. Add a tag called the AMP-Pixel Element, in your code that lets you track page views.
  2. Adding the Amp-Analytics Extended Component. This will require you to add a relevant JavaScript library in your code and follow the configurations.

The best practice would be to get the AMP-analytics component. However, you need to know that this needs to be manually implemented in the code as a custom element.

Since Google announced that it is dividing its index for desktop and mobile searches, AMP adaptation will become a norm in the industry. The AMP project began with the aim to help the news publishers, however, very soon websites in the entertainment, travelling, food and e-commerce industry will begin rolling out AMP versions of their pages, meaning competition will rise sharply. Therefore, it is only sensible to bring forward the plans to AMPlify your content if these have been put on the back burner.  If you don’t you might soon see your competitors storming ahead in mobile search rankings.

Asad Imam

Asad Imam

Search Director - Responsible for directing SEO strategy and implementation to achieve industry-beating results for all agency clients.