With the launch of Yoast SEO 8.0, we’ve released our first real integration with Gutenberg. Now, with Yoast SEO 8.2 we took the first step into how to combine the power of Gutenberg with the field of SEO. More specific: the user-friendly implementation and usage of structured data.
I won’t go into the technicalities, so if you are new to structured data, read all about it here. But what we did – in short – is introduce a content block that makes it easy to add Schema.org support for specific types of content. In this case the How-to block.
The How-to block
With our How-to block, you can now add a specific step-by-step set of instructions to a post or page. Or as Schema.org phrases it: “An instruction that explains how to achieve a result by performing a sequence of steps.”
This list gets served as a structured data code snippet to help search engines get a better understanding of the content of your page. And in the future, Google will show a How-to block as such in its search results. So, that’s a lot of technical stuff happening in the background. But how does this block actually look on the front-end of your website? Well, that’s something you control yourself!
Interested in more in-depth information about specific HowTo structured data? Read all about it here.
Our How-to block can be broken down into three elements. The total time (a paragraph), the description (a paragraph) and the list of steps (an ordered list). Each step is subsequently treated as a section consisting of a name and a paragraph with the actual explanation. The markup:
<div class="schema-how-to wp-block-yoast-how-to-block">
<strong class="schema-how-to-step-name">Name of step 1</strong>
<strong class="schema-how-to-step-name">Name of step 2</strong>
<strong class="schema-how-to-step-name">Name of step 3</strong>
We’ve set some reasonable defaults for the block (such as emphasizing the name of a step by wrapping it inside a <strong> tag). Besides that, it will inherit the styling you have in place for these standard HTML elements and be displayed as a standard numbered list (see example below). If you want to take the styling of the block a little further and actually customize it, then read on! There are a few approaches that we want to walk you through.
Styling the How-to block
As a WordPress theme developer or a web designer, we assume that you have a basic understanding of CSS. If you want to dive deeper into CSS or a preprocessor like SASS or LESS, we believe that https://css-tricks.com/ or https://www.smashingmagazine.com/ might be a good starting point.
Styling the supplied class names
As you can see in the code block above, all the elements within the How-to block come with their own specific class names, which can be targeted and styled to fit your needs. To sum it up:
- The ‘shema-how-to’ class for the block itself
- The ‘schema-how-to-total-time’ class for the time required to time follow the instructions
- The ‘schema-how-to-description’ class for the block description
- The ‘schema-how-to-steps’ class for the list of instructions
- The ‘schema-how-to-step’ class for an instruction section
- The ‘schema-how-to-step-name’ class for the name of an instruction step
- The ‘schema-how-to-step-text’ class for the actual explanation of a step
Styling by setting your own custom class names
It’s likely that you have a specific convention for naming different HTML elements in your projects, or that you already have a utility class in place that helps you style all your list elements. If that is the case and you don’t want to work with the supplied class names, it’s possible to add your own custom class name to the block.
In the image above we’ve added two custom class names (‘list-class and ‘block-class’). Under ‘Settings’ we’ve added a class name that only applies to the list element. Under ‘Advanced’ we’ve added an additional class to the block itself. Note that these class names will be added to the already supplied class names.
The How-to block on Yoast.com
If you’re a regular visitor of our knowledge base, you might have noticed that we have specific styling in place to emphasize our step-by-step instructions (e.g. how to install Yoast SEO Premium).
Interested in how we did this? The code block below shows the lines of CSS (or actually SCSS) we have in place to achieve the above result.
We’re planning on releasing a lot more structured data related content blocks, that integrate with Yoast SEO. Next up is the FAQ block! Besides that, we’ll keep you posted on the possible release dates and will return with more in-depth tutorials on how to work with these blocks and style them to fit your needs. Interested in what Gutenberg can do for you? Read Joost and Omar’s vision on the future of Gutenberg here.
Coming up next!
- Event December 09, 2023 Team Yoast is at Attending, Organizing, Sponsoring WordCamp Ahmedabad 2023! Click through to see who will be there, what we will do, and more! See where you can find us next »
- SEO webinar 12 December 2023 Learn how to start your SEO journey the right way with our free webinar. Get practical tips and answers to all your questions in the live Q&A! All Yoast SEO webinars »