How To Validate AMP Pages

It's easy and straightforward to validate your pages and eliminate any errors.

Kelvin Yan

PUBLISHED:

UPDATED:

Why is AMP validation important?

When I first started building AMP sites, I received alerts every now and then from Google Search Console informing me that some pages contained invalid AMP structure.

Since then, I have incorporated validation into the workflow, so the process is error-free.

An invalid AMP page can be easy to miss. Google Search Console will alert you about the problems, but sometimes that can take several days for it to happen. During this time, the page shown in search results will not have the gray ⚡ symbol nor will it be served through Google’s CDN.

Validating AMP pages is not hard. There are numerous techniques to check them yourself manually or to automate validation to detect problems early.

Even if there are only a small handful of pages, ensuring that all of them are valid should be a continuous part of your build process before deploying your website for the first time, as well as for any subsequent changes made to it.

Listed below are different ways on how AMP validation can be achieved either manually, or through scripts and automation.

6 ways to validate AMP pages:

  1. Install a Browser Plugin
  2. Validator (Automation)
  3. Gulp Validator (Automation)
  4. AMP Project Validator (Web App)
  5. Google Search Console Validator (Web App)
  6. Inspector / Dev tools

01. Install a Browser Plugin

(currently only available for Chrome and Opera)

Download and install the Chrome Plugin or the Opera Plugin.

This plugin provides a visual confirmation of the AMP structure’s validity.

Blue AMP icon showing that an AMP link is available. Clicking the icon will navigate you to the AMP page link.
Green AMP icon representing valid AMP — no problems here.
Red AMP icon representing invalid AMP with one error. Clicking the icon will show additional details about that error.

02. Validator (Automation)

The amphtml-validator is a versatile package used to integrate AMP validation into any project.


1) Continuous Integration Setup

The example below is a CI script setup for my own projects using Hugo, a static site generator. We’ll need to install the npm package to our project:

npm install amphtml-validator --save-dev

Next, edit the package.json file to add to the script.

AMP is validated and shown in console output when building the project using npm run build:prod.


2) Command Line Setup

Instead of writing scripts attached directly to the project, one can opt to install amphtml-validator for command line usage instead.

We’ll need to install the package with the global flag:

npm install -g amphtml-validator

A Bash and a PowerShell example are shown below.


· Bash Example

A Bash sample script to validate your AMP pages in folders recursively:

On a troubleshooting side note for Macs, if you receive a message on your Terminal saying it does not recognize the amphtml-validator command, try out the following solution:

nano ~/.bash_profile to add an alias.


· PowerShell Example

A PowerShell sample script to validate your AMP pages in folders recursively:

03. Gulp Validator (Automation)

For Gulp projects, you can choose to use gulp-amphtml-validator package for easy integration.

npm install gulp-amphtml-validator --save-dev

An example of how your gulp task might look:

Manually run AMP validation with gulp amphtml:validate

Example output from the Gulp validator on invalid AMP.

04. The AMP Project Validator (Web App)

The AMP Validator is a sandbox to validate your AMP code. Additionally, it can also validate external URLs. Enter an AMP URL to test:

The AMP Validator

05. Google Search Console Validator (Web App)

The Google AMP Testing Tool can also be used to validate external URLs. Again, enter any AMP URL to test:

Google Testing Tool

Furthermore, the Google Testing Tool also includes a Preview Search Result function to see how the page will look like with the AMP header.

06. Inspector / Dev tools (in any browser)

Lastly, you can use your browser’s dev tools and view console output. Append #development=1 to the end of your URL to make AMP display validation logs verbosely.

Console output showing one validation error. These logs only appear when the special hash value is appended at the end of the URL.

It’s very rare that you may find this method convenient to use unless you do not have Chrome or Opera available.

How will invalid AMP code affect SEO?

If invalid AMP pages are deployed by mistake, those pages will still appear in Google search results.

Through our tests, if an invalid AMP page is also the canonical version, that page will still be indexed by Google.

In both situations, however, the pages will not receive any of AMP’s benefits.

Of course, not having to worry about AMP + SEO issues is the best goal to have by ensuring valid AMP pages every time.