How to Validate and Debug Accelerated Mobile Pages (AMP)

How to Validate and Debug Accelerated Mobile Pages (AMP)

/in

Accelerated Mobile Pages (AMP) is Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices. Matt Southern (SearchEngineJournal) tells how to validate and debug these pages. About the author: Matt is the lead news writer. His passion for helping people in all aspects of online marketing flows through in the expert industry coverage he provides. Image courtesy of iqoncept via Bigstockphoto. 

Only ‘valid’ AMP pages are eligible to show in Google’s search results, which is why it is necessary to validate your pages before they go live. Even more important than that is doing a status check once in a while to ensure your pages remain error-free.

Google recently provided some tips on how you can both validate pages, and diagnose issues on the pages after they go live.

Validation

Here are Google’s recommendations for how you can validate pages and identify issues before they hit the web.

Browser Developer Tools

To use Developer Tools for validation:

  • Load the AMP page in your browser
  • Append “#development=1” to the URL, for example, http://localhost:8000/released.amp.html#development=1.
  • Open the Chrome DevTools console and check for validation errors.

AMP Web Validator

You can also validate your pages using a simple, free tool called AMP Web Validator:

  • Copy & paste your source code into the web validator.
  • Watch as the web validator delivers error messages between the lines of code.
  • Edit your code directly in the web validator, which will then be re-validated.

Identifying Issues

Now that you have your validated AMP pages published to the web, you’ll need some tools to check on them to ensure they stay validated.

AMP Browser Extensions
Google recommends using the AMP Browser Extension available for Chrome and Opera. Browse through your site with the extension turned on and it will evaluate the validity of each page. The extension icon will turn the following colors based on the status of the page:

  • Red: There are errors (the icon will display how many)
  • Green: There are no errors
  • Blue: You’re not on an AMP page, but an AMP version of the page is available

For further information you can click on the browser extensions for more details about the errors or warnings found on your site (if there are any).