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 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.
1.1 Edit Your Post or Page
In order to add the HowTo Block edit the post or page.
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:
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.
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.
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.
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.
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.
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.
1.9 Material PRO
In this field, enter the material that is necessary to perform the task.
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 a step title: Enter the title of the step.
- Add Step Image: Add an image for the specific step.
- 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.
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.
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.
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:
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:
2.3 Navigate to the Schema Settings for This Post/Page
Click on the Schema tab and then click on Schema Generator.
2.4 Navigate to the Schema Builder
Click on Use to open the Schema Builder.
The Schema Builder will show up with the options as shown below:
Now, let’s have a closer look at each of the available options.
HowTo Schema Type Setup & Available Options
Enter the name of the HowTo Schema.
Enter the Description here. You can also make use of variables and create dynamic description.
Copy and Paste the shortcode available here in your content.
4 Total Time
Enter the total time needed in this field in the ISO 8601 format. Example: P12DT30H15M.
5 Image URL
Enter the URL of the image here.
In this field, enter the estimated cost of all the supplies that will be consumed while performing instructions.
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 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 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 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.
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:
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!