How to Validate Accelerated Mobile Pages (AMP)

In a final AMP tutorial, we have shown we how to adopt AMP (Accelerated Mobile Pages) to benefit a poignant speed boost as good as improved bearing in Google’s mobile hunt outcome for your website in a mobile environment.

Having seen AMP‘s potential, we assume we competence have started or have skeleton to start creation changes to your websites to approve with AMP. Carefully follow a discipline on a Docs and harmonise your CSS to character a AMP pages to fit your visible appetite.

Beginner’s Guide to Accelerated Mobile Pages (AMP)

 

Beginner’s Guide to Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages is Google’s beginning that intends to solve a biggest problem of a mobile web –…Read more

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

AMP Validators

There are several ways to countenance your AMP pages:

  1. Add in a #development=1 route during a finish of a AMP page URL. The news will be projected in a Console add-on underneath DevTools.
  2. Alternatively we can use a online AMP validator.
  3. You can also use a Chrome AMP extension.

How To Customize Google Chrome DevTools Theme

 

How To Customize Google Chrome DevTools Theme

For many people, a stream tone intrigue in DevTools substantially looks excellent though a white and gray combination…Read more

These collection will furnish a news inventory errors or warnings within a pages. Based on this, we can select what to fix.

Console interface with AMP blunder reports

AMP blunder news in DevTools Console.

AMP validation essentially governs the use of HTML elements, a s, and a style declarations. Make certain that these things in a page are all AMP-compliant, and that zero that violates AMP discipline are left in there. Otherwise, your AMP page will not seem anywhere.

Data Structure

AMP also requires a Schema information structure. This information is laid out within a head tab of a page in JSON format. It contains contextual informatiom of a page including a title, a publisher trademark and name, a 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 many smashing article"
}
/script

Depending on a purpose of a page, a information to embody competence vary: Articles, Reviews, Recipes, Videos, etc. You can impute to Google Data Types Documentation for sum on information type.

There is some information compulsory that will furnish errors if not supplied; a few other forms of information are discretionary and will usually furnish warnings. These form of errors however will not seem in a aforementioned AMP validators.

Instead, they will seem in a Google Structured Data Testing Tool as good as in your Google Webmasters account.

Table news in Google Data Structure Tool display a warning and errors

AMP consumers or a customer that supports AMP, such as Google Search and Twitter Moments, competence use this set of information to benefaction AMP calm in their outcome page.

amp results

AMP carousel in Google SERP

So, aside from following AMP discipline with their exclusive tradition HTML elements, a compulsory Schema information have to be in place as well.

Overlooked Errors

Most errors are remarkable in a Docs categorically and can be simply picked adult in a glimpse. A few errors however are contextualized with variables that we competence destroy to notice such as a “Invalid charge value”, that says "The charge '%1' in tab '%2' is set to a shabby value '%3'.".

This blunder news does not discuss or list precisely which value is shabby . But what we do know is that we can't set a width and a height of amp-img component to 100% or auto. These charge values have to be a accurate distance of a picture to safety a picture ratio.

amp report

This is only one example. There are a series of tradition elements – amp-img, amp-iframe, and amp-ads – with their possess sets of validation manners opposite a use of an charge and a value.

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

Final Thought

AMP is still in a early stage. It is in really active growth with village efforts from Google and a web growth community. But AMP will positively evolve. Similar to HTML5, there competence be elements, attributes, and some practices that will depreciate in a future. So make certain that your AMP pages are constantly certified from time to time formed on a latest changes to a guidelines.

Add Comment