Menu Sheet Overlay

Validating AMP

Make sure that your AMP page is validated, or it will not get discovered and distributed by third-party platforms like Google Search.

How do I check if my AMP page is valid? #

There are several ways to validate your AMP page. They all will get the same results, so you just need to pick whichever one works best for you.

Browser Developer Console #

The AMP Validator is built-in with the AMP JS library on your AMP page, <script async src=""></script>, it will already be in the head tag. To check for AMP validation details:

  1. Open your AMP page in the browser.
  2. Append #development=1 to the URL, for example, http://localhost:3000/potions.html#development=1.
  3. Open the Chrome DevTools console and check for validation errors.

In the Chrome DevTools console, you will get something like this:

Validating AMP Chrome DevTools Console

Chrome AMP Validator Extension #

Chrome AMP Validator Extension can be accessed directly from your browser's toolbar. When you are on the AMP page, it will automatically validate and give a visual indication of the validity of the page as a colored icon.

There are three different colors that represent different status'. A red AMP icon means that there are errors within an AMP page. A green AMP icon means that there are no errors within an AMP page but it will display a number of warnings if any exist. A blue AMP icon means the page is not an AMP document, but it indicates that an AMP version is available. When you click on blue AMP icon and it will redirect to the AMP version. You can use this to check that the canonical pages are correctly linked to your AMP service.

AMP Error

AMP Pass

AMP Redirect

Errors and warnings in the Chrome AMP Validator

NPM package for CI #

We have integrated AMP validation through the AMP validator NPM package: amphtml-validator. When you run npm run test in your project, it will check that the AMP page is valid.


AMP style lint to pass AMP validator #

There are AMP restricted style lint rules in the .stylelintrc.yml file to work with Mobify Code Style Sass lint. When you run npm run lint, it will check for AMP Sass lint, Sass lint, JS lint, and Mobify JS copyright lint. After you run npm run lint, it will let you know if your AMP styles passed. If your AMP styles did not pass AMP validator then it will return results of AMP errors and display which line and file where the errors can be found.

AMP lint

What happens if my page isn't valid? #

The AMP validation service will find if there is something wrong with your page. If there are AMP validation errors with your page, it will not be discovered or distributed by third party websites and will not appear in the Google AMP Cache. Google AMP Cache is a free service that caches your pages and makes them available on Google Search. Third party websites will be Facebook, Twitter, Linkedin, or many more, that integrate your AMP pages into their content.

Make sure that your AMP pages pass the AMP validator before you publish your pages live.


Was this page helpful?