Meet the front-end SEO inspector in Yoast SEO Premium

Yoast SEO Premium has a new feature that helps you quickly check your SEO settings. The front-end SEO inspector is designed to help you do just that — inspect the metadata your post outputs right from the front end. You no longer have to open posts in the WordPress editor to see what you set up! You have your SEO scores, meta tags, Schema output, and much more available on the front end. Checking your SEO work has never been easier!

What does the front-end SEO inspector do?

With the front-end SEO inspector, you can check the settings and output for a post. The inspector flies in from the side of the screen, and you can access it from the front end of your post. To start, hover with your mouse over the Yoast icon in the WordPress bar at the top of your screen and click the Inspect button.

In the fly-out, you get information about your post — ranging from the focus keyphrase you set for the page, to the Schema structured data the post outputs. You can review the output to see if everything is as you would like it. If you want to change your post, click the ‘Edit Post’ button at the top. This takes you to the post editor, where you can make changes.

Click the ‘Font-end SEO inspector’ button in the Yoast dropdown menu to open the tool from a page on your site

This tool is especially useful and handy for beginner SEOs and newcomers to the SEO world. That’s because learning SEO involves learning about basic aspects of technical SEO. Like the concept of meta tags and the various tags that Google sees on your page. At the same time, it can be difficult to learn about these things, as you might not know where to look for them on your website. The front-end SEO inspector helps to familiarize yourself with such concepts, as you can easily view your SEO settings and metadata without having to spend time looking.

Components in the front-end SEO inspector

The front-end SEO inspector in Yoast SEO Premium consists of several parts. At the top, you get insights concerning the content of your page: the focus keyphrase you set and the bullets for the SEO score and the Readability score. Green is good; red needs improvement.

The front-end SEO inspector’s second part consists of the page’s meta tags. Here, you’ll find things like the title and meta description you set for the post, plus information about the images. You’ll also see the OpenGraph output, the canonical you set for the post, and the meta robots settings.

The third part is all about Schema structured data. Here, you’ll see the total output of Schema by Yoast SEO. This is hierarchical so you can see the graph and all the different parts. Click on the arrow to open and close parts to inspect. Click on the clipboard to copy the selected piece of structured data to test in the Rich Results Testing tool or one of the other tools to test schema.

Focus keyphrase and checks

Setting the focus keyphrase is one the most important things you can do in Yoast SEO. This combination of words helps Yoast SEO understand what you want the post or page to optimize for. By setting one, the SEO and readability analyses can do their work — and provide you feedback in the form of colored bullets.

You can see the word you set for the post or page from the front-end SEO inspector. In addition, you can also see how the content scores. Try to aim for green bullets! Not every Yoast SEO assessment bullet has to be green, as long as the overall two bullets are green. If the inspector shows a red bullet, you might have to work on the content more. Hit the ‘Edit Post’ button to go to the editor to work on it.

Meta tags output

The meta tags are essential data the search engines use to read your page. It outputs information such as when a post was published, who did that, where the images are to be found, how big these are, et cetera. Here, search engines can also find the robots tags you set and the canonical this page is supposed to have. It is a good idea to quickly check this data to be sure that you output the right stuff for search engines to gobble up.

The front-end SEO inspector shows the output in a long list of details:

  • Meta tags like title and description
  • The canonical you set for the post or page
  • Various OpenGraph tags like locale, type of content, title, description, images, and publication time
  • Information about the author
  • Various Twitter tags like image type and estimated reading time
  • The meta robots you set up for this post, usually being index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1

Schema structured data output

One of the most excellent parts of the front-end SEO inspector is the part where you check the structured data output for the page. This is slightly more interactive than the other options, as it lets you drill down into the Schema graph for this page to examine all the different parts. In addition, there’s a handy clipboard button that lets you copy that particular piece of structured data for you to paste into structured data testing tools.

The visual aspect of the Schema output makes it very clear how the different pieces fit into the graph of your page. Everything is neatly indented, and the arrows let you expand other parts of the structured data. This makes checking what you need to study easier than going through the whole graph. You can also drill down as often as you want, depending on how deep your structured data goes — which is massive if you are using Yoast SEO!

Quickly inspect the structured data that Yoast SEO generates for an article

That’s the front-end SEO Inspector in Yoast SEO Premium

In this post, we briefly introduced the front-end SEO inspector in Yoast SEO Premium. The inspector is in beta, and we expect to improve and expand the functionality in the future. The inspector is a quick and easy way to get more insights into the SEO settings of your post, right from the front end. Not to mention, it’s a great tool for those who are learning SEO. Try it out and see what you think!

Coming up next!