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:
- Install a Browser Plugin
- Validator (Automation)
- Gulp Validator (Automation)
- AMP Project Validator (Web App)
- Google Search Console Validator (Web App)
- Inspector / Dev tools
01. Install a Browser Plugin
(currently only available for Chrome and Opera)
This plugin provides a visual confirmation of the AMP structure’s validity.
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-validatorcommand, 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
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:
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:
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=1to the end of your URL to make AMP display validation logs verbosely.
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.