Skip to content

Instantly share code, notes, and snippets.

@pietergreyling

pietergreyling/amp-checks-v.2016.04.13.md

Last active March 29, 2017 16:33
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pietergreyling/460b35469d51c62a17a3 to your computer and use it in GitHub Desktop.
Save pietergreyling/460b35469d51c62a17a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
amp-checks-v.2016.04.13.md

Validating AMP Pages and Enabling Discovery by Google

*v.*2016.04.13

  1. Select some AMP pages and run them through the AMP HTML validator to preview and validate:

    1. Understand how to Validate AMP Pages.

    2. Understand how to Preview and Validate.

    3. Open your page in your browser.

    4. Add "#development=1" to the URL, for example, http://www.bbc.co.uk/news/amp/35722769#development=1.

    5. Open the Chrome DevTools console, with mobile device mode emulation enabled, and check for validation errors.

    6. Fix your validation errors.

  2. Check the AMP page’s schema.org Article markup properties in the Structured Data Testing Tool. Both JSON-LD and MICRODATA markup are supported.

    1. Ensure that the NewsArticle, Article, or VideoObject Rich Snippet is present.

    2. There should be no 'AMP' warnings/errors.

    3. Is the logo 'image' attribute within 600x60?

    4. Does the logo fit the UI guidelines for logos in the Google Top Stories carousel with AMP?

  3. Check AMP HTML page linking:

    1. Is there a rel=amphtml link on the canonical page?

    2. Is there a rel=canonical on the amp html page?

    3. Is there a rel=amphtml link on the mobile site page, if applicable?

  4. Check external resources:

    1. URLs of all embedded iframes, videos, custom fonts, pixels, analytics, ads, etc, and similar content need to be fetched via the HTTPS scheme.

    2. Don’t use "protocol relative URLs", this might cause problems when the article is loaded via the Google AMP Cache. When a document is served from a cache, such as the Google AMP Cache, a relative URL will no longer point to your intended canonical. Instead use an absolute URL .

  5. Does your website's robots.txt allow Googlebot to:

    1. Crawl the canonical page?

    2. Crawl the AMP page?

    3. Crawl the links noted in the structured data?

    4. See Use Fetch as Google for websites to test if Google can crawl your web page. Note that the AMP page will be crawled by the Google smartphone bot, so select that bot.

    5. Does the crawler see the right version of your AMP page, logo and images? E.g., in the case of a publisher logo that is different only for the googlebot user agent the crawl will not succeed.

    6. Also check robots noindex tags in the site itself. Make sure the canonical page and the AMP page do not contain robots noindex meta tags and do not return noindex X-Robots-Tag headers.

  6. Read in Chrome in Mobile Mode:

    1. Verify feature parity between desktop and AMP HTML pages.

    2. Do all formats look good?

    3. Are there any errors as you read?

    4. Does it work in tablet mode?

    5. Does it look good in landscape mode and large screens?

    6. Are the images too big (also in kb size)? See Include Iframes and Media for guidance.

    7. Are amp-img tags height/width ratio correct for a given image? (i.e. no skew)

  7. Open your page via the Google AMP Cache (https://cdn.ampproject.org/c/s/www.example.com/amp). Note the ‘/s’ only needs to be there if the origin is on https:

    1. Do all external resources load?

    2. Does the AMP validator show any errors?

  8. Open your page in the AMP Viewer:

    1. Prefix the URL with "https://www.google.com/amp/s/". Again, the ‘/s’ only needs to be there if the origin is on https.

    2. For example, https://www.google.com/amp/s/www.bbc.co.uk/news/amp/35722769.

    3. Does it look good?

    4. Do interactive elements function well?

  9. Review your AMP report in the Google Search Console. (N.B. it may take a few days for the latest status of your site to be reflected in the report

    1. Does your website have enough coverage?

    2. Are all AMP pages valid AMP with Structured Data?

    3. Do you have any outstanding errors?

    4. Drill down to see sample pages reflecting your site’s outstanding errors using the report.

    5. Fix the outstanding errors and validate the fix using the AMP validator and Structured Data Testing Tool.

  10. If applicable, test ads, analytics, and access integrations.

Further Resources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment