AMP by Example

Introduction
Introduction

Components
Components

Advanced
Advanced

Samples & Templates
Samples & Templates

AMP for Ads (A4A)
AMP for Ads (A4A)

View Source

How to publish AMPs

Show Hidden Code Hide Code
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <link rel="canonical" href="https://ampbyexample.com/introduction/how_to_publish_amps/">
  <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>
</head>
<body>

Introduction

There are a few things you need to watch out for when publishing Accelerated Mobile Pages (AMP).

1. Publish only valid AMP files

One of the great things about AMP is that the runtime includes a built-in validator. The validator checks if your AMP file contains valid AMP HTML. If your page contains invalid AMP, it will not load correctly and third-party platforms might choose not to show your AMP page. This makes it a good idea to validate a representative subset of your AMP pages to make sure that all different variants are valid.

Run the validator by adding #development=1 to an AMP URL, for example:

/introduction/how_to_publish_amps/#development=1

You can view the validation result in the Javascript console of your browser:

There are also other ways to validate an AMP page such as validator.ampproject.org or the official Node AMP Validator, which makes it easy to integrate AMP validation into your build pipeline.

2. Include correct metadata

Adding metadata to your AMP files enables third-party sites to better display your AMP pages. For example, the Google Top Stories Carousel with AMP currently supports the Article and Video metadata categories and uses these for rendering article previews:

The Structured Data Testing Tool is a great way to test whether the metadata in your AMP files is correct: make sure the “All data” filter shows “AMP Articles” and everything is green. Here is an example.

3. Ensure your AMPs are discoverable

Third-party integrations, such as the Google Top Stories Carousel with AMP, discover your AMPs via the canonical version of your page. To make this possible, link from your AMP HTML files to their canonical version (this is usually the desktop version):

<link rel="canonical" href=”http://example.ampproject.org/article.html" />

…and (important!) link to your AMP files from your canonical version (and any alternate):

<link rel="amphtml" href="http://example.ampproject.org/article.amp.html" />

Otherwise third-party integrations may not be able to discover your AMPs.

4. Allow Crawlers to access your AMP Files

If you want your AMPs to show up in third-party platforms, make sure to allow their crawlers to access them. This means in particular:

  • Don’t exclude crawlers via your robots.txt file:
User-agent: *
Disallow: /amp/                            <= don't!
  • Don’t add a robots noindex meta tag to your AMP HTML files:
<meta name="robots" content="noindex" />   <= don't!
  • Don’t include noindex as X-Robots-Tag HTTP header for your AMP files:
$ curl -I [http://www.example.com/amp.html](http://www.example.com/amp.html)

HTTP/1.1 200 OK
Date: Tue, 25 May 2010 21:42:43 GMT
...
X-Robots-Tag: noindex                      <= don't!
...

5. Test that your AMPs load correctly via the Google AMP Cache

The Google AMP Cache stores valid AMP pages and provides consistently fast access to them. The Google Top Stories Carousel with AMP, for example, uses the Google AMP Cache to display articles. The cache stores images and fonts in addition to documents. This makes it important to test that your AMPs work correctly when loaded via the Google AMP Cache.

Loading your AMP pages via the Google AMP Cache is easy. The Google AMP Cache URL is composed based on whether the source URL is available via HTTP or HTTPS:

where AMP_URL_WITHOUT_SCHEME is the location of your AMP file minus http(s)://. For example, the AMP Cache URL for https://ampbyexample.com is:

https://cdn.ampproject.org/c/s/ampbyexample.com

When loading your AMP pages via the Google AMP Cache, check via your browser’s developer tools if all external resources can be loaded successfully, including all of the following:

  • images
  • videos
  • amp-analytics endpoints
  • amp-pixel endpoints
  • custom fonts
  • iframes
Important: A common cause for missing assets are protocol relative URLs. These are currently not supported by the Google AMP Cache. Instead link to all assets via HTTPS (if available). You can learn more about how the Google AMP Cache works here.

Next up:

</body>
</html>