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 WordPress AMP plugin provides the base AMP functionality. 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 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 CSS manually and some extra tags in the head section. These options allow 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:
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.
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 browser’s console – you might have to reload the page – you’ll see the AMP validation warnings. These are the 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.
Missing featured images
The biggest source of our issues were Schema.org article errors. These errors are caused by one simple issue: many our posts, especially the older ones, don’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. When a post has no featured image, we now use that default image. Adding this default image solved half of our errors.
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.
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.
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. WordPress stores the posts on your site 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 plugin to remove some more invalid attributes. Once we’re sure that these work, we’ll contribute these changes “upstream” to the AMP plugin. These changes have fixed the remainder of the issues we had.
The only thing we lacked after we had removed Pagefrog was tracking. Pagefrog took care of Google Analytics tracking for us. Luckily, adding tracking to AMP pages isn’t hard, so there’s a simple connection coded to the MonsterInsights plugin (formerly Google Analytics by Yoast). If you have that enabled and configured, the plugin automatically grabs the account code from it and enables 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 MonsterInsights.
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 with Yoast SEO. This integration means you will not need Pagefrog for Facebook Instant Articles either.
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!