Debugging Google AMP

There’s a lot of talk about Google’s Accelerated Mobile Pages (AMP) lately and a lot of developers rushing to catch up as it starts to make an impact on their sites and search rankings. One thing many aren’t doing however is really paying attention to the details of their code resulting in problems and other bugs that break the new format.

At it’s heart AMP is straightforward using mostly HTML to cache simple content for Google. The details of that simple HTML however aren’t as easy as everything from scripts to poorly encoded links and ads can break the page.

This doesn’t need to be the case.

Here’s the thing… Debugging Google AMP pages and getting the data you need out of them is simple.

Here’s what you need to do:

1.) Turn on debugging mode.

[your url]/#development=1

Simply adding #development=1 to the end of your URLs will show you all the problems as well as some additional information on your Google AMP content. Added a bad tag or parameter? Debugging mode will let you know where so you can fix it before Google sees it.

2.) Open your browser’s developer tools. I’ve tried it with Safari and Chrome and it should work in any modern browser. Just go to the console view.

That’s really it. AMP’s built-in validation will make sure that your AMP content is really ready for prime-time.

About Chris Wiegman

Chris is an engineer at WP Engine who has been working on WordPress since 2008. Over the years he built one of the largest security plugins on WordPress.org as well as numerous other plugins, themes and solutions for sites large and small. When not coding Chris loves to teach and has presented at numerous WordCamps and other conferences as well as taught computer security for St. Edward’s University and other University courses ranging from computers to aviation.

Find Chris on Facebook, GitHub, WordPress.org, and Twitter.

Comments are closed.