Validate AMP Pages
The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated. This way, third parties such as Twitter, Instagram or Google Search can feel great about serving AMP pages to readers in increasingly interesting ways.
How do I check if my page is valid AMP?
There are several ways available to validate an AMP document. They will all produce the exact same result, so use whichever one suits your development style the most.
In addition to AMP validity, you may also want to confirm that your AMP document is discoverable to third-party platforms.
Browser Developer Console.
The AMP Validator comes bundled with the AMP JS library, so it is available on every AMP page out of the box. To validate:
- Open your AMP page in your browser
- Append "
#development=1" to the URL, for example,
- Open the Chrome DevTools console and check for validation errors.
Developer Console errors will look similar to this:
The AMP Validator can be used as a web interface at validator.ampproject.org. This interface shows errors displayed inline alongside the HTML source of the page. The interface is an interactive editor: changes to the html source result in interactive revalidation.
The AMP Validator can be accessed directly from your browser's toolbar using a browser extension. As you browse, it will automatically validate each AMP page visited and gives a visual indication of the validity of the page as a colored icon.
||When there are errors within an AMP page the extension’s icon shows in a red color and displays the number of errors encountered.|
||When there are no errors within an AMP page, the icon shows in a green color and displays the number of warnings, if any exist.|
||When the page isn’t AMP but the page indicates that an AMP version is available, the icon shows in a blue color with a link icon, and clicking on the extension will redirect the browser to the AMP version.|
Command Line Tool
As a prerequisite, you may need to install Node.js with it's package manager 'npm' on your system.
To install the AMP HTML validator command line tool, type
npm install -g amphtml-validator.
Now let's validate a real AMP HTML page.
$ amphtml-validator https://www.ampproject.org/ https://www.ampproject.org/: PASS
Unsurprisingly this page is valid AMP HTML. Let's try a page that is not valid:
several_errors.html. To run the
amphtml-validator command, you can either provide the URL of the page or a local file name. Download and save several_errors.html into a file, then run:
$ amphtml-validator several_errors.html several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='. several_errors.html:26:2 The tag 'script' is disallowed except in specific forms. several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html) several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html) ...
The format of the error messages consists of file name, line, column, and message, often followed by a link to the AMP HTML reference. Some editors, including Emacs (look for compile command and compilation mode), can interpret this format and let you jump to the errors in the original file.
For a good starting point to make your own AMP page consider minimum_valid_amp.html:
$ amphtml-validator minimum_valid_amp.html minimum_valid_amp.html: PASS
What happens if my page isn’t valid?
The AMP Validator isn’t just a convenience for you during development. It’s also used by platforms like Twitter or Google who integrate your AMP pages into their content and search results. More so, they usually don’t request the pages directly from your server but make use of the Google AMP Cache, a free service that caches your pages and makes them available across the world, so they load even faster.
If the AMP validation service detects that there’s something wrong with your page, it won’t get discovered and distributed by third party websites and won’t appear in the Google AMP Cache. So not only would you lose the speed benefits of the cache, it’s likely that your page will not be seen in many places! That would be a shame, so let’s make sure it doesn’t happen.
How do I fix validation errors?
Most validation errors are easy to address and fix. Consider this HTML tag:
Which generates this AMP validation error, shown in these different tools:
Browser Developer Console
Each tool gives several pieces of information:
- The location (line and column) in the HTML document where the error occurred, clickable in some interfaces to highlight that location. In this case the issue occurs on line 11, column 2.
- A line of text describing the error. In this case the text indicates that
we are using an
<img>tag, when we should have used an
- A link to a relevant document about the error. In this case the
documentation for the
<amp-img>tag. Not all errors generate documentation links.
Carefully re-reading the spec, we realize that we are using an
<img> tag, when we should have used an