The Importance of Accelerated Mobile Pages (AMP)
As individuals, we’re more mobile than ever. 76% of British adults now own a smartphone and many of us are preoccupied by our electronic devices, so much so that over half of us check our phones within 5 minutes of waking! And despite this, our mobile experiences when browsing the web range from adequate to simply unusable. Too often brands fail to provide something that is remotely function-able on mobile devices and experiences are inconsistent. And despite this, our mobile experiences when browsing the web range from adequate to simply unusable. Too often brands fail to provide something that is remotely function-able on mobile devices and experiences are inconsistent.
Improved Mobile Experiences
Thankfully, in the last year or so a range of exciting projects have been implemented aimed at providing a faster and as yet, unrivalled mobile experience. It started with Facebook in May 2015 with their Instant Articles for publishers, closely followed by Apple News – essentially a super-fast, stripped-back webpage hosted by the platforms that are optimised for mobile. Google were slightly late to the game and in February this year they launched Accelerated Mobile Pages (AMP) – an open source project developed in conjunction with technology companies and publishers across the world.
What are Accelerated Mobile Pages (AMP)?
Simply put AMP are a ‘light’ version of a webpage which provides an optimal mobile experience. As with similar projects, speed is key. Research shows that if a page loads just one second slower, there is a massive 56% increase in bounce rate! As with Instant Articles and Apple News, AMP has been embraced by publishers. Search for something topical into Google on your mobile and you may have noticed a change in how Google News displays the top stories. Instead of the standard 3 stories that you used to be presented with, you can now swipe through multiple news stories, all of which are annotated AMP. Once you click on an AMP link, you’ll typically be taken to a Google hosted version of the page, a cached version of the page. Another thing you’ll notice is that you can swipe from one news article to the next.
Technical elements of an Accelerated Mobile Page
AMP are designed to be fast. To that end there are certain standards you must follow and things that you can’t use. AMP are built using AMP HTML - an extended form of HTML with custom AMP properties. Most of CSS is allowed but no custom JavaScript; pages must use an off-the-shelf JavaScript called AMP JS. In most cases you’ll want to have a non-AMP and an AMP version of the same page. Your hosted AMP page is designated with a “/amp” URL (https://www.example.com/page-name/amp). This same page is then likely to be hosted by Google. Both your own hosted and Google hosted pages will contain a rel=canonical tag back to the non-AMP page. In turn, the non-AMP page should have a rel=amphtml tag in the <head> of your HTML document, pointing to the AMP page. This allows Google to know there is an AMP version of the page, and vice-versa.
Google Analytics for AMP
Google Analytics for AMP is currently more limited than standard Analytics. However, as the project advances, so too will the capabilities of Analytics for AMP. To set it up requires the AMP analytics tag on your mobile pages. More information can be found on the google blog developers.
SEO Benefits
Firstly, for publishers or any blog outlets that are in Google News, setting up AMP is essential, otherwise you’re missing out on all that real estate in the Google News section of the organic listings. For everyone else, it’s almost certainly something you should be considering. We already know that mobile friendliness is a ranking factor in Google mobile search. With Google at the forefront of this project, it’s would be foolish to not see where the search giant might go with this in the future. On top of that faster page load speed is likely to massively decrease bounce rate and increase engagement with your content. That in itself makes AMP a worthwhile investment.
Further Reading
For more information including a guide on setting up a basic AMP page, check out the official Accelerate Mobile Pages Project website.