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.

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.

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 30 minutes 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 <span itemprop="totalTime">30 minutes</span>
  • 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 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="steps" itemscope itemtype="http://schema.org/HowToSection">
  <h2 itemprop="name">Getting used to the syntax</h2>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
    <p itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      Right click on this text and select "Inspect Element", or Right click and select "View Source".
    </p>
  </div>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
    <p itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      Read through this article, taking note of the <code>itemprops</code> and <code>itemtypes</code>.
    </p>
    <p itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">
      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>

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.

Recent posts View all

Ruby

Using the 'it' Gem to add links to translations

How to can use the 'it' Gem to add links to your translations

Slack

Custom Startup Messages on Slack

How to set a custom start up message on your team's Slack channel. Part of our Slack mini series.