Creating “HowTo” Schema Markup Using the Schema App Editor

Tutorial

If you have instructional content on your website that defines the steps to successfully complete a task, adding “HowTo” markup to that page allows you to explicitly convey to Google that your content is a how-to. Additionally, having correct HowTo schema markup may make that content eligible for a rich result on Search and How-To Action for use with Google Assistant. (Note, this is different than Recipe markup, which is used for instructional content related to making food or drinks.)

In this tutorial, we will walk you through creating HowTo schema markup using the Schema App Editor. As you will see, our tool makes it easy to develop complete, accurate structured data that satisfy Google’s requirements.

Before You Begin

Required and Recommended Properties

Google maintains documentation to explain exactly what is required for How-To markup. We’ve captured the required and recommended fields below. You must include the required properties for your content to be eligible for display as a rich result. Recommended properties add more information to your structured data, which could provide a better user experience.

https://schema.org/HowTo
Schema Property Priority Mapping Notes
name Required Text: The title of the how-to. For example, “How to tie a tie”.
step Required https://schema.org/HowToStep 
description Recommended Text: A description of the how-to.
estimatedCost Recommended Text: The estimated cost of supplies when performing instructions.
image Recommended URL: Image of the completed how-to.
supply Recommended Text: A supply consumed when performing instructions or directions.
tool Recommended Text: A tool used when performing instructions or directions
totalTime Recommended The total time required to perform all instructions or directions (including time to prepare the supplies), in ISO 8601 duration format.
video Recommended http://schema.org/VideoObject 

 

https://schema.org/HowToStep
Schema Property Priority Mapping Notes
itemListElement Required* http://schema.org/HowToDirection 
text Required* Text: The full instruction text of this step.
image Recommended URL: An image for the step.
name Recommended Text: The word or short phrase summarizing the step.
url Recommended URL: A URL that directly links to the step (if one is available). For example, an anchor link fragment.
video Recommended http://schema.org/VideoObject 

*NOTE: one of either itemListElement or text is required, you do not need both.

https://schema.org/HowToDirection
Schema Property Priority Mapping Notes
Text Required Text: The text of the direction.

For the most current guidelines on required and recommended fields, reference the Google Developers Reference Guide.

Creating Your Markup

Create a HowTo Data Item

The first step is to create a HowTo data item. All individual steps in the how-to will be nested under this data item. In the Structured Data Editor, use the class tree to search for “How to”. Once selected, click “Create”.

Assign the data item a name and a URL. We recommend assigning a name that is descriptive and clearly identifies the item you are creating. In our example, the name for our “HowTo” is “How it Works”. Enter the URL of the page where this how-to content exists. 

TIP! Copy the URL from the address bar to avoid any typos or missing trailing slashes.

 

Once created, the page will refresh with this data item in Edit mode. You are required to have How To Step data items for each step in the process, as the Editor shows.

Create a HowToStep Data Item

Type the name of the first step in the input field, and click “Convert to Data Item”.

You will be prompted to indicate the URL of this new data item, as well as its type. You will want to use the URL of the page where the How To process resides, but append an anchor tag at the end to differentiate it from other content on the page. We recommend using a naming convention of #HowToStep1, #HowToStep2, etc. to give each step a unique URL. Change the type to “How to step” and click “Create”.

Click on “Open Full Data Item” and then “Go To Data Item”.

Click on the orange Edit button to fill in the required and recommended properties.

Fill in the Properties

  1. In the “Text” field, enter the textual instructions related to the step.
  2. If you have an image associated with this step, either paste the image URL or create a new “Image Object” data item for the image.
  3. Populate the URL of the page where the step resides.
  4. Click the green Done button.

You will now have a data item overview that looks like this:

Repeat this process for all other steps in the how-to. 

Check Your Work

You have the opportunity to check your work in the Editor as you create each data item. As you save each data item, our tool will alert you to any missing required or recommended fields. This could prompt you to either go back in and fill them out, or add content to the web page so that you can mark it up.

TIP! You can only mark up content that is visible on a web page

 

Once done, you can generate the JSON-LD and test with Google to ensure you have captured all relevant information.

In our example, the JSON-LD looks like this:

When testing with the Structured Data Testing Tool (SDTT), the result is error-free. The warnings that exist are safe to ignore, as those fields do not exist in the content.

Testing Your Markup

Structured Data Testing Tool

Export the JSON-LD and run it through the SDTT, to view any errors or warnings. Again, this serves as an alert to either correct the markup or to highlight gaps in the content. 

Rich Results Preview Testing

To validate and preview your structured data, use Google’s Rich Result Test. This tool will indicate if your page is eligible for rich results. Please note that Google’s Rich Result Test is only valid for certain supported rich result types.

Deploying Your Markup

If your markup is correct and error-free, ensure that your integration method is set-up and the markup will deploy to your page. 

If you are seeing errors in the SDTT or your Google Search Console that you are unsure how to resolve, feel free to reach out to support@schemaapp.com and we will be happy to help out. 

Resources

If you’d like to read more on the guidelines around HowTo markup, the following links will be helpful. 

, ,
Previous Post
Connecting the Digital Dots Podcast Series – The Changing Landscape of Search
Next Post
10 Things You Don’t Know about Structured Data

Menu