Go to Blog

ABC of Fixing AMP Validation Errors With SEMrush

82
Wow-Score
The Wow-Score shows how engaging a blog post is. It is calculated based on the correlation between users’ active reading time, their scrolling speed and the article’s length.
Learn more

ABC of Fixing AMP Validation Errors With SEMrush

This post is in English
Darina Andronova
This post is in English
ABC of Fixing AMP Validation Errors With SEMrush

AMP (Accelerated Mobile Pages) keep conquering mobile search results globally. This format, introduced by Google in February 2016, helps facilitate user experience and offers numerous promotional opportunities to webmasters. Google Carousel and AMP-based featured snippets are the perks you can't miss if you are really versed in SEO.

But somehow at the moment, there is no tool in the market that could answer the major concerns all webmasters dealing with this format have:

1. Making it possible to monitor website’s health at any time

2. Having the results of all AMP checks in one report

3. Seeing the issues on all the pages at once

SEMrush is here to reverse the trend. Striving to meet the changing demands of our users, we have developed unique solutions that will highlight all the issues to do with AMP on your website and thus help you prioritize fixes and choose the right optimisation techniques like no other tools can.

And even if you haven’t decided upon the implementation of AMP, we know how to steer you in the right direction.

Track AMP pages

Interested in the performance of your AMP pages? Have no accelerated mobile pages yet?  Anyway, the newly deployed AMP recognition in SEMrush Position tracking report will come in useful for you.

AMP in SEMrush Position Tracking reportThe AMP icon in the Position Tracking tool will show you which of the keywords you are tracking, your AMP URLs are ranking for in Google search results.Click on it to filter a report*.

*To see accelerated mobile pages in your Rankings Overview you need to target mobile devices in your position tracking campaign.

The tool then will take you to the tab with the following information:

  • The rankings of AMP pages by target keywords

  • Particular SERPs for these keywords

  • If the displayed AMP page belongs to you or your rival

Based on all of this data you will be able to decide whether you need AMP at all or consider some changes to your optimisation strategy.

However, if you could just take all your pages and configure them to meet the AMP HTML Specification, you probably wouldn't be here reading this.

Luckily, the SEMrush Site Audit now includes AMP audit, so you can find out the AMP situation on your website at any moment.

AMP audit comprises more than 40 checks; the results of these are incorporated into 3 groups you must be quite used to:

1. HTML issues

2. Style and layout issues

3. Templating issues

AMP in SEMrush Site Audit reportHere's an example of how AMP validation errors are displayed

So let’s take a closer look at the AMP validation errors and ways to fix them.

A - Adapt your HTML

AMP HTML Issues

To enhance HTML with new AMP properties the creators of the format had to actually limit some HTML. Many webmasters are not used to dealing with these limitations and as a result, HTML errors are absolute leaders among AMP issues. Unfortunately, these errors are extremely serious issues, as they deprive your page of all the AMP advantages you would like to benefit from.

For instance, when it comes to checking tags and attributes, you have to drill down a long register of the ones that are whitelisted and grapple with a huge bulk of information concerning those that are disallowed. Moreover, there are new AMP specific tags and other custom elements that complicate the webmaster’s work, especially if the site is big.

Here are some real-life cases.

Disallowed tag

There is a disallowed tag ‘script’ in line 1 of the page code, which may mean they used a custom Javascript or implemented some AMP component the wrong way.

As the use of ‘script’ can seriously decelerate the load speed of your page, AMP Specification prohibits the use of such tag unless the script type is application/ld+json, or we are looking at a mandatory script tag to load the AMP runtime/extended components.

The advice you get from SEMrush is to remove the tag.

Remove disallowed tag

Here is a different example.

Invalid URL protocol

We see an invalid URL protocol in line 58. The ‘img’ tag has ‘http’ protocol set as ‘src’. As a result, your image doesn’t render.

As you can guess, you are recommended to change the protocol to a valid one. As it often is with graphics, this means replacing 'http' with 'https'.

Change invalid URL protocol to valid

B - Beet style and layout

AMP Style and Layout issues

The style and layout of an AMP page serves the sole purpose of quick loading; that is why they are subject to so much control. Style and layout issues are not as wide-spread as HTML issues, but ignoring these you risk having your page fall out of a SERP completely.  

AMP styling is based on CSS but here again, you face the problem of restricted and disallowed styles and the prohibition for external style sheets. 

Besides that, there is a requirement to include height and width attributes for each displayed tag which makes your page easily scrollable. Can you imagine how many hours it will take to insert these manually? And then find out that you didn’t have to do that as AMP validator assumes values for several layouts. Isn’t it easier to focus on the ones that affect your page's performance for sure?

Attribute height is missing in tag 'amp-frame'Attribute height is missing in tag 'amp-frame'

Other problems may be connected with using common HTML attributes instead of custom AMP attributes, or just some occasional mistakes in the path.

screenshot-2017-09-06-15-17-03.png

In AMP Pages With Style and Layout Issues report, there are no how-to-fix it tips as the solution of the problem usually originates from its nature. 

C - Clear Off Unsupported Templating Syntax 

AMP Templating issues

In AMP format, dynamic content can be rendered using the templates defined within the AMP document but these should be inside specially designed tags. AMP validator checks the syntax of the templating language to secure AMP documents from all kinds of vulnerabilities typically found on the web.  

An attribute in a tag is set to a URL containing unescaped Mustache syntaxAn attribute in a tag is set to a URL containing unescaped Mustache syntax

Actually, templating issues are of rare occurrence and the only recommendation you can get here is to escape the prohibited template or its partial.

Escape the Mustache template

As you can see, SEMrush has worked a wonder, making it possible to:

  • Find and fix critical errors before you get notified of these by Google

  • See the exact line of the code where the error lies

  • Get handy how-to-fix-it tips there and then

We understand that being fully aware of the websites’ health and keeping up with the recent SEO trends is an ongoing challenge for most webmasters, forcing them to juggle numerous tools and applications at once. That’s why we are offering SEMrush Site Audit as an all-encompassing solution that will be beneficial for everyone from an SEO agency owner to an in-house web developer.

Audit your AMP pages

with SEMrush Site Audit

Please specify a valid domain, e.g., www.example.com

Like this post? Follow us on RSS and read more interesting posts:

RSS
I have always been interested in digital marketing, tried lots of tools, done lots of research, and SEMrush gave me a chance to speak out.
Share this post
or

Comments

2000 symbols remain
George
Wow, you guys just keep adding more and more tool features. Amazing. Thanks for the breakdown on how to use the tool to check AMP.
Darina Andronova
George
Thank you so much for your response!
Elena Terenteva
George
Hi George! Thank you so much :) I've resent your comment to the developers and they are really pleased. We are preparing couple more surprises for you until the end of the year ;)