Digital marketing success revolves around providing a positive user experience, and when a page fails to load at lightning speed, it can frustrate prospects quickly. Bounce rates climb, conversion rates plummet, and you’re lost in KPI’s wondering where you went wrong. Many marketers incorrectly assume their ad or post-click landing page is to blame, when in fact, it’s the lingering lag between the two.
That’s why the AMP framework was developed — to make mobile web browsing significantly faster. AMP allows developers to build web pages that load near-instantly with a stripped-down HTML code. To be AMP-compliant, though, each page must pass through a validator.
How does the AMP validator work?
The AMP validator tool helps you identify and remove any errors or issues from mobile web pages, so they are AMP-compliant. From Google’s side, there are three ways to validate AMP pages. All will produce a pass or fail result, so you can use whichever one best suits your development style:
1. Browser developer console
To validate your AMP pages using the browser developer console:
- Open your AMP page in your web browser
- Add “#development=1” to the end of the URL
- Open your browser developer console to check for validation errors
Errors shown in the developer console will appear similar to this:
2. AMP validator web interface
To use the web interface, simply paste your source code into the URL field at the top of the page (as shown below) and click the validate button. Any errors will be displayed inline alongside the HTML source of the page, like this:
3. Browser extension
AMP validation can also be conducted directly from your browser’s toolbar. The Chrome extension, for example, will automatically validate AMP pages, providing a visual indication of the page as a colored icon:
Another easy way to test is using the Google AMP validator and entering your URL:
Similar to the three previous validation methods above, the Google AMP test will show you whether or not your page passes validation.
What if your page doesn’t pass validation? Knowing the potential errors can help you make the necessary changes.
What causes the AMP validation tool to fail pages?
The AMP framework has a 75kb CSS stylesheet limit, so any web page with more than that will fail. That said, many validation errors are possible when you validate AMP pages, including AMP HTML tag and attribute errors, style and layout errors, templating errors, and deprecation errors. Below is an example of each.
An example of an AMP HTML tag and attribution error is a “mandatory tag missing” error. There are certain tags that must be present in all AMP pages, and if any of them are missing, you will see this error:
For layout errors, the AMP validator could generate a “stylesheet too long” error when the size of the stylesheet exceeds the 50,000 bytes limit:
With templating errors, if the validator finds Mustache template syntax in an attribute value, an “attribute contains template syntax” error could occur:
Lastly, a “deprecated tag” error can occur when a previously valid AMP tag is found in the current AMP document. However, this is only a warning, and the AMP document will actually continue to be valid:
Why is an AMP validation tool important?
The AMP validator is not just a convenient tool for you to experiment with during post-click landing page development. It’s a necessity if you want your page to appear in the Google AMP Cache, and if you want it to be discovered and promoted by 3rd party websites like Google and Twitter who serve AMP pages on their platforms.
If the AMP validation tool detects anything wrong with your page, you lose the speed benefits of the cache, and your page won’t be seen in as many places.
