How to Validate Accelerated Mobile Pages (AMP)

By Thoriq Firdaus. in Coding. Updated on July 13, 2022.

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.

Now, there is one last thing to do: validating those pages.

AMP Validators

There are several ways to validate your AMP pages:

Add in the #development=1 trail at the end of the AMP page URL. The report will be projected in the Console tab under DevTools.
Alternatively you can use the online AMP validator.
You can also use the Chrome AMP extension.

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

Console interface with AMP error reports — 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.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

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.

Instead, they will appear in the Google Structured Data Testing Tool as well as in your Google Webmasters account.

Table report in Google Data Structure Tool showing a warning and errors

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 results — 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.