Skip to main content

Google AMP project

17 Feb 2016

The last 1or 2 years I have been spending a lot of time experimenting with ways to deliver content as clear an pure as possible to web/app users. In my previous job I have worked on lots of different ways to distribute journalism longreads to mobile users in pure and content focused ways. When I first read about Google's AMP (Accelerated Mobile Pages) project somewhere next year I was immediately intrigued because this project also focusses on delivering content in a clean and fast way to (mobile) users.

But what is this AMP Project, what can you do with it and why would you use it. As stated before the main focus of the AMP project is to deliver content quickly to (especially) mobile users. To achieve this, Google developed a framework for rendering HTML in a much more efficient way. This framework basically sets rules for building a regular HTML page and sets some restrictions for the HTML and CSS which is allowed on the page and introduces more efficient custom elements for some HTML elements (for example <amp-img> is used instead of <img>. Custom Javascript is almost completely disallowed as are (for now) form input fields. Basically Google trys's to remove most of the 'clutter' involved in regular HTML pages to allow the page, and especially the page portion above the fold, to be rendered as quickly as possible. Because of the rules and restrictions involved in building AMP pages, the use of them is mostly constricted to pure content (for example news articles) pages. Those kind of content pages happen to be the type of page which is most often shared on social media networks (Facebook, Twitter, LinkedIn, etc.). Google is working with Twitter and LinkedIn to use AMP pages for sharing content. Twitter and LinkedIn should look for the existence of an AMP version of a shared page and show the AMP version to persons viewing the shared page. This should mean a significant performance increase in opening a shared page (if a AMP version exists).

Code

En now for some code. As already stated, an AMP page is basically an regular HTML page with some extra rules and restrictions added. The minimal rules which make an HTML page a valid AMP page are the following:

  • <!doctype html>.
  • <html ⚡> tag (<html amp> could also be used as an alternative).
  • <head> en <body> tags (these are optional in regular HTML).
  • <link rel="canonical" href="{url}" /> where {url} point to a regular HTML version of the AMP page or if non exists to the AMP page its self
  • <meta charset="utf-8"> as FIRST element of <head>.
  • <meta name="viewport" content="width=device-width,minimum-scale=1"> preferably also include initial-scale=1.
  • <script async src="https://cdn.ampproject.org/v0.js"></script>.
  • The AMP boilerpolate code (see code example below) should be placed in the <head>.
AMP boilerplate
<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>

Adding HTML

Most regular HTML elements can be uses in an AMP page. Some are replaced by specific AMP version, the most notable of those are:

  • Img : Replaced by amp-img, height and width are required
  • Video : Replaced by amp-video
  • Audio : Replaced by amp-audio
  • Iframe : Replaced by amp-iframe 

Some HTML elements are disallowed entirely like:

  • Object
  • Embed
  • Input
  • Script : Only executable scripts are forbidden, other script types (like application/ld-json) are allowed
Responsive image
<amp-img src="responsive.jpg" width="640" height="480" layout="responsive"></amp-img>
Fixed size image
<amp-img id="img1" src="fixed.jpg" width="264" height="96"></amp-img>

Adding styling

All custom CSS styles should be placed in a single <style amp-custom> element within the <head> element of the AMP page, inline styles and linked stylesheets are forbidden. Some style rules like !important are also forbidden. Because all CSS is placed in the AMP page, the page is loaded more quickly. But try to to keep the size of the CSS styles to a minimum. According to Google's specifications the totaal size of the CSS rules should not exceed 50000 bytes zijn (so a little under 50kb).

Validating your page

Because you have to have a lot of rules to take into account when building an AMP page, you should always validate your page against these rules before going live. To validate your page you can open it in your browser and add #development=1 after your URL. In the Console you can now see if your AMP page doesn’t violate any of the AMP rules and if not which rules are violated.

Making your page discoverable

If you simple replace a regular HTML page with a AMP version there is little or nothing you have to do. The one thing I do advise is that you add structured data to your page to let Google know what type of content your page contains (news article, blog, etc.). Google uses this data to display your page in different ways on their Result pages. For a news article the structured data you should add to your AMP page could look something like this:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "This is a news article title",
    "datePublished": "2016-02-17T12:02:41Z",
    "image": [
      "news-image.jpg"
    ]
  }
</script>

If you add an AMP page as an alternative to a regular HTML page you should add a link to your AMP page to your HTML page and also add an link in your AMP page which points to the HTML version of the page. This way Google knows where to find both the AMP and the HTML version of the page. The links in both pages should be added as meta links in the Head element of both AMP and HTML pages.

Link to AMP page (place in Head element of HTML page)
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Link to HTML page (place in Head element of AMP page)
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Conclusion

The AMP project seems very promising, faster pages, better user experience, optimized for mobile, but it is yet to be seen how much support it will gain. Currently most sites which have implemented AMP are mainly publishers. AMP could be used for almost every page which just displays content and has little or no user interaction (like forms). If you have a lot of (news)articles or blog postings on your site I would certainly advise to experiment with AMP, just add a AMP version for a few of your pages and see if this has any impact on the page views or conversion.

Google has started rolling out an update to add an AMP tag/logo in their Results pages for AMP pages. For now these pages don't rank any higher on the Results page but once users get accustomed to the AMP tag/logo they might click sooner on an AMP result.

The fact that Twitter and LinkedIn both support the AMP project and large news sites like BBC, ABC and Wall Street Journal have implemented AMP shows that enough large players believe in it. Whether users will is of course to be seen. For now, just experiment with it.