Post Title : How to avoid common mistakes while publishing Accelerated Mobile Pages (AMP)
Post Title : How to avoid common mistakes while publishing Accelerated Mobile Pages (AMP)
How to avoid common mistakes while publishing Accelerated Mobile Pages (AMP)
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:
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 AMPcurrently supports the Article and Video metadata categories and uses these for rendering article previews:
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!
(…)
User-agent: *
Disallow: /amp/ <= don't!
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:
- 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:
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
6. Serve everyone the same version of your AMPs
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.
Demikianlah Artikel How to avoid common mistakes while publishing Accelerated Mobile Pages (AMP)
Sekian customgadget How to avoid common mistakes while publishing Accelerated Mobile Pages (AMP), mudah-mudahan bisa memberi manfaat untuk anda semua.
0 Response to "How to avoid common mistakes while publishing Accelerated Mobile Pages (AMP)"
Post a Comment