My previous post about AMP lead to a ton of questions and rightfully so. We’ve been testing, developing and working hard in general on understanding what needs to be done to get AMP working without too many errors. This post is an update on where we stand right now, introduces an updated Yoast SEO AMP Glue plugin with new features and gives some more background on the why and what of it all.

The need for multiple plugins

The base AMP functionality is provided by the WordPress AMP plugin. In my previous post I recommended Pagefrog to add styling and tracking to your AMP pages. While it is a nice plugin, it caused more issues for us than it solved. The plugin adds a preview on every post edit screen. This preview is unneeded and there is no way to disable it, and it literally caused browser crashes in our backend.

The issues we had with Pagefrog made me decide to put in some time and created a set of design settings in our Yoast SEO AMP Glue plugin. When you update to version 0.3 of that plugin, you can safely disable Pagefrog and configure the styling on the SEO → AMP design settings tab:

Extra styling options

The Yoast SEO AMP Glue plugin also lets you put in manual CSS and some extra tags in the head section. This allows us, for instance, to have our preferred weight of our Open Sans font available and make the styling fit our brand a bit more.

You can also enable AMP for custom post types on the post types tab. The only post type that doesn’t work yet is pages, as support for that is being added to the main AMP plugin.

Errors & testing AMP

We were getting quite a few errors in our Google Search Console AMP report for yoast.com. You can see our indexation and error graph here:

AMP debug mode

You can put any AMP URL into “debug mode” by adding #development=1 to the end of the AMP URL. If you then look in your browsers console – you might have to reload the page – you’ll see the AMP validation warnings. These are the exact same warnings that Google shows in Google Search Console. There are quite a few different types of errors and the Google search console report groups them for you.

I realize the error line in the graph above is not exactly convincing of our quality yet. The drop in errors we saw made clear that we were doing some things right. Now we have about a thousand posts on this blog, and almost a hundred on our development blog. So it’s clear that not all of our content is indexed as AMP yet, and not all of our AMP content is working nicely.

Missing featured images

The biggest source of our issues were Schema.org article errors. This was caused by one simple issue: a lot of our posts, especially the older ones, didn’t have a featured image. The WordPress AMP plugin then simply outputs schema.org JSON+LD tags without that image, causing those errors. The fix is simple: we now have a “default image” field in the design tab of our Yoast SEO AMP Glue plugins settings. It’s used when a post has no featured image. This solved half of our errors.

Testing Schema.org errors

To test whether you will be getting Schema.org errors, run your AMP URLs through the Google Structured Data Testing Tool. The output from that tool tells you which data is missing.

Missing site logo

The JSON+LD output also requires a site logo. While this is not an error we ourselves had, many reported this issue. The AMP plugin uses the logo set as your site icon in the Customizer, and omits it if you don’t have one set. We now let you upload a logo on the design tab of the Yoast SEO AMP Glue plugin too, if you want to use a different one.

Retrofitting AMP onto existing content

Part of what we’re doing with the AMP WordPress plugin and the Yoast SEO AMP glue plugin is “fixing” content that exists in your database to work with AMP. The posts on your site are stored as HTML in your database. The HTML of those posts does not necessarily to conform to what AMP HTML requires. For this purpose, the AMP plugin has a set of so called “sanitizers”. These are filters, run over your content, that remove tags and attributes on tags that aren’t allowed. They even remove some attributes when their values aren’t allowed.

We’ve added an extra sanitizer class in our own plugin to remove some more invalid attributes. Once we’re certain that these work, we’ll actually contribute these changes “upstream” to the AMP plugin. These changes have fixed the remainder of the issues we had.

Analytics integration

The only thing we lacked after Pagefrog was removed is tracking. Pagefrog took care of Google Analytics tracking for us. Luckily, adding tracking to AMP pages isn’t hard, so we coded a simple connection to our Google Analytics by Yoast plugin. If you have that enabled and configured, the plugin will automatically grab the account code from it and enable tracking for your AMP pages. You can, however, also choose to use a custom tracking code. If you do this, the plugin no longer integrates with Google Analytics by Yoast.

Facebook Instant Articles

Another thing Pagefrog takes care of is Facebook Instant Articles. There’s now a plugin from Automattic for that purpose, which we’re working on integrating Yoast SEO with. So you won’t need Pagefrog for Facebook Instant Articles either.

Conclusion

With all these changes, getting AMP to work on a WordPress site running Yoast SEO has become slightly easier and lots less error prone. We’ve updated our Setting up WordPress for AMP post with these changes. Good luck and do let us know of errors in the comments!