How to Fix Common AMP Errors

How to Fix Common AMP Errors

Andy Holland

Accelerated Mobile Pages (AMP) are hot topic in the development community as more webmasters look to this initiative for their responsive design. Although the AMP plugin is effortlessly easy to use, there are some common errors which you’re likely to come across.

Thankfully, as you would expect with this easy-to-use plugin, these issues shouldn’t be a problem to fix. If you’re encountering any error messages on you WordPress posts simply try one or all of the following.

Always check the Structured Data Testing Tool

By having a logo which doesn’t meet the AMP criteria, each and every page will show an error message. It’s a stumbling block that impacts many users when starting out. You may have seen the error “A value for the logo field is required”. In order to fix this, the logo must be updated and resized.

You can check the criteria by going to the AMP schema.org article markup properties which can be found in the Structured Data Testing Tool. Make sure that your logo image attribute is within 600 x 60. This should fit in the UI guidelines for logos in the carousel. Finally, ensure that the Article, NewsArticle or VideoObject Rich Snippet is present.

Run through the AMP HTML validator

This is a great debugging option that’s often overlooked but usually combats any issues with minimal stress or resources. Simply open the page in your browser and add the following extension after the URL: “#development=1”.

As an example, that would show https://example.com/#development=1. Next you’ll need to open the Chrome DevTools console, making certain that mobile device mode emulation is enabled. From here, you can check for validation errors and make the appropriate fixes.

Check any external links

Errors are often caused by embedded content which can be frustrating for those sites which include a lot of links to external resources. In order to avoid issues, you’ll need to fetch any URLs for embedded videos, ads, iframes and so on via the HTTPS scheme.

What’s more, you mustn’t use ‘protocol relative URLs’ which can throw up error messages when articles are loaded using the Google AMP Cache. If a document is served by a cache elsewhere, you’ll have to use an absolute URL as the relative URL won’t point to the desired canonical.

Go through your AMP HTML page linking

Although it’s not common, there can be instances where a plugin error is caused by HTML page linking. For those that have a customised AMP solution, it could be worth checking through links. Ensure that there is a rel-amphtml link showing on the canonical page along with a rel=canonical on the amp htmp page. Finally, in cases where it is applicable, make certain that the mobile site page includes a rel-amphtml link.

Take a look at error reports

If you’re still struggling to find the culprit, it may be time to view an error report which can be found by clicking ‘Accelerated Mobile Pages’ under ‘Search Appearance’. This quickly gives an overview of your site before narrowing onto any specific errors. From here, you can systematically fix them which often only requires a few tweaks to templates or any other plugins used.

Andy Holland

Author Andy Holland

More posts by Andy Holland