Research by Google suggests that the mobile revolution has not only fuelled an on-demand mindset that all business owners must adapt to, it has also gone a long way to encouraging impatience:
- 29% of smartphone users will immediately switch to another website or another app if yours is too slow
- 70% of smartphone users switching from one site to another do so because they don’t want to wait for slow pages to load
- 67% of users will leave if your mobile site asks too many questions of them or puts too many steps in the way of information access (source: https://www.thinkwithgoogle.com/articles/speed-is-key-optimize-your-mobile-experience.html)
In a blog post published earlier this year, Google’s Vice President of Engineering, Search, David Besbris said users would abandon a website after three seconds if the content didn’t load quickly enough. In the same post, he lamented the speed of the mobile web, citing the launch of the Accelerated Mobile Pages project (AMP for short) as a way to address this lag.
More recently, Google took its emphasis on mobile a stage further by confirming that a separate mobile search index will be created, usurping the traditional desktop index as the primary. In light of this and the recent AMP one year anniversary, let’s look at how to integrate AMP into your content – and lay out exactly why you should take the time to do so.
First things first, what is AMP?
If you missed our original post on understanding AMP, you can find it here. In short, it is a modified version of HTML created specifically for mobile web pages. This pared back version of HTML code is called AMP HTML and is designed to help mobile web pages speed up by stripping back some of the surplus code and features, allowing for a faster mobile browsing experience.
While it was initiated by Google, AMP is an open source project, which means that anyone can modify and contribute to the code. This community approach should see the format developing more quickly than would otherwise be the case and means as a publisher, you can edit the code to better fit your needs.
There are three parts to the AMP code:
- AMP HTM – the code itself
- AMP JS – provides fast rendering of AMP pages
- Google AMP Cache – serves the AMP pages
Who’s using it?
Lots of sites are now using AMP with their content. Google says there are around 700,000 websites publishing AMP content and around six million AMP pages live. Many of these websites will be using AMP because it speeds up page load speeds four-fold – meaning fewer disappointed and departing visitors. There’s also been priority given to AMP content in Google’s search results pages, giving greater visibility for publishers using AMP when making their content live.
Why bother?
As well as improving page load speed for mobile visitors, AMP can make your overall mobile web presence more effective and efficient. With Google’s new mobile search index imminent, having AMP content in place can help you ensure you don’t miss out on rankings when the mobile version becomes the default Google index. According to the search engine, you could also be looking at a 73% increase in visits from mobile search.
Getting started on Wordpress
If you have a WordPress site, you’ll find it easier than most to get your AMP project up and running. The platform has a free plug-in which you need to download and activate. Once that’s done, the plug-in will take care of creating AMP versions of all of your content.
Other ways to get started
For non-Wordpress users, a few more steps are required (unless your own CMS has a similar AMP plug-in available).
Step 1: To start with, you’ll need to create a basic AMP page. The AMP project provides a basic template which you can just copy and paste:
<!doctype html><html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <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> </head> <body> <h1>Welcome to the mobile web</h1> </body></html>
Step 2: You’ll likely need to tweak some parts of the basic template to add your actual content. For example, you’ll need to add specific AMP tags for video and images, rather than using the standard image and video tags you’ll be familiar with if you have a basic HTML knowledge. The AMP tag is very similar – it’s amp-img (compared with the standard img tag used in traditional HTML coding).
<amp-img src="fixed.jpg" width="264" height="96"></amp-img>
Step three: You can add video using amp-video or animated images using amp-anim. You can find all of the available AMP supported components here, including elements for inserting GIFs, SoundCloud audio, video and YouTube to modify your page content and appearance.
Step four: Now you have an AMP page of content, you need to ensure that it can be discovered. Some of your AMP pages will likely have a traditional page equivalent. To make the AMP page discoverable, so Google knows that an AMP version is available to serve to mobile users, you need to link the standard page and the AMP page together. You do this in two parts:
Part 1 – copy the following code into the standard page’s HTML
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Part 2 - Copy the following code onto the AMP version of the page:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
Step five: Add the Schema.Org markup. This makes your content eligible for inclusion in Google Search’s news carousel and is used by other search engines to identify AMP content.
The AMP project provides this template which can be modified to suit each piece of AMP content you create:
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html", "headline": "Lorem Ipsum", "datePublished": "1907-05-05T12:02:41Z", "dateModified": "1907-05-05T12:02:41Z", "description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?", "author": { "@type": "Person", "name": "Jordan M Adler" }, "publisher": { "@type": "Organization", "name": "Google", "logo": { "@type": "ImageObject", "url": "http://cdn.ampproject.org/logo.jpg", "width": 600, "height": 60 } }, "image": { "@type": "ImageObject", "url": "http://cdn.ampproject.org/leader.jpg", "height": 2000, "width": 800 } }</script>
Step six: The final step is to validate your AMP code. You can do this in a few different ways.
- Use https://validator.ampproject.org
- Use the AMP Browser Extension for Chrome: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc
- Use the Browser Developer Console which comes with the AMP JS library.
A full breakdown of how to validate your AMP code can be found here.