This is how to implement HowTo Schema markup

HowTo structured data example

With the latest version of Schema v3.3, an interesting vocabulary is added : the HowTo. This new type would be very useful to SEO consultants and webmasters of HowTo like websites. They are able today to markup their pages not only as a simple article or blogpost but with this new specific type. The HowTo type came as a generalization upper the Recipe one because logically a recipe is a set of steps and instructions that show how to prepare a delicious meal.

Describing a How-to post helps search engines to better understand the details, the steps etc and it would be easier to highlight it on search results (rich snippets, featured snippets). I already said it in some SEO conferences : Google featured snippets are not fired up based on structured data..and that was confirmed by Gary Ilyes :

One reason is that today, structured data adoption stills low, i guess. But this will change i believe, mostly with the evolution of Schema vocabularies.

As promised in my previous post, i explain you today how to markup a how-to article with JSON-LD. But before, let me explain the new properties of HowTo type. HowTo properties and types :

  • estimatedCost : An estimated cost for the consumables/ supplies needed for the instructions
  • performTime : time needed to perform the how-to instructions
  • prepTime : time needed to prepare required supplies
  • steps : a single step (text, document or video) or an ordered list of steps (itemList) of HowToStep and / or HowToSection [A sub-grouping of steps in the instructions]
  • supply : supply needed to be consumed when performing the actions / directions.
  • tool : a tool used but not consumed for the operation
  • totalTime : total time required to prepare and perform the instructions (performTime + prepTime)
  •  yield : the quantity that results by making the steps. for example : 10 origami flowers.

In addition to the above specific properties, HowTo type inherits properties from CreativeWork and Thing such as about, author, dates, video, thumbnail, description, image, url etc..

Let’s walk through now to markup a real world example 😉

How to markup a how-to article with structured data :

Examples are for learning so they must be useful that’s why i will take an existing how-to article about how to change a tire. I will try to markup this example in JSON-LD (recommended format for Google), if you need an example in micro data you can use the given one on Schema/HowTo page. Knowing that Google Structured Data Testing Tool is not yet updated to recognize the HowTo type, i don’t recommend to use the following non validated JSON-LD example on production environments.

Google not recognize howto type schema

I will update the post when it will support it. OK let’s Go !

First, let’s describe the simplest properties

You can of course provide some additional properties inherited from Schema/CreativeWork such as datePublished or video. Now let’s describe the second part about instructions (steps).

Steps could be simple text element or an ordered list of HowToStep / HowToDirection elements or sub-grouped under HowToSection.

HowTo steps modelization

In my example, i will use the HowToSection type for Steps. So we have HowToStep list with HowToDirection and HowToTip items like following (Github Gist) :

You can then add more HowToSection if you want or delete the HowToSection level to have directly HowToStep items. In order to facilitate the understanding of the example, i visualized it using JSON-LD playground tool (click on the image to zoom) :

JSON-LD visualization


That’s all for this HowTo example. If you have questions/feedback post a comment and i will try my best to answer them. Thank you!

Leave a Comment

Related posts