Diving Into Google Accelerated Mobile Pages (AMP)

accelerated mobile pages

The mobile web is constantly evolving and Google is always experimenting with new ways to speed up content delivery and performance across all devices. The new Accelerated Mobile Pages (AMP) project from Google is aiming to do just that by allowing websites to build light-weight web pages using their open source framework, built on AMP HTML. Today we will dive into how to use Google AMP, show you examples of it in practice, and also discuss some of the pros and cons of this new project.

What is the Google Accelerated Mobile Pages Project?

The open source initiative known as the Google Accelerated Mobile Pages Project was originally announced on October 7, 2015 by the Google web team. It officially started showing up in SERPs on February 24, 2016. The inspiration for the project was that Google wants the same code to work across multiple platforms and devices, no matter what type of phone, tablet or mobile device people are using and that it load instantly.

40% of people will wait no more than 3 seconds before abandoning a website. – think with Google

Google Accelerated Mobile pages (AMP) is available for everyone to use and the HTML source code can be found on their GitHub page. To put is simply, AMP is basically a stripped down HTML page which restricts certain HTML, CSS, and Javascript. Some interesting requirements to make a note of:

  • Allows only asynchronous scripts
  • All CSS must be inlined
  • Styles are limited to 50KB
  • External resources like images must state their size in HTML
  • All Javascript must be out of critical path
  • No user written Javascript is allowed, only AMP supported
  • Fonts must be loaded with a link tag or a CSS @font-face rule

Remind of you Google PageSpeed Insights guidelines? That is because Google is basically taking all of the recommendations they have told us over the past years and are enforcing them with AMP. Which is a good thing, for the most part, as it should stop some bad mobile performance habits floating around the web.

How Do Accelerated Mobile Pages Work?

Google has published a great tutorial on how to create your first AMP page. We will go through a quick rundown on what is involved and what you need to know. It is important to know how AMP works in SERPs. In most cases, Google will only serve AMP pages to mobile devices. However, Google does not penalize users who have AMP-only pages (i.e. no additional HTML desktop version) such as the ampproject itself. Google has a preview up but you can emulate it from your desktop using Chrome DevTools. For example, we toggled device mode over to an Apple iPhone 6 and did a search for “Mars” which is one the AMP promos running right now. You can see below a little AMP icon that appears in the carousel, which means an AMP HTML page is being served.

So if you are running AMP you might be lucky enough to grab one of those carousel spots on mobile SERPs. And below you can see this is an AMP HTML page.

Below is an example of what you’re starting AMP page might look like from an HTML perspective.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>My AMP Page</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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to my AMP Page</h1>
  </body>
</html>

Depending on the platform the AMP page is on the URL might vary slightly, but typically the URL will have /?amp=1 or /amp appended to it.

Some also use .amp as the phys.org did in the Mars example.

According to Google’s documentation AMP HTML documents must follow the following syntax.

  • Start with the doctype <!doctype html>.
  • Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
  • Contain <head> and <body> tags (They are optional in HTML).
  • Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Contain a <meta charset="utf-8"> tag as the first child of their head tag.
  • Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1.
  • Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).
  • Contain the following in their <head> tag:
    <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>

Images

In AMP HTML the <img> tag is replaced with <amp-image>. Here is an example.

<amp-img src="amp-image.jpg" alt="AMP Image" height="200" width="500"></amp-img>

CSS

Remember as we mentioned earlier your CSS must all be inline within your HTML doc using the following tag <style amp-custom>.

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: red;
  }
</style>

Validating AMP

Every AMP page must be validated to ensure there are no errors. There is an easy way to validate your AMP HTML page with Google Chrome DevTools.

  1. Open up your AMP page and add #development=1 to the end of URL.
  2. Launch the Console, refresh the page and you will see if your AMP validation is successful. Learn more about validation.
    validating accelerated mobile pages AMP

SEO Your AMP Pages

By having an AMP version of your post or page you don’t want to get dinged for duplicate content, so Google requires that you use the canonical tag when linking to pages.

Example on your original page:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Example on your AMP page:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Google will automatically detect AMP pages on your site as your original page is served with a header tag directing Googlebot to your AMP page.

Schema Required for Carousel

If you are wanting to achieve that carousel shown in the earlier preview you are required to use Schema markup. Here is an example below.

<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>

AMP in the Wild

There are a number of larger companies and publishers already using AMP HTML in production, such as The Next Web, The Verge, Washington Post, Entrepreneur, The New York Post, and many more. Below is an example of what the AMP page looks like on a recent article posted on The Next Web. The AMP page is accessible via the ?amp=1 string added onto the web page.

http://thenextweb.com/dd/2016/02/29/this-clever-design-firm-is-open-sourcing-its-rejected-logos-so-startups-can-use-them-for-free/?amp=1

A big problem today is that people don’t optimize the responsive or mobile versions of their website’s enough. Here is a comparison of the desktop version and the AMP version of that post above.

Desktop Version of The Next Web

As you can see the desktop version of The Next Web post is quite heavy at over 5MB and 275 requests. That is a lot of content. Most of the weight and requests are actually coming from third-party advertising networks.

AMP Version of The Next Web

The AMP version of that same post is only 380KB and only generates 13 requests. That is quite a difference and should have no trouble loading fast on a mobile device.

It is important to note though that since Google AMP is new a lot of publishers haven’t worked ads into their AMP sites yet. AMP actually already supports Google Adsense along with 10+ other ad networks. Here is a good tutorial on how to use responsive Adsense ads with Google AMP. Publisher’s aren’t just going to sit back and take a loss on their advertising income, so over the next 6 months expect to see ads show up again even on AMP HTML pages.

Pros and Cons of Google Accelerated Mobile Pages (AMP)

Google is definitely pushing for a faster mobile web which is great! But there are pros and cons to using Google Accelerated Mobile Pages which every developer should think about before jumping on the AMP bandwagon.

Pros

  • AMP is open source.
  • By loading pages faster you might see an SEO advantage as speed is a ranking factor in SERPs.
  • Since this is a project developed by Google you can probably assume that AMP HTML pages will eventually be its own ranking factor as well.
  • Possible to gain carousel spot in mobile SERPs as we showed you above.
  • Lots of customization opportunities  and full control such as the ability not to use AMP Cache and serve content from your own CDN or origin server.
  • There is already a WordPress plugin and you can expect them to pop up for Drupal, Joomla, Magento, etc.
  • Prevents users from bloating pages with large CSS and JS frameworks.

Cons

  • AMP can be difficult to implement if you’re not a developer.
  • Introduces another layer of complexity. Perhaps we should spend more time optimizing our current mobile and responsive sites?
  • Still a lack of major features and customizations on CMS integrations such as WordPress, such as not supporting pages. However this could change with time.
  • Supports only AMP JS functions which means your own third-party JS might not be supported. You can use custom Javascript in <amp-iframe> tags but it won’t allow you access to data within the script.
  • No browser support for IE11 yet which means Windows Phone users are currently out of luck. However they are supporting Edge. Official browser supportIn general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers. Beyond that the core AMP library and built-in elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.In particular, we try to maintain “it might not be perfect but isn’t broken”-support for the Android 4.0 system browser and Chrome 28+ on phones.

Using Accelerated Mobile Pages in WordPress

There are a couple WordPress plugins on the repository already that will enable Google Accelerated Mobile Pages on your WordPress site.

We installed the AMP plugin on our test site, which automatically creates the AMP version of your posts. There are no settings in the plugin, simply install and you’re good to go. It also adds the required canonical and links tags as well. Note: This plugin doesn’t support pages yet and there have been reported issues with getting AMP content to index in Google Search Console.

mobile vs amp

Yoast also recently released Glue for Yoast SEO & AMP which adds the necessary schema data on your posts. You can test your schema markup using Google’s structured Data Testing Tool. Remember the schema data is needed if you want that carousel feature in SERPs.

There are also a Drupal AMP module and Joomla AMP extension now available.

Good References for Google Accelerated Mobile Pages (AMP)

There are a lot of great references out there to get you started with Google AMP. Here are a couple we recommend:

Summary

As you can see the Google Accelerated Mobile Pages Project is definitely something to keep an eye on and you might want to start experimenting with it. We are not sure if it is quite ready for prime time, but would love to know your thoughts on Google AMP. Perhaps the creation of this project is a result of us not optimizing our sites well enough for mobile in the past? Join our community discussion on Google AMP.

Related Articles

Diving Into Google Accelerated Mobile Pages (AMP) was last modified: March 14th, 2017 by Brian Jackson
  • Hi Brian

    We have released our AMP plugin for Joomla last week. As you mentioned, we feel ease of use will matter a lot in adoption of AMP, so we have a user interface to set things like Analytics, social sharing buttons or Ads, and there’s no need to touch any code unless you want it. More details here: https://weeblr.com/rx8

    Cheers

    • Thanks for the update. I have updated the post above with your Joomla extension and also a Drupal module. Have a great week!

  • Should I have footer on my AMP pages, or it looks better without footer in search results?

    • That is up to you, but from what I have seen, many of the bigger AMP publishers don’t have footers. Usually for AMP it is better to keep it minimal and clean.

  • Hello Brian,

    Have you tried our WP AMP plugin for Accelerated Mobile Pages on WordPress sites?

    http://codecanyon.net/item/wp-amp-accelerated-mobile-pages-for-wordpress/16278608?ref=teamdev-ltd

  • You’re*

    • Thanks for the heads up! I have fixed the couple “your” to “you’re” typos.

      • Gurmeet Singh

        *your :-P

  • Arajay

    You can only load cloud hosted fonts from https://fast.fonts.net or https://fonts.googleapis.com. You will need a fully licensed locally hosted font if it comes from any other cloud hosted font solution (e.g. typography.com)

  • winhelponline

    Great post, Brian. I’m wondering how caching is done for AMP pages and if Cache Enabler supports AMP? Also, some information regarding “Google AMP Cache” (CDN?) would be appreciated.

    • Pages are cached using the AMP Cache “by default” if they pass validation. It gets a little tricky when it comes to 3rd party caching plugins because if you are going for validation, Google will cache it themselves. So no, Cache Enabler doesn’t currently support AMP. But not really needed to be honest. AMP inlines your CSS, dumbs down the page, lazy loads your images, etc… so it is going to to pretty fast no matter what.

      The Google AMP CDN is provided as a “convenience” to publishers, but publishers can ask Google to link instead to their own CDN. It is still very early in the process though and indeed the documentation on how to actually go about this is still lacking.

      • winhelponline

        Thanks for the response Brian. That was very insightful, as usual.

  • Atul Chaudhary

    So far so good….Now many publishers have already started using AMP. Hope other sectors will also started using it more.

  • And as you guys already predicted, the first Magento extension has been released.

    http://codingbasics.net/accelerated-mobile-pages-magento/

    Might be useful for readers to include it in the article?

  • Hi guys any thoughts on the issue of duplicate content if your serving a
    standard page and AMP page with the same content? I realise Google may
    ‘get it’ but what other search engines E.g. Bing and Yahoo

  • Carpet Münchner

    You say in bold that “Google will only serve AMP pages to mobile devices”.

    Does that mean if your site is 100% AMP and doesn’t have a desktop version then your site will never show up in any desktop search results?

    I don’t think this can be true, because the AMP project’s own website is 100% AMP, but that still appears in desktop searches.

    • There is still a desktop version of the site which is displayed to non-mobile users. As you can see when using a mobile device and searching for AMP project within Google, then clicking the first search result, the URL ends up being https://www.google.ca/amp/s/www.ampproject.org/ which is mobile specific and doesn’t show for Desktops. When trying to access that same URL via desktop you are redirected to https://www.ampproject.org/, the desktop version.

      Therefore Google still displays results based on the device type being used.

      • Hi Cody

        https://www.ampproject.org is not a desktop site, it’s a fully AMPlified one (it’s their demo site basically).

        It’s perfectly fine to have an AMP-only website, regardless of the device used, and to not have a “regular HTML” version of a site. Google has stated AMP will rank the same (plus maybe a small boost for speed?).

        If you do that, the mandatory canonical of the AMP page has to point to itself.

        The assertion “Google will only serve AMP pages to mobile devices” is indeed incorrect (though it matches the by far most common use case, as of now).

        Rgds

        • @weeblr:disqus,

          Thanks for the clarification here. I did not realize that fully AMPlified sites still rendered two separate URLs depending upon the device used. I have updated the article to clarify this topic.

          • “I did not realize that fully AMPlified sites still rendered two separate URLs depending upon the device used”

            They don’t. It’s one single page. AMP is a subset of HTML, with some javascript. It renders fine on a desktop, actually it doesn’t care which platform it’s running on (there might be some sligth internal differences in rendering, but you’d have to ask the AMP developers to know).

            I believe it makes sense to build an AMP-only site in some situations, for instance short-lived, information only sites. When forms are available for AMP (later this year?), you’ll be able to build more sophisticated sites, which will probably be fit for many use cases.

            Rgds

          • Carpet Münchner

            AMP forms were added in July. We’re using them and they work.

            https://www.ampproject.org/docs/reference/extended/amp-form.html

            There’s no AJAX though, so you can only do relatively simple things with them.

  • Iyán Méndez Veiga

    Does Google only show AMP links when using google.com? Because I tried searching “mars” and google.es never shows AMP links :S

  • hey, I have more a feature request for a Drupal module using in combination with Drupal CDN module (for CDN KeyCDN is used) – I’m struck at following error, which means I cant validate my code and it won’t be picked up by Google

    The attribute ‘http-equiv’ may not appear in tag ‘meta name= and content=’. Debug.

    From html source it reads like this:

    I know this is not KeyCDN fault, but rather my lazy hands, but anyway – maybe you have faced this issue already and could point me to the right direction.

    Basically, what we are looking for – keep dns prefetch on normal pages, but strip it out on amp pages

  • Iser

    Accelerated Mobile Pages are the worst invention up until today. What you are doing here is allowing google to sit behind every user and watch their every single move. This is the only reason this crap exists. You should all be ashamed of yourself helping to forge this.

  • Well Brain!! Thanks for sharing nice information. Actually Google clarifies that existing URLs will remain active, but, will be redirected to the new URL scheme.

  • Kristian Widmer

    I have installed the CDN enabler aswell as WPSSO and it seems that with this combination the CDN-enabler-plugin kills the AMP validity (tested with google’s amp-check). anyone any hints how to solve this without loosing one of the two plugins?

  • Kristian Widmer

    update: if relative path on CDN enabler is unchecked (not the standard setting) AMP works just fine with both plugins

  • Rajasankar R

    Hi, Could you give information to hide “post tags” form AMP posts. Thank you

Shares
Share This

Share This

Share this post with your friends!