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.
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.
Unfortunately for this work is makes sense to add some extra attributes to the 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!
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" itemscope itemtype="http://schema.org/HowToItem">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 probably 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
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
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
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.
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.