Skip to main content

Getting Validated WordPress AMP Pages

July 5th, 2017

I’ve set up Google AMP pages on a couple WordPress projects now and, depending on the suite of plugins the site is rocking, it can be far from a walk in the park. Here are the plugins I’ve typically leveraged to get AMP up & running on a blog: the Automattic Google AMP plugin and, if the site is running Yoast SEO, Glue for AMP.

You may install those and leverage the basic styling options and when you go to preview the AMP pages by adding /amp/ at the end of post URLs, you’re happy and think your job is done. Not so fast.

Take your URL and run it through a tool like AMP Test. Does it say it is a valid AMP page? If so, congratulations. You truly are done! If it does not, you’ll see a list of the reason(s) the AMP page isn’t considered valid.

The most common reasons I’ve seen for invalid AMP pages within WordPress are there are User-Authorized Javascript found on a page and/or Invalid CSS Stylesheet(s). Most commonly, this is a result of either your theme and/or any plugins the site is utilizing not enqueueing its assets completely correctly.

How do you troubleshoot these errors?

First, I would examine the flagged errors within the AMP test itself and/or the source code of the AMP page. Often, plugin CSS and JS have an identifier that shows which plugin they’re coming from.

The next step there may be to run something like Query Monitor that lets you better see what any given plugin or theme is contributing to a page and how. It will likely show you the action or filter name that is being hit to insert those CSS/JS on the plugin’s behalf. You could also look at / search the code of the plugin itself for the JS/CSS in question and likely identify how they’re being added in that way, as well, but you need to have a bit of a better idea of what you’re looking for there. Also, if you weren’t able to identify what plugin is causing the issue by the specific error messages of AMP validation, something like Query Monitor may shed some insight there.

Once you’ve identified the problematic plugin in question, you could either try to find a replacement plugin — if there are multiple that do the same thing, another may enqueue its assets correctly — or you can write a function to remove its scripts that you identified in the Query Monitor search on AMP pages. In order to do that, you would need to know how the assets are being inserted.

MORE: WordPress Tutorials

Related Articles