How to avoid common mistakes when publishing Accelerated Mobile Pages

As Accelerated Mobile Pages (AMP) are building up momentum we’ve noticed the same mistakes happen again and again when publishing AMPs. Here is a list of steps you should take to avoid breaking your AMPs and ensure a great AMP experience to your readers.

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:

https://ampbyexample.com#development=1

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

Something is wrong.

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

Your AMP page cannot be shown in the 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.

6. Serve everyone the same version of your AMPs

If you want your AMPs to show up in third-party platforms, you need to make sure to serve the same AMP version to users and crawlers. Avoid redirecting users on non-mobile devices to a different version of your website. This can lead to scenarios were users can see your AMP pages, but third-party crawlers cannot. The best approach is to always serve your AMPs and never redirect to non-AMPs.

More Resources

If you want to learn more about AMP, these links are a good place to start:

Show your support

Clapping shows how much you appreciated Sebastian Benz’s story.