Wordpress and AMP

WordPress & AMP: part II

WordPress & AMP: part II

March 08th, 2016 – 69 Comments

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.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

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 the latest version of that plugin, you can safely disable Pagefrog and configure the styling on the Yoast SEO → AMP design settings tab:

WordPress AMP design settings

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:

google-search-console-amp-errors

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.

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.

Analytics integration

Initially, we added Analytics tracking to AMP Glue as well. However, the official AMP plugin by Automattic now features Analytics tracking out of the box. You can also add your JSON configuration to specify what you want to track. Make sure that the values in the configuration string and the vendor type used are coherent with the analytics requirements of the site. On GitHub, you’ll find more about AMP analytics within this AMP plugin. Or learn what you can do with amp-analytics on the example project on the AMP by Example page.

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!


69 Responses to WordPress & AMP: part II

  1. Russ
    By Russ on 21 March, 2016

    This is for my site, youtuberreview.com

    Downloaded the newest version of the AMP plugin and Yoast AMP glue. Not a single AMP page is successfully indexing right now. Would appreciate any help you guys can offer.

    http://imgur.com/NYQa85v

  2. David Murphy
    By David Murphy on 19 March, 2016

    Hi there, I just left a comment and for some reason it was deleted. Just so you know I wasn’t spamming your blog, I just needed help with an issue I’m having.

  3. David Murphy
    By David Murphy on 19 March, 2016

    Hey there! Thank you so much for this article (and the previous one). This plugins is indeed awesome, the only thing is that the content from my posts are not coming up for some reason.

    Here is an example: http://dmelseo.com/why-should-i-have-a-mobile-friendly-website/amp/

    Any thoughts?

  4. Franz
    By Franz on 18 March, 2016

    Great Plugin, works perfect for me, almost …

    The issue is: My style.css has some “!important” declarations which are not allowed in AMP code. Is there a way to “filter” these for AMP? or delivering a different style.css just for the AMP version of the posts?

    Yes, I know, cleaning up the styling is the preferred way, so I don’t need “!important” , but unfortunately this would mean giving up a highly customized Theme, i.e. work for weeks …

    Any idea how to get rid of “!important” just for the AMP version of the posts?

    Thanks!
    Franz

    • Franz
      By Franz on 18 March, 2016

      Just solved the issue by myself: It’s not about the style.css but about inline CSS that’s being introduced by another plugin …

  5. Carlos
    By Carlos on 16 March, 2016

    Great work, thanks much for this plugin, it is a relief! Only one question: I test it in a site with multi-language support enabling only the pages (this site do not use post yet) but I’m getting 404 for my /amp/ pages. Does it have to do with the multi-language support?

  6. Jay Gidwitz
    By Jay Gidwitz on 16 March, 2016

    I have an art blog. AMP is completely stripping out my wordpress image galleries. (Although it doesn’t strip out youtube videos.) Is there a fix for this?

    • Jay Gidwitz
      By Jay Gidwitz on 16 March, 2016

      Correction: it replaces them with a slide show. Nevermind! I’m still getting a lot of errors in webmaster tools, but I’m sure this will get ironed out. Thank’s for adding this functionality, Yoast!

  7. Kolyo St. Kolev
    By Kolyo St. Kolev on 16 March, 2016

    I have some issues, can you help me to understand where I’m going wrong?

    Here is what I have for that link: http://www.nrgtv.bg/%D1%82%D1%8A%D1%80%D0%B3%D0%BE%D0%B2%D0%B8%D1%89%D0%B5/9030.html/amp#development=1

  8. Christian Schulze
    By Christian Schulze on 16 March, 2016

    Awesome update.

  9. Naeem
    By Naeem on 14 March, 2016

    PageFrog does Instant Articles too, Should we expect your plugin puting that option in list soon?
    Also Analytics option added for AMP is good, but my blog only runs on google ads, PageFrog gave the option to add those. Is there any alternative for that?

  10. Joevren Curmi
    By Joevren Curmi on 13 March, 2016

    Yoast Seo is a great plugin, I use it on all my websites. What I wanted to ask is what is the difference between AMP and mobile friendly (responsive) website. Does AMP has a faster loading speed. Thanks

  11. Sonja
    By Sonja on 12 March, 2016

    Hi,

    Thanks so much for the articles, my AMP is taking shape nicely!
    Question: on AMP pages my social sharing buttons do not show up. That is a big part of my site. Any tips on how to get them to show?

    http://www.monkeyfistmedia.com/discover-your-social-media-power-posting-categories/amp/

  12. Andrea
    By Andrea on 11 March, 2016

    First of all, you guys are awesome – thanks for all of your work on this! It is all very confusing, and I appreciate your work to make things easier.

    Second ~ Is Google actually serving up AMP pages already in mobile searches? My understanding is that it is not, and that it will probably be quite awhile before they do?

  13. Steph Beck
    By Steph Beck on 11 March, 2016

    Hi all!

    I can see that Joost’s Facebook profile pic is used right under the H1, which is great.

    I believe it’s thanks to this line in the section:

    Does anybody know how to add this line to the section?

    Also, it seems my favicon doesn’t show on AMP, whereas Yoast favicon does show… any suggestion?

    • Steph Beck
      By Steph Beck on 11 March, 2016

      The code line didn’t show up on my comment above, it was:
      meta property=”article:author” content=”https://www.facebook.com/jdevalk”

  14. Alex
    By Alex on 11 March, 2016

    Never mind. Video seems to be workung just fine. My mistake.

  15. Alex
    By Alex on 11 March, 2016

    Thanks for this great plugin and tutorial.
    /amp/ pages are displaying just fine and analytics tracking seems to be in place.

    However, I’m wondering how to make a YouTube video appear on the /amp/ page. Can anyone show me the trick?

  16. Richard Aucock
    By Richard Aucock on 11 March, 2016

    Thanks so much for your ongoing work here, Joost and Team Yoast. Very much appreciated!

  17. Alberto
    By Alberto on 11 March, 2016

    I’m a bit confused, is amp applicable to pages or just posts and articles? AMP plugin clearly states it is not supporting pages or articles. Yoast glue plugin gives you the option to choose any page types? I am getting 404 on my /amp pages. Hope to get clarification soon. I understand it is early stages and as someone mentioned, Google might even can the project after a while.

  18. Jade
    By Jade on 11 March, 2016

    Hi Yoast team, thanks for the update.

    I’m getting a 404 on the amp ulr’s linked to pages, posts work fine.

    I managed to resolve the 404 on post amp url by re-saving my permalink settings – but cant seem to find similar for pages.

  19. Niall Flynn
    By Niall Flynn on 10 March, 2016

    Once I got mine fixed all indexed :) great new space cant wait to see what comes form this.

  20. Curt
    By Curt on 10 March, 2016

    I really liked the idea of PageFrog but sadly it caused all of our pages to get Google AMP deindexed since it would redirect new articles, but older articles would just go back to the original link. Since Google takes 4-7 days to show any changes on GWT for AMP you have to play the wait and see game. 4 days after installing PageFrog our AMP index dropped so we deactivated it.

    After waiting another 4 days, our indexed pages are back up and working great. It’s a great idea of what they’re trying, but as with anything, the less plugins you have to use on any site the better.

    I’m so glad Yoast is tackling AMP headon as Google has not made it easy for us…even though they have let us know that we’d better have it.

    We actually hired a developer as I knew this would be a headache but something important so we could have Adsense put in without using the PageFrog plugin, and if you look on the AMP site, they show you how to put your Adcode in. It doesn’t look that hard, but we had a developer do it and he makes everything look simple.

    The biggest lesson learned from this Google change is patience as I’ve seen many people making changes every day not realizing that on GWT the changes take days to reflect. A pain for all of us lacking patience, but worth learning a little bit of it.

  21. Charles
    By Charles on 10 March, 2016

    You guys are awesome! :) Thank you so much for the guide.

    I haven’t tried AMP plugin yet but will have a look at this over the weekend.

    Just a quick question:

    Do you recommend using any other plugin apart from AMP? I just bumped into this when I searched “AMP” in WP’s plugin directory. https://wordpress.org/plugins/accelerated-mobile-pages/ Description says that just activate and configuration is not required. Any idea about this plugin?

    • Melissa
      By Melissa on 10 March, 2016

      The plugins with the most authority are made by Automattic (The creator of WordPress itself) and Pagefrog. This is the Automattic plugin https://wordpress.org/plugins/amp/ that’s discussed on this page and works in conjuction with Yoast’s Glue plugin.

  22. Camilo
    By Camilo on 10 March, 2016

    I have a questions about next steps, if any? I may be missing something. Your post made it simple to understand and i added both plugins, AMP and Glue. I do see my blogs in the AMP format when I manually add /amp/ to the end of the URL on my phone. My questions is, why does it not default to /amp/ automatically when viewing on my phone?

    i do not have coding experience, but i am reading other posts (https://goo.gl/FjwmHR) that talks about adding code to AMP and non AMP posts. I am confused, do i need to do additional steps on WordPress when publishing a post to identify AMP and non AMP?

    My Google Console states i do not have any AMP on my site. Does this take time? or is it added to site index? (i just added the plugins a few hours ago)

    Thank you Yoast.

    • Melissa
      By Melissa on 10 March, 2016

      Camilo it doesn’t automatically go to /amp/ on your mobile device because the AMP pages are only meant to display in Google search results. Your AMP pages will be denoted by a lightening bolt in the search results and clicking on the link will take a visitor to the AMP page.

  23. Paul Stonier
    By Paul Stonier on 10 March, 2016

    Glad to see you guys looking at the indexing and checking for errors. I hadn’t even thought about that piece of it yet. I started with the Automattic app, but starting to consider Pagefrog. This gives me some good next steps.

  24. Brett
    By Brett on 10 March, 2016

    Thank you for these articles, they are very helpful in understanding what Google is up to now.

    I have a Woocommerce install with hundreds of products that use some complicated programming to allow for custom functionality that we absolutely require to operate. I am concerned that this additional javascript programming will be stripped from the /amp versions of the posts making it impossible for my visitors to actually purchase anything from the site.

    Does anyone have experience working with AMP and Woocommerce? Especially the image lightbox and any plugins that add additional functionality to the shopping cart.

    You can see what I am talking about here:

    http://coleprintmarket.com

    Thanks,
    Brett

  25. Jérôme Lacroix
    By Jérôme Lacroix on 10 March, 2016

    Thanks so much for guiding us through this AMP Journey! You’re a leader and it shows!!

    One question for you: in the new AMP section of your SEO plugin, could the textbox field be used to pass an GA event? I want to set a timeout that trigger an event after 60 seconds (like i do in the Analytics plugin over the personalized code field).

    If it is possible, what would be the code to use?

    Many thanks for your great products and support :-)

  26. Melissa
    By Melissa on 10 March, 2016

    Does anyone else use Yoast + All in One Rich Snippets (for schema markup)? Maybe I’ve missed something all these years, but Yoast doesn’t use enough schema tags, so we use both plugins. All in One throws errors in Google Search Console and no one in the Automattic AMP plugin forum has been able to address my problem yet.

  27. Portal Hoy
    By Portal Hoy on 10 March, 2016

    Hi Joost!
    Schema: image [ImageObject]: Always return the default image any way to change it for use featured image as in <meta property="og:image"

    Example URLs:

    Regular URL: http://portalhoy.com/windows-10-store-recibe-una-nueva-actualizacion/
    AMP URL: http://portalhoy.com/windows-10-store-recibe-una-nueva-actualizacion/amp/

    Plugin work very well. Great job as always!
    Thanks!!

  28. Ryan
    By Ryan on 10 March, 2016

    I installed GLUE and disabled PageFrog. Now I am seeing both the logo and the site name in the header. Very weird, any ideas?

  29. Mark
    By Mark on 10 March, 2016

    Hey Joost, Just wondering if the update automatically ensures all posts / pages are enabled for AMP. I noticed on the Pagefrog plugin that they had check boxes to ensure all posts / pages were enabled. Many thanks, the update looks great! Mark

  30. Fabrizio
    By Fabrizio on 10 March, 2016

    Hi,

    it looks like that /amp URLs are not working anymore now. I tried disabling Glue and Pagefrog, but I still get 404 not found. ?amp=1 URL seems to be working.

    I am unable to find the root cause of this, I tried disabling Glue and Pagefrog but still nothing. I also re-saved permalink settings on WordPress, with no effects.

    Is anyone having the same problems? I read something like that in PageFrog support page on WordPress.org but I am puzzled because these url still do not work after disabling that plugin, so I am trying to ask here to see if I am the only one and if anyone can come up with a suggestion to have them working again.

    Also, I will have to keep using PageFrog for now for better styling and, more importantly, for AdSense integration (luckily the preview is not crashing on my browser).

    Thank you

    • Jade
      By Jade on 11 March, 2016

      I had the same issue,

      Go to Settings > Permalinks and save that page
      That should resolve the issue

  31. Kim
    By Kim on 10 March, 2016

    I’m doing the GA code wrong, I can see the string at the bottom of the article – I’ve tried it as UA-5XXXXX03-1 and as 5XXXXX03-1 so what’s the mistake that I’m making, if you don’t mind clueing me in? :)

    • Kim
      By Kim on 10 March, 2016

      I see that the UA inserts properly in the sites I’m using Yoast for analytics on, it’s the ones that are using something else that I’m not sure how to format the string

  32. Katie
    By Katie on 9 March, 2016

    Thanks for this. Can you add your site’s Google Analytics code? or do you need to create a new property specifically for AMP?

    • Bryan Barrera
      By Bryan Barrera on 10 March, 2016

      If you have Google Analytics installed by YOAST then AMP (plugin by yoast) will inherit your GA id off of this.

      You don’t necessarily need to create a different GA account for AMP.

  33. Bryan Barrera
    By Bryan Barrera on 9 March, 2016

    Thanks for sharing this great and useful information!

    I set up 2 of my WordPress installs with AMP in less than 2 hours thanks to your walkthrough!

    One suggestion I do have for your guide/walkthrough is to add how a user can validate his/her install of AMP.

    One way to validate your AMP installation is by adding
    #development=1 – at the end of your blog post. Example;
    http://domain.com/this-is-my-blog-post/amp/#development=1

    Here is the reference from the AMP project page:
    https://www.ampproject.org/docs/guides/validate.html

    Thanks again! Cheers!

    – DailyReup.com

    • Joost de Valk
      By Joost de Valk on 9 March, 2016

      That was actually in an aside in the article above ;)

      • Bryan Barrera
        By Bryan Barrera on 10 March, 2016

        I didn’t see that! Thanks for pointing that out.

  34. Ryan Smith
    By Ryan Smith on 9 March, 2016

    Your awesome! I was doing some of this with the functions.php but this will make it much easier. I had the same issues with Pagefrog I had already disabled it.

  35. Dominik Stein
    By Dominik Stein on 9 March, 2016

    Finally amp is working on my site.
    But Yoast, can you integrate a option for ads?

    I think it’s very important for a lot of administrators.

    • Joost de Valk
      By Joost de Valk on 9 March, 2016

      There’s certainly a section of people who want ads to show, but it’s not my main focus, sorry.

  36. Diego
    By Diego on 9 March, 2016

    Does it works with Google AdSense like PageFrog?

    • Joost de Valk
      By Joost de Valk on 9 March, 2016

      No.

      • Aumusse
        By Aumusse on 10 March, 2016

        When the default image is set Yoast AMP, actual Feuterd image shows on the AMP page. When I run it through Google’s structured data testing tool, it showing only default image, also Google Sarech Mobile shows only default images. I deactivated both AMP Glue for Yoast SEO & AMP Plugin

  37. Aumusse
    By Aumusse on 9 March, 2016

    Great work Yoast Team. I really appreciate your effort.
    I think there is bug your about new update, New articles with featured image also took by default

    See here: https://goo.gl/s2xjHl

  38. Sikhar Dhawan
    By Sikhar Dhawan on 9 March, 2016

    Awesome update. Really love your efforts man!!

  39. Kim
    By Kim on 9 March, 2016

    Oh, I think I love you guys! My only question (not that you want to hear this) is will you be working with Automattic on the FB IA plugin to do the same thing that’s been done with the AMP?
    April isn’t that far away and getting the IA traffic is important, imo.
    I’d prefer not to run PF for partial use if there’s already going to be a solution that’s integrated with the things we already use.

    • Joost de Valk
      By Joost de Valk on 9 March, 2016

      We will definitely make sure Yoast SEO integrates well with the Automattic Instant Articles plugin.

      • Kim
        By Kim on 9 March, 2016

        Sweet! Beautiful results, the formatting is great and looks good!

  40. Abhishek Gupta
    By Abhishek Gupta on 9 March, 2016

    Thanks Great Post Helped me a lot

  41. Josh
    By Josh on 9 March, 2016

    Any word on how to keep an AD on the page? Thanks

    • Dalee
      By Dalee on 9 March, 2016

      Do u use Google Doubleclick or Adsense? I have a nice snippet for both….

      • josh
        By josh on 10 March, 2016

        I’m using Adsense on the site.

        • michele ficara
          By michele ficara on 10 March, 2016

          me too did we wait a future plugin release to inject adsense in amp pages like pagefrog?

  42. Murray Anderson-Clemence
    By Murray Anderson-Clemence on 9 March, 2016

    I see your AMP page is using Merriweather as a base font. Does AMP or PageFrog include Google fonts?

    https://yoast.com/wordpress-amp-part-ii/amp/

    • Kim
      By Kim on 9 March, 2016

      The Merriweather selection is the Automattic AMP selection, I believe.

      • Joost de Valk
        By Joost de Valk on 9 March, 2016

        Yeah Merriweather is the default in AMP, funnily enough it’s the font we use on Yoast.com for body text already too :)

  43. Keith Davis
    By Keith Davis on 8 March, 2016

    Many thanks for the update and the work you guys have done on the Yoast SEO AMP Glue plugin.

    Looks as though it’s all starting to come together on the AMP front.

  44. Oscar Maldonado
    By Oscar Maldonado on 8 March, 2016

    I thought the crash just happened to me!
    Great update Joost, congrats to you and your team.

    Greetings from Mexico. :D

  45. Brin
    By Brin on 8 March, 2016

    Very nice work – really pleased you’re making so much effort to tackle this! Thanks. Keep at it – and keep the updates, improvements and general AMP-related awesomeness coming! :)

  46. Rob
    By Rob on 8 March, 2016

    Great update, thanks!
    One question, the Analytics code: the whole script or only the number?

    • Joost de Valk
      By Joost de Valk on 8 March, 2016

      If you want to do it manually, you need to put in the whole script.


Check out our must read articles about WordPress