How to use the howTo Schema type
How to use the howTo Schema Type to mark up How To articles
Because I enjoy it when things get a bit meta, today I wanted to talk about how to markup your content in such a way that it semantically looks like a How To guide.
We’re going to do this using the Schema Type howTo.
I’m going to mark up this post with this Schema, so you can see what the final result may look like.
Update This article was updated in September 2022 to improve the examples and add a section on debugging.
Schema basics
If you provide Google some content that you know is a review about a book, you might think that Google should be able to work out the book you’re reviewing, especially if you say in the review “This was the second edition of foo book”. Unfortunately Google is dumb and we need to give it some help. There is some markup we can use that specifically says “I was reviewing this book, it was by this author, I scored it 4/5”.
If you’ve never implemented Schema markup before, there are two ways to go about it. My preferred way is to add some JSON-LD to the page that describes what is happening. This gives programs looking for this type of meta information some clues as to the content.
The other way is to add some extra attributes to your HTML elements, I don’t like doing this because I think it clutters up your HTML and often leads to designs putting robots ahead of humans.
For the sake of this post, I will use extra attributes and additional HTML elements.
How to use the howTo Schema
I'm going to show you how to add howTo Schema naturally into your content, it should take about to implement. All you will need is your normal text editor and a web browser, some basic HTML knowledge won't go amiss either.
Even in this first paragraph we've marked up some interesting stuff.
- We've given our How To a name
<h2 itemprop="name">How to use the howTo Schema</h2> - We've given a time for implementation
<time itemprop="totalTime" datetime="PT30M">30 minutes</time> - We've even listed a tool we will need!
<span itemprop="tool">text editor</span>
Write your content first
Write your article as if it was never being marked up, this will make it much more palatable for humans!
Making the odd change to make markup easier is fine, but this is one of the reasons why I like using JSON-LD.
Getting used to the syntax
Right click on this text and select "Inspect Element", or Right click and select "View Source".
Read through this article, taking note of the itemprops and itemtypes.
You might prefer to read the sample code at the bottom of the Schema documentation
This is an example you might see in this post when viewing the source
<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
<h2 itemprop="name">Getting used to the syntax</h2>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
<p itemprop="text">Right click on this text and select "Inspect Element", or Right click and select "View Source".</p>
</div>
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
<p itemprop="text">Read through this article, taking note of the <code>itemprops</code> and <code>itemtypes</code>.</p>
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">
<p itemprop="text">You might prefer to read the sample code at the bottom of the <a href="http://schema.org/HowTo">Schema documentation</a></p>
</div>
</div>
</div>Learning the bare minimum
Now you've seen some of the syntax, lets learn the bare minimum you'll need to correctly mark everything up.
You need to understand the idea that a How To is simply a list of steps to be followed in order.
At the very least we have itemtype="http://schema.org/HowTo", which is the main itemtype
If there are several sections (e.g prep, or tidy-up) included, we would use itemtype="http://schema.org/HowToSection" inside the main itemtype. Each section would be marked up with this.
Each HowToSection will contain several itemtype="http://schema.org/HowToStep" which are the individual steps someone will follow. Each of those steps will contain itemtype="http://schema.org/HowToDirection" which is the direction someone should follow.
Experiment with some examples. I've chosen to write a fairly wordy explanation for this, normally a HowTo would be closer to a recipe, with very terse instructions to follow.
Debugging your HowTo Schema
To get feedback when writing Schema, there are three places I like to check, in this order;
- The w3 HTML validator — there is no point adding schema to an invalid page. When possible, always make sure you are shipping valid HTML.
- The schema validator — this is the best tool for knowing if your Schema matches the official guidance.
- Google’s rich text validator — finally, I like to use Google’s tool. It loads and parses your HTML before checking, so will catch issues with other code on your site. It will also suggest things that maybe the official spec doesn’t require, but it prefers to help searchers find your content.
- Other free validators — Schema is just one part of your website, here are some other free tools to make sure your website is valid and performant.