My Thoughts on the Yoast SEO Gutenberg Integration in Yoast 8.0

Yoast SEO

I’ve been working in Gutenberg for the past 6 weeks on a new site I just launched. I’m trying to give it a fair shot, as well as help provide feedback to the development team. With Yoast SEO’s latest release, 8.0, they’ve added Gutenberg support, as well as updated the Yoast meta boxes for everybody. In this article, I’ll share my thoughts on the Yoast SEO Gutenberg experience.

NOTE: This is mostly constructive criticism, and I hope it can perhaps give the Yoast team a few things to consider. I want to make it clear that, overall, I love their plugin and appreciate all the work they’ve put into it.

Black Friday Deals are Here! Shop over 50 WordPress themes & plugins now through Cyber Monday. View Deals →

I’m using Yoast 8.0 and Gutenberg 3.6.2, both the latest versions at the time of publication (Aug 18, 2018).

ALSO: Read Yoast’s official post about the 8.0 release, which includes a full overview, along with some things they have in store for the future (modals & Gutenblocks!).

No Automatic Sidebar Switching

After switching my sidebar to Yoast SEO, once I go back and click on a block, the block options don’t automatically appear in the sidebar. The sidebar keeps all the Yoast SEO options active. I have to go back and click the gear icon to get back to the block options.

Yoast 8.0 Gutenberg Sidebar block options switch
See how the Yoast SEO sidebar remains active after clicking back to several paragraph blocks?

I realize some people might want to continuously check their SEO as they’re writing and adding new content to the page, but I suspect most would rather see block options reappear. I suspect most of us use/check the SEO suggestions after we’re finished writing (before we publish), or each time we make new edits to an existing piece of content.

It just felt like the block options should start reappearing, and they didn’t.

How the Accordions Work

There are two things about the accordions that I would change, and this goes for both the ones in the sidebar, as well as the ones below the content:

  • Only allow one section to be open at a time (when you click one section title, close all the others)
  • When clicking on an section title, autoscroll to the top of that section

As you can see in the animation below, I scroll down to open up “Cornerstone Content,” but when I click it, nothing shows up. The cornerstone content opens up, but it happens out of the viewport, so I don’t see any visible change.

I would love to see the “Focus Keyword” section close, “Cornerstone Content” open and get anchored near the top of the screen so it’s section contents are immediately visible.

Yoast SEO 8.0 Gutenberg accordion sections

Mobile Meta Boxes Are Too Narrow

The 3 icons Yoast SEO uses for SEO, sharing & advanced settings are placed to the left of their respective sections. This works fine on desktop and larger screens because there’s plenty of horizontal space.

But on mobile devices, it makes for really narrow meta boxes. Too narrow in my opinion, especially when viewing the Snippet Preview.

Yoast SEO 8.0 Gutenberg mobile meta boxes
Blue lines represent the wasted horizontal space. The pink lines show how narrow the snippet preview is.

I’d love to see the icons moved to the top, just below the “Yoast SEO” meta box title. There’s plenty of room for 5 icons in one row across the top:

  • Traffic Light for main SEO options
  • Share Icon for sharing options
  • Settings Cog for advanced settings
  • Question Mark for help
  • Star for premium upgrade

🙂 vs. 🚦

I’ve always found the use of the Yoast traffic light a bit strange, but it appears to be a huge part of their brand. In Yoast 8.0, they’ve introduced smiley faces to provide feedback on the optimization of your focus keyword.

  • Good: Green smiley face
  • OK: Orange neutral face
  • Bad: Red sad face
Yoast SEO 8.0 smiley face vs traffic light
You can see both a smiley face & traffic light being used in close proximity

While I like the use of smiley faces more than traffic lights… now we have both. It doesn’t seem to jive for me. I think they should pick one or the other, and use it consistently.

In the example above, they also appear to be two different colors of orange. I didn’t check green & red, but at the very least, I’d make sure I used the same colors here.

Preferably, I’d love to see smiley faces used everywhere.


I’d love to hear your feedback. Have you tried Yoast SEO 8.0 with Gutenberg yet?

And if you’re on the Yoast team, I’d love to hear from you. Were these decisions intentional? Would you consider implementing any of my suggestions?

2 Commentson "My Thoughts on the Yoast SEO Gutenberg Integration in Yoast 8.0"

  1. /

    Hi Dave, thanks for taking the time to write down your thoughts about our new Gutenberg integration! It’s definitely got room for improvement still, and you raise some good points that we’ve also been thinking about or are actively working to improve. So I wanted to drop by and briefly respond to your suggestions:

    After switching my sidebar to Yoast SEO, once I go back and click on a block, the block options don’t automatically appear in the sidebar

    This is actually an issue in the Gutenberg sidebar API that we use to register our sidebar. The way it behaves is not by our plugin’s design, it’s part of the sidebar ‘container’ that we hook into. We just happen to be the first ones using it ;) We’ll see if we can get that changed, good point! In fact, we’ve already begun talking to the Gutenberg team about it.

    Only allow one section to be open at a time

    This would certainly help reduce some scrolling, yes. The length was a bit of a side-effect of the challenge to fit everything into this new, much smaller space. So only allowing one open section could be a way to improve that on the short-term. We’ll work that into a forthcoming release.

    When clicking on an section title, autoscroll to the top of that section

    Great idea, we’ll try to implement this in an upcoming release.

    Mobile metaboxes are too narrow

    This is a fair point, and we are working on it. We hope to eventually also ditch these side tabs, and in an upcoming release the snippet and social editors will appear in their own modal to give them all the space they need.

    Smileys vs stoplight

    Aye, we are moving away from the stoplight branding slowly but steadily. It was a nice metaphor but it just doesn’t work for all cultures, not to mention people with colour blindness or other visual impairments. It’s why we now have smileys as well as color to differentiate the bullets. We’ve updated the plugin icon already a little while ago, and removed it from other places, so the stoplight icon in the metabox tab is the last surviving one ;) we’re working on a new icon for it. And one other consideration was that with all the changes we made to the metabox we wanted to keep a few classic things there to anchor our users to, such as that icon and the tabs on the side. But we are looking at unifying everything between metabox and sidebar soon.

    Do let us know if you have any more feedback after using the plugin more!

    → Reply
    1. (Author) /

      Tim —

      I really appreciate you taking the time to respond so thoroughly.

      I had a feeling that first issue (sidebar switching) was a Gutenberg thing that was out of your control. All your other comments sound great. Looking forward to seeing the plugin progress over the next several months.

      I know your team has been very active contributing to Gutenberg, and I want you to know that I appreciate all the work you’re doing there.

      Thanks for stopping by.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.