Emarketeers
Talk to us
Jonathan Saipe

Google’s Accelerated Mobile Pages (AMP) Explained

18 August 2016, Jonathan Saipe


What is AMP?

AMP (accelerated mobile pages) is an open source initiative aiming to improve the performance of the mobile web and user experience.

Reading content on mobile devices can still be a slow frustrating experience leading to higher bounce rates and poor UX. The aim of AMP is to optimise mobile content so that its load times are dramatically reduced on mobile devices.

But AMP isn’t only about speed. It will also encourage enhanced distribution, enabling publishers to take advantage of the open web’s potential for their content to appear across platforms and apps efficiently.

Spend a few minutes watching this video with Paul Bakaus explaining AMP.

When AMP was launched, Google opened it up to various publishers and technology companies. The list is growing steadily.

What does AMP look like to consumers?

AMP pages can be easily spotted on mobile devices. They can be viewed in a horizontally scrolling carousel with AMP content displayed beneath the image.

AMP-on-mobile-phone-1

When a user clicks on an AMP result, the user can scroll through other AMP content, or click the top left arrow to return to Google search results.

AMP-on-mobile-phone-2

It’s worth noting that Google recently announced extended AMP support across the entire search results page, not just the top stories section. So watch this space!

What content types are best suited to AMP?

AMP typically lends itself to published content such as news stories, articles and blogs.

It’s important to understand that AMPs are not intended to be a separate mobile site. Responsive design is still very much the focus for most digital teams. The aim is not to redirect users to AMPs. And furthermore, not every page should have an AMP alternative. AMP is best suited to single article content.

How do I implement AMP?

AMP HTML is basically HTML extended with custom AMP properties. An example AMP HTML file looks like this:


<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Example Accelerated Mobile Page HTML</body>
    <h1>Headline goes here</h1>
    <p>
      Text goes here
      <amp-img src=exaple.jpg width=250 height=250></amp-img>
    </p>
    <amp-ad width=350 height=350
        type="a9"
        data-aax_size="350x350"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
</html>

Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags. These elements are referred to as AMP HTML components.

Once AMP pages are created, Google fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JavaScript files, and images load from the same origin, for maximum efficiency.

See a full guide to AMP HTML and its JavaScript library.

How to I validate my AMP pages?

There are a few ways to validate your AMP code, as follows:

  • Using a web interface
  • By appending #development=1 to your AMP URL and using Chrome’s developer tools to check for errors
  • Using a command line tool

If your code doesn’t validate, it won’t get discovered and distributed by third party websites and won’t appear in Google’s AMP Cache.

Are there any disadvantages to AMP?

One of the biggest current drawbacks is the way AMP content is accessed. Users currently access content via a carousel on Google SERPs. After clicking on an AMP result, a static bar at the top of the screen constantly reminds users that they can return to search results, or swipe to the next Google AMP article on the topic.

Effectively users are always in Google’s domain (although AMP content can be measured via analytics). There is therefore a chance visitors will explore other AMP results, rather than always engaging beyond with your own AMP content. The video below demonstrates how users generally interact with AMP content.

Source: Google Official Blog

Also, some content types including images that need to be enlarged (e.g. by pinching or zooming), standalone videos, pop-ups or sidebars e.g. for sign-ups, are not ideally used in AMPs. Also, if you sell advertising space on your website, search visits through Google AMP won’t count for impressions.

If you have the above content, work hard on your responsive content strategy to improve mobile SEO and UX, as AMPs may not be the solution (at least not currently).

How can I access analytics for AMP content?

As a Google initiative, AMPs have built-in support with Google Analytics but also with other analytics vendors (the full list can be seen here).

For Google Analytics users, AMP includes an amp-analytics element that allows you to track user interactions with AMP pages.

See the Google Developers support documentation, which will demonstrate how to set up page tracking, event tracking, and measure social interactions.

Does it improve my Google rank?

The burning question for many! Google hasn’t published any information to suggest that AMPs will improve your SEO performance. Having said that, AMP content currently appears at the top of Google search results displaying the lightning AMP logo – so this may well encourage more clicks and traffic.

So, although it hasn’t been explicitly stated that implementing AMP will improve your SEO, it’s well known that page speed is a ranking signal and can impact your SEO performance.

It should also be noted that Google’s VP of Engineering, David Besbris, explained that when there are two identical pages, one AMP and one mobile-friendly, Google will serve the AMP page on mobile devices.

How can I get support for my AMP implementation?

Other than the validation options described earlier, take a look at GitHub which has example source code and documentation.

With AMP and Facebook Instant Articles very much on the radar of digital publishers, this is certainly one to add to your watch list!

See more articles from Mobile Marketing, SEO