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:
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.htmlHTTP/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:
- HTTP: https://cdn.ampproject.org/c/AMP_URL_WITHOUT_SCHEME
- HTTPS: https://cdn.ampproject.org/c/s/AMP_URL_WITHOUT_SCHEME
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:
- AMP Homepage: home of the offical documentation.
- AMP by Example: see all AMP features in action.
- AMP on Github: the place to request and discuss new features.
- Top Stories with AMP: publishing AMPs for the Top Stories carousel.
