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

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

95 / 100

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.

HowTo Schema Example

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:

Adding HowTo Block

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:

Rank Math HowTo Block

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.

HowTo Final Image

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.

HowTo Final Image Edit

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 is mandatory, 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.

HowTo Final Description

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.

HowTo Duration

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.

HowTo Duration in Frontend

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.

HowTo Step

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.

HowTo Add New 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.

HowTo Hide Step

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)

HowTo Block Options

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 or 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.

HowTo Schema

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 stalk people
  • 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:

8 Frequently Asked Questions

I’ve added the HowTo Schema on my pages. How do I check if they are properly implemented?

Rank Math properly adds the tags, and you don’t need to test them to confirm. But, if you want to do so anyway, you can test your page source code with the Google Structured Data Testing Tool or test a live URL with the Google Rich Result Test.

I’ve added the How-to Schema to my posts. When can I expect them to appear in the search results?

There is no set time when, or if, your page will start appearing as rich results, even if you have the correct markup. It is up to Google to include your website in the search results, and the factors they consider to do so are not made available publicly.

I see the rich results on my mobile phone, but not on my desktop, what’s wrong?

That is perfectly fine, as HowTo Rich Results are currently limited to mobile results only, and are not available on desktop results.

Are adding images to the steps mandatory?

No, but it is highly recommended, as it can give your website the edge in the results, as visual communication provides a great experience than only text.

Can I use the same image for all the HowTo Steps?

No. Google encourages you to use images that are specific to each step, and repeating images just defeats the purpose of using images in the first place. If you don’t have the right images, omit them, but please don’t reuse images for multiple steps.

Is it mandatory to add the final result image?

It is not mandatory, but it is highly recommended. Images, especially the final image, play a huge role in improving the user experience in many ways. So, if you don’t add the final image, but one of your competitors does, it is likely that Google may pick their website for the rich results instead of yours.

Can I use the HowTo Block for recipes?

No. Even though recipes are technically HowTo content, Google doesn’t allow you to use the HowTo Structured-Data for recipes. It is recommended that you use the Recipe Structured Data for recipes instead. Don’t worry, Rank Math supports Recipe Structured Data natively. Click here to learn more about it.

Can any type of content be added with the HowTo Block?

Mostly, yes. As long as the content qualifies as a How-To, you can use the HowTo Structured-Data. However, there are some restrictions from Google that you should be aware of. Google doesn’t allow using the HowTo Structured-Data for advertising, so don’t promote specific products inside the blocks. Also, the content must not be obscene, contain profanity, sexually explicit, or promote or display violence, promote illegal or dangerous activity, or have hate speech.

How detailed should my steps be?

There are no specific guidelines on how detailed your content needs to be, but we can make some reasonable assumptions. Since the content is about how to do certain things, make sure to include enough specifics so that there is no place of doubt. Second, make sure the content is friendly enough so that some unfamiliar with the process is able to follow along. Third, remember that many people might consume your content via voice, so make sure to make the text descriptive and easy to follow and not rely heavily on images for instructions.

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 @rankmathseo. 💬

Email Icon

Don’t Miss Any Future Post!

Sign up today for Exclusive SEO Articles