1. Home
  2. Knowledge Base
  3. SEO Suite
  4. HowTo Schema Type

HowTo Schema Type

If you run a website with content in the form of tutorials or explanations of any kind – you should consider using the HowTo Schema type. Fortunately, applying the HowTo Schema type to pages on your website couldn’t be easier than it is with Rank Math

In this tutorial, we’ll walk you through the two easiest ways to add HowTo Schema to your posts and pages with Rank Math:

  1. Adding HowTo Schema Using Rank Math’s Built-in Gutenberg Block
  2. Adding HowTo Schema Using Rank Math PRO’s Advanced Schema Generator

1 How to Add Rank Math’s HowTo Gutenberg Block in WordPress?

To kick things off, the very first step is to install the Rank Math WordPress SEO plugin. Getting started is very easy & just takes a few minutes.

How To Add 'HowTo Schema' To Your Website Using Rank Math?

1.1 Edit Your Post or Page

In order to add the HowTo Block edit the post or page.

Edit the post

1.2 Add the HowTo Block to the Post

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

HowTo Block

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. Let us now consider each option in detail.

1.3 Final Image

In the Final Image, you can add an image that represents the final result of your HowTo visually. This is optional, but we recommend adding an image for better results. Click on Add Final Image to add an image.

Add Final Image

1.4 Main Description

Here you need to describe what you’re trying to achieve. The field is meant for a description of your goal. Fill in the description in the given text area.

 Enter the main desription

1.5 Duration

In the duration field, you 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. Once enabled, enter the actual duration in the Days, Hours, Months fields.

Enter the duration

1.6  Estimated Cost PRO

Here you have to provide the estimated cost for all the supplies consumed while following your instructions. Enter the currency using ISO 4217 currency code format followed by the estimated cost.

Enter the estimated cost

1.7  Supply PRO

Enter all the supplies consumed while following the instructions in this field. If there are multiple supplies, enter each one in a new line.

Enter the supply

1.8  Tools PRO

While the previous field is used for entering supplies that are consumed, this field is used to enter all tools, which are not consumed but used while following the instruction. If multiple tools are used, add each tool in a new line.

Enter the tools

1.9  Material PRO

In this field, enter the material that is necessary to perform the task.

Enter the material

1.10 Add Your HowTo Steps

This is the most important part of the entire HowTo Block, which is the actual step that needs to be performed. The step itself consists of 3 parts, as shown below:

Enter the HowTo Step
  1. Enter a step title: Enter the title of the step.
  2. Add Step Image: Add an image for the specific step.
  3. Enter a step description: Add a description for the step.

1.11 Add New Step

To add another step, click the Add New Step button at the bottom of the last step. A new blank step will be created below the last step, and you can follow the same instructions and fill in the details in the new step also.

Add New Step

1.12 Deleting or Hiding Steps

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.

Deleting and Hiding Steps

Click on Save for this Post once you’re done making any changes to the Software Schema for this page. Then, simply update the page as you normally would after making a change or click Publish if this is a newly created page.

2 How to Add HowTo Schema Markup to Pages Using Rank Math’s Schema Generator PRO

Before we begin, you’ll need to ensure that Rank Math’s Schema Module has been enabled on your website by navigating to Rank Math > Dashboard > Modules in your WordPress admin area.

Enable Schema module

In this tutorial, we’ll walk you through how to use the HowTo Schema type on a post or page as well as the various available settings for it – let’s get started:

2.1 Edit Your Post or Page

To add the HowTo Schema Type, first head to the edit page for that post, by clicking Edit as shown below:

Edit the post

2.2 Open Rank Math in the Gutenberg Sidebar

Click on the Rank Math SEO icon that displays alongside this post/page’s SEO score to open the SEO settings for this page.

Alternatively, click the three vertical dots in the top right-hand corner of the edit page and select Rank Math in the Plugins section – as shown below:

Click on Rank Maath

2.3 Navigate to the Schema Settings for This Post/Page

Click on the Schema tab and then click on Schema Generator.

Click on Schema Generator

2.4 Navigate to the Schema Builder

Click on Use to open the Schema Builder.

Click on Use

The Schema Builder will show up with the options as shown below:

HowTo Schema Builder

Now, let’s have a closer look at each of the available options.

HowTo Schema Type Setup & Available Options

1 Name

Enter the name of the HowTo Schema.

Enter the name

2 Description

Enter the Description here. You can also make use of variables and create dynamic description.

Enter the description

3 Shortcode

Copy and Paste the shortcode available here in your content.

copy paste the shortcode

4 Total Time

Enter the total time needed in this field in the ISO 8601 format. Example: P12DT30H15M.

Enter total time

5 Image URL

Enter the URL of the image here.

Enter the image URL

6  Cost

In this field, enter the estimated cost of all the supplies that will be consumed while performing instructions.

Enter the Cost

7  Currency

Enter the currency of the salary using the ISO 4217 Currency Code. If you are not aware of your country’s ISO currency code, Wikipedia has an active code list.

Enter the currency

8  Material

Enter the material that you need for your procedure, such as Gum, Paints, etc., in this field. If you’ve more than one material to add, then add one material per line.

Enter the material

9  Supplies

Enter all the supplies that will be consumed while following your instructions on the article. Enter the name of the supplies in this field by clicking on Add Property Group. You can add as many supplies as you want here.

Enter the supplies name

10  Tools

Enter the name of the tools, the user will require while following your instructions by clicking on the Add Property Group. You can add in the information for a particular tool, then click the Add Property Group link to add another group, and fill in the information there.

While Tools and Supply seem similar, but they’re actually not. The Tools field is used to add items users will need to do as per your instructions, and they are not consumed during the process, whereas supplies are consumed during the process.

Enter Tools name

11 Steps

You can add the steps details by clicking on the Add Property Group. Then enter the details of the steps in the fields as shown below:

Add the details of the Steps

And, that’s it! Click on Save for this Post once you’re done making any changes to the HowTo Schema for this page. Then, simply update the page as you normally would after making a change or click Publish if this is a newly created page. You can then check your Schema with the help of Google’s Rich Results Testing Tool.

The benefit of the Schema Generator option is that it allows the HowTo Schema to be used with Classic Editor, Elementor, or any other Page Builder for that matter, while the HowTo Block only works on Gutenberg.

However, in contrast to the HowTo Block, with this method, the users have to add the shortcode inside their content or type their HowTo Instructions separately for the audience as the HowTo Schema generated using this method will only add the Schema – not the frontend content for regular visitors.

We hope the tutorial was helpful in adding HowTo Schema with Rank Math. If you still have absolutely any questions on adding HowTo Schema or using our HowTo Block, feel free to reach our support team, and we’re always here to help!

Was this article helpful?

Still need help?


Submit Your Question

Please give us the details, our support team will get back to you.

Open Ticket

Related Articles