How To Add ‘HowTo Schema’ To Your Website With Rank Math

In this article, we are going to show you exactly how you can add HowTo Schema using Rank Math’s easy-to-use Gutenberg block.

Thanks to Rank Math’s HowTo Block adding structured data to your posts and pages has never been easier.

 

1 What Is HowTo Schema Markup?

HowTo Schema should be used to indicate to Google (and other search engines) that your content is, in fact, as you might have guessed a HowTo guide. A HowTo guide is a post or page that walks a user through a set of steps to successfully complete a specific task – examples include things like how to tie a shoelace, and how to change a light bulb.

When pages are properly marked up using structured data, and in this case How-To Schema, they may be eligible to appear as a “rich result” (what is otherwise referred to as a rich snippet) in Search.

Before we dive into the simple setup process, let’s take a quick look at the benefits of using HowTo structured data on your website:

2 The Benefits of Adding How To Schema To Your Website

Winning HowTo rich snippet is beneficial as it helps increase the overall visibility of your website since it occupies additional space in search engine results pages and provides users with a method of interaction.

But that’s just the beginning, here are the other benefits:

• Increased visibility – as you can see in the image above, interactive results are more appealing to searchers and take up more space on screens visually.
• Eligibility for Voice Search Actions – Making use of HowTo Schema can also make your site eligible for an action that is made available in the Google Assistant. This can potentially help your site be the source of answers for people using voice search to ask questions. For example, if – using Google Assitant – someone asks “how can I download a YouTube video to my iPhone” and your article is the best answer to the question it may be used.

By design – a page eligible for the HowTo rich results gets additional space below the regular search snippet, just as is the case with other rich snippet types. And, as you’d expect, the additional real estate in Google search tends to equate to a better click-through rate.

If you’re active in the community and have attended, conferences and webinars recently you’ll know that it’s very difficult to go without hearing structured data come up at some point. This is because Google is focusing on this heavily at the moment mainly because the web is evolving.

From simple, text-based content and text search, we now have other forms of media making it into search including video, audio and image content.

Searchers are now no longer mainly searching from desktops, people are using mobile phones, and they’re even searching on their smart TVs for crying out loud. To improve this experience, Google needs to understand data like never before and that is exactly where structured data comes in.

3  How Do I Add HowTo Schema in WordPress?

Once you’ve installed the Rank Math plugin, all you need to do is create a new post or page (or open an existing one) that you’d like to add HowTo Schema to. It’s important to note that Rank Math only supports the WordPress block editor when adding the HowTo Block so if you’re using the classic editor on your website, you will have to upgrade to the Block Editor temporarily.

Once you’re in the editor, simply add a new block to the post using the “+” button to see all the available blocks, or search for How To using the “/” shortcut and you’ll see the HowTo block as shown below:

Click on the block to add it to the post and this is how it should appear in the editor once it has been added to the post:

As you can see, there are a number of options to configure in a single HowTo Block, and configuring each of them correctly is important if you want your page to be considered for rich results.

If any of the options are not configured according to Google’s Structured Data Guidelines, then your page is likely to be not considered for rich results. So let’s take a closer look at each of the individual options available:

3.1 Final Image

In the Final Image section, you need to add an image that represents the final result of your HowTo visually.

For example, if your post is about “How to tie your shoelaces,” then the image here should be of shoes with the laces tied.

This image is optional to add but highly recommended, as seeing the final results is a compelling motivation for users to read through the entire result.

To add a final image, click the Add Final Image button.

The WordPress Media Manager will open up. There, upload or select the image for the Final Image.

And the image will be added as the Final Image. You can use the 2 buttons on the top right of the image to edit or delete the image.

3.2 Main Description

Here you need to describe what you’re trying to accomplish. The field is meant for a description of your goal, not the process of reaching the goal. For example, if you’re trying to talk about “How to build a dog house,” then do not talk about how you will build them here—that is what the individual steps are for.

Here, you could say something like, “In this post, we will learn how to build a dog house for your furry mate. We will consider the various sizes, materials, and costs, and come with a brilliant design for your canine.”

This field, as an overview of what you’re trying to accomplish, is important to establish before you set to show how to do it. Just fill in the description of the HowTo in the text area.

3.3 Duration

The duration is a simple field, and you just have to enter the estimated time that the entire task will take. The duration field is optional and is disabled by default. Click the toggle button to enable the field.

When enabled, you’ll see these options.

The first field is just a label that you give to the duration. If we use the shoelace example, you could enter “Time to tie shoelaces,” there.

The rest of the fields represent Days, Hours, and Minutes. Just enter the actual duration in these fields.

And this is how it should appear on the post.

The duration field is optional to configure (that is why it is disabled by default), but the more information you can give to Google, the better it usually is.

3.4 HowTo Step

Next comes perhaps the most important part of the entire HowTo Block; the actual step that needs to be performed. The step itself is made up of 3 parts. Let us discuss each of them.

3.5 Step Title

This is where you would give a title to the step. Do not describe the step here; just use a few words to say what you’re going to do. For example, using our two-loop shoelace knot, for the title, we’d say, “Make a loop with each of the ends.”

3.6 Step Image

Here you will add an image for the specific step that you’re talking about. As we’ve mentioned earlier, adding images is not mandatory but highly recommended. As the number of smart devices and assisted devices explode, visual content like images will be consumed at a much higher rate than usual.

1. To add an image, click the Add Step Image button.
2. When the WordPress media manager opens up, upload or select the image in the gallery, and click the Select Button.
3. The image will be added to the step.

Similar to the final image, you can delete or change the image using the two buttons in the top right corner of the image.

3.7 Step Description

This is where you will describe the step in detail. Make sure to mention all the important assumptions, and write the description in a way that people listening to it are able to follow along without any problems. Yes, Google is already using the HowTo Structured-Data for voice search and smart devices.

As voice search becomes a bigger part of the web, the number of people that listen to the web will rise, so keep your content ready.

Continuing with our shoelace example, here is how we would describe the step. “Create a loop with on both ends of the shoelace, using around four-fifths of the shoelace for the loop. Make sure you are pulling the laces tight and holding the loop between your index finger and your thumb”. As you see, the instructions are specific, simple, and easy to follow.

3.8 Adding New Steps

Till now, we’ve added a single step using the HowTo Block. But, you need to perform more than one step to finish a task most of the time. So, you’ll need more steps inside your HowTo Block. To add another step, click the Add New Step button at the bottom of the last step.

A blank step will be created below the last step.

You will need to follow the same instructions and fill in the details in this step as well. Repeat the process of adding steps and filling in the information until you have described the process in sufficient detail.

3.9 Deleting Or Hiding Steps

The HowTo Block offers functionality to delete individual steps or hide them temporarily. Both of these are quite useful when updating old content, or even testing out content formats.

To hide any step, click the eye icon on the top right of the step. When a step is hidden, it will be grayed out, and the icon will change as well.

To delete a step, click the trash icon next to the eye icon.

4 Rank Math HowTo Block Options

Since the HowTo data is added as a block, it supports block-level customizations as well. Using this, we’ve built some exclusive customization features to the HowTo Block both for the structure, and the styling.

Let us explain the customization options.

4.1 How To Options (Structure)

The HowTo Options dictate how the structure of the elements. In simple words, it defines the HTML wrappers that are used the wrap the content. Here are the options.

• List Style: The steps in a HowTo are presented as a list. This option lets you choose whether the list is presented as an ordered list, an unordered list, or not a list.
• Title Wrapper: The step titles are displayed as heading on the page. This option lets you choose if the heading is H2, H3…upto H6. You can even ditch the headings and choose a <p> or <div> as a wrapper.
• Main Image Size: This option lets you pick the size of the main image. You can choose between thumbnail, large, medium, and full size.
• Image Size: This option lets you pick the size of the images for the steps. You can choose between thumbnail, large, medium, and full size.

4.2 Styling Options

You can style your HowTo by using the custom styling options built into Rank Math. Here are the options that you can configure and what they do.

• Title Wrapper CSS Class(es): Here, you can enter the CSS Class(es) that will be applied to the step titles.
• Content Wrapper CSS Class(es): Here you can enter the CSS Class(es) that will be applied to the step descriptions
• List CSS Class(es): Here, you can enter the CSS Class(es) that will be applied to the list containing the complete How-To.

5 Previewing The HowTo

Once you’ve added some content, you can use WordPress’s preview feature to preview how the content in the HowTo will appear for the end-user. Here is an example output.

6 Important Things To Know About How To Schema

Although How-To structured data is fairly easy to understand and, thanks to Rank Math, very easy to implement – there are several things to keep in mind when using it.

• You should not be using HowTo Schema for anything that violates Google’s guidelines – this includes, hate speech, sexually explicit content, profanity, illegal activities, promoting dangerous or violent content, or harassment is against the guidelines. So, don’t start writing HowTo guides about how to get away with murder…
• Make sure that every action needed to perform the task and achieve the desired result is properly marked up (and nothing else). Do not add an introduction, conclusions or personal experiences in the HowTo block steps.
• Do not add more than one HowTo block to the same page.
• All the steps for the HowTo guide should be present on the same page as if it is distributed over multiple pages, Google may not consider your website for rich results (this also wouldn’t make sense to do so logically).
• The page itself must be specific to what the HowTo guide is about, do not include a HowTo section on a page about something very general. Instead, create a page dedicated to the HowTo guide that you can mark up using structured data.
• It is highly recommended to include helpful images for each HowTo step but ensure that you are only doing so with images that are directly related to each specific step.
• Do not use HowTo Schema to advertise products and services. In simple terms, this means don’t use HowTo structured data for a query where you simply advertise a product to achieve the desired result of the HowTo guide. In addition, the HowTo Schema should not be used for articles, blog content, or opinionated content – it should be reserved only for discrete, step-by-step instructions.

7 Validating HowTo Schema

As is the case with other types of structured data, such as FAQ Schema, mistakes or any slight ommissions will result in your site not winning the rich snippet that we’re all aiming for. Therefore, it goes without saying that it is extremely important to ensure that the structured data that you add is correct.

Using the Rank Math plugin takes the guesswork out of the process, but validating the Schema is still an important part of your workflow – so here are the tools you need:

• Google’s Structured Data Testing Tool
• Google’s Rich Results Testing Tool

8 Frequently Asked Questions

9 Final Words – Start Taking Advantage of HowTo Schema

We hope that you found this guide useful in both understanding the importance of HowTo Schema as well as guiding you through the process of adding it to your pages.

Why not go through some of your existing content and see if any of it would qualify to be converted into a comprehensive HowTo guide using Rank Math’s HowTo Schema block to drive more traffic to your site?

If you have any questions or run into any problems when using Rank Math’s HowTo Block, you’re always more than welcome to get in touch with our dedicated support team by opening a ticket on the forum. We have expert staff available 24/7 and they’d be more than happy to guide you through the process.

Have any other questions about HowTo Schema or want to join the conversation? Tweet @chiasefree. 💬