How to Validate Accelerated Mobile Pages (AMP)

In our last AMP tutorial, we have shown you how to adopt AMP (Accelerated Mobile Pages) to gain a significant speed boost as well as better exposure in Google’s mobile search result for your website in the mobile environment.

Having seen AMP‘s potential, I assume you might have started or have plans to start making changes to your websites to comply with AMP. Carefully follow the guidelines on the Docs and compose your CSS to style the AMP pages to fit your visual appetite.

How To Customize Google Chrome DevTools Theme

For most people, the current color scheme in DevTools probably looks fine but the white and gray combination…Read more

These tools will produce a report listing errors or warnings within the pages. Based on this, you can choose what to fix.

AMP error report in DevTools Console.

AMP validation primarily governs the use of HTML elements, the s, and the style declarations. Make sure that these things in the page are all AMP-compliant, and that nothing that violates AMP guidelines are left in there. Otherwise, your AMP page will not appear anywhere.

Data Structure

AMP also requires the Schema data structure. This data is laid out within the head tag of the page in JSON format. It contains contextual informatiom of the page including the title, the publisher logo and name, the date it was published and modified, etc.

Depending on the purpose of the page, the data to include may vary: Articles, Reviews, Recipes, Videos, etc. You can refer to Google Data Types Documentation for details on data type.

There is some data required which will produce errors if not supplied; a few other types of data are optional and will only produce warnings. These type of errors however will not appear in the aforementioned AMP validators.

AMP consumers or a client that supports AMP, such as Google Search and Twitter Moments, may use this set of data to present AMP content in their result page.

AMP carousel in Google SERP

So, aside from following AMP guidelines with their proprietary custom HTML elements, the required Schema data have to be in place as well.

Overlooked Errors

Most errors are noted in the Docs explicitly and can be easily picked up in a glimpse. A few errors however are contextualized with variables that we may fail to notice such as the “Invalid attribute value”, which says "The attribute '%1' in tag '%2' is set to the invalid value '%3'.".

This error report does not mention or list precisely which value is invalid . But what I do know is that we cannot set the width and the height of <amp-img> element to 100% or auto. These attribute values have to be the exact size of the image to preserve the image ratio.

This is just one example. There are a number of custom elements – amp-img, amp-iframe, and amp-ads – with their own sets of validation rules against the use of an attribute and its value.

This could make validating AMP Page a daunting task, especially if we take hundreds or (perhaps) thousands of legacy content published years ago into account.

Final Thought

AMP is still in its early stage. It is in very active development with communal efforts from Google and the web development community. But AMP will certainly evolve. Similar to HTML5, there might be elements, attributes, and some practices that will deprecate in the future. So make sure that your AMP pages are constantly validated from time to time based on the latest changes to the guidelines.