By now, everyone probably knows what schemas are, and why they’re important to search. So instead of a long-winded explanation of what it is, I’m just going to skip over to the explanation. Schema.org has been constantly adding new structured data to the standard, and website owners are finding newer ways to integrate them into their sites.
Unfortunately, schemas as they stand today face two problems:
The Problems with Schemas
First, their syntax is confusing. What’s clear to machines tends to be pretty unclear to human beings and vice-versa. And since the purpose of schema markup is to tell search engines what the webpage is about in no uncertain terms, it becomes pretty muddy to the rest of us.
The reason for this is that structured data is written either in JSON format, or in microdata. And if you try and implement structured data directly from schema.org, you’ll see what a pain it is to understand.
The second problem is that there’s no well-defined way for CMSs like WordPress to include this structured data in their post editor. This meant we had to use a bunch of workarounds and external scripts. It was messy.
Yoast + Gutenberg Solves the Problem
I’ve not hidden my annoyance with Gutenberg. I think it’s designed by programmers who don’t understand how writers create content. But I do have to admit that it makes it easy to integrate structured data into your articles with the right plugins.
Leading the way is “Yoast”. Yes, the same one we all use for our SEO optimization. Efforts. So for this tutorial, I’m going to assume you have to following installed in WordPress:
Let’s get to it.
How to Add FAQ Structured Data
We can add a new FAQ block in Gutenberg using the shortcuts we saw in an earlier article. Just type slash (/) and start typing “FAQ”. The block should show up:
Select the block and follow the prompts. Add a question, and then the answer. Once you’re done, you can add the next question, and the next answer by clicking the plus (+) sign below the block labeled “Add question”.
Continue doing this till you’re done. When you preview the post, you can see that they’ve been added in a list like this:
Before saving the post, you might want to validate the schema.
Validating your Structured Data
Once you can view your post as a preview, you can check out the HTML that it generates, and paste it into Google’s schema validation tool. This what we get:
As you can see, the schema validates nicely. Google has picked up our questions and answers with 0 errors and 0 warnings!
Adding “How To” Structured Data
In a similar way, we can add “How To” data to a post via a “How-To” block in Gutenberg like this:
We add the steps one by one, and the description of the steps. And we can once again add new steps using the plus (+) icon:
Continue on until you’re done and validate the data as before.
Styling the Headings
The Yoast content blocks won’t apply heading styles to your steps, so that might be a problem. Instead, you can use the settings section on the right-hand side apply various classes to the steps and questions and then style those separately via CSS. It’s a way to make everyone happy, since not all will want to apply the same CSS rules to their layout.
Using the FAQ and HowTo schemas in your articles is a great way to get more visibility and make search engines understand what your site is about.