How to add HowTo Schema to your how-to article

You might know that structured data in the form of Schema.org can do wonders for your search results. It also forms the basis for an ever-increasing amount of new and exciting developments on the search engine front. Google has said many times that structured data is beneficial. Today, we’re going to look at a relatively new and exciting piece of structured data: the HowTo Schema.org. This is a how-to about a how-to on HowTo: HowToCeption!

Did you know Yoast SEO 8.2 now comes with structured data content blocks for Gutenberg? You can automatically add HowTo and FAQ structured data to your content! »

What is structured data?

Structured data is a sort of translator for search engines – it adds context to code. Schema.org is a so-called vocabulary, in other words, a dictionary. By adding Schema.org search engines can instantly figure out what every piece of content means, semantically speaking. This gives search engines the power to do cool stuff with your content, like highlighted snippets in search results, the Knowledge Graph or the carousel. There’s structured data for books, articles, courses, events, jobs, local businesses, music, recipes, products, reviews et cetera. Structured data is getting more important by the day and we’ll see more types emerge in the coming years.

If you want to learn more about structured data and find out how to implement it yourself so you can win those coveted rich results, you can enroll in our Structured data training!

What is HowTo structured data?

According to Schema.org, a HowTo is “an instruction that explains how to achieve a result by performing a sequence of steps.” You can use HowTo structured data to mark up articles that come in a how-to form, but that are not recipes. If there is an element of consumption, it should be a recipe.

HowTo Schema.org was introduced in April 2017 and is now on its way to Google’s search engine. Google is always looking at structured data to do cool stuff with, so it’s easy to see why HowTo would be an awesome addition to the roster. How about this, since your Google Home can now read your structured data powered recipes out loud, why shouldn’t it be able to read that how-to on how to fix a leaky faucet or change the busted lights in your kitchen cabinet? Google has confirmed that it has been testing a new form of search results snippets in the form of FAQs or frequently asked questions, Q&As and How-Tos. It is safe to say that we’ll see this sooner rather than later.

Here’s what a Google spokesperson told Search Engine Land a little while back:

We’re always looking for new ways to provide the most relevant, useful results for our users. We’ve recently introduced new ways to help users understand whether responses on a given Q&A or forum site could have the best answer for their question. By bringing a preview of these answers onto Search, we’re helping our users more quickly identify which source is most likely to have the information they’re looking for. We’re currently working with partners to experiment with ways to surface similar previews for FAQ and How-to content.

Have Gutenberg? Use the HowTo structured data content block in Yoast SEO

While this article picks apart how HowTo Schema.org works exactly, you might just be looking for an easy way to add it to your WordPress site. Well, you’re in luck as we have one! In Yoast SEO 8.2, we introduce the concept of structured data content blocks for WordPress’ new Gutenberg editor. These blocks, including one for HowTo structured data, automatically add the necessary code to the pieces of content that you add to this block. Of course, it validates perfectly in Google’s Structured Data Testing tool. Now adding structured data to your how-to article is as easy as filling in the fields!

An empty HowTo content block in Gutenberg. Just fill in the fields to get going!

Here’s how an example article from our Knowledge base:
How-to content blockAnd here you see the result in Google’s Structured Data Testing Tool:
the result in the structured data testing tool

Testing the HowTo: HTML code

We’ve seen how you can now easily add HowTo structured data to your article using Yoast SEO, but, of course, there’s more to be discovered. Keep in mind that Yoast SEO currently supports only the essential properties.

To start testing the HowTo we need a piece of HTML. This is going to be a very simple example of a basic page with some content. We are going to base our content on a Knowledgebase article about connecting Yoast SEO to Google Search Console. We’re going to mark up every piece of the HTML with HowTo Schema.org in the form of JSON-LD, as this is the preferred format. The content is nothing special, just a couple of steps following instructions. Below you can find the HTML for this page, slightly truncated.

How To Add Your Website To Google Search Console
Cost: Free
Time needed: About 10 minutes
Necessary items:
Yoast SEO
Google Search Console
Preparation
Install Yoast SEO and activate your Google Search Console.
</div>
Tip: Did you know you can check and fix crawl errors directly from Yoast SEO?
</div> </div>
Adding your site to Search Console
Go to Google Search Console (former Google Webmaster Tools), sign into your Google account and click the red button to add your website.
</div>
Copy the code for the HTML tag under the Alternate Methods tab.
Tip: Please make sure you enter your complete url.
</div>
Copy the code for the HTML tag under the Alternate Methods tab.
Log in to your WordPress website and cick on ‘SEO’ in your menu. After that, click on General.
Click on the ‘Webmaster Tools’ tab and add the code under ‘Google Search Console’. Click ‘Save Changes’.
Switch back to Google Search Console (formerly Google Webmaster Tools) and click ‘Verify’.
</div> </div>
Finishing up
Congratulations! You’ve connected your website to Google Search Console (former Google Webmaster Tools)!
</div>
Now that you’ve verified and connected your website, you can submit your sitemap!
</div> </div> </div>

Adding HowTo Schema

In the example, we’re breaking up the how-to in three parts: preparation, step-by-step directions and finishing the project. All three steps can be wrapped in a HowToSection, with individual HowToSteps and HowToDirections. You can even given an extra HowToTip if you want to add a relevant tip that can improve the job, but is not necessary for the end result. These are the building blocks that define the structure of the data.

So, let’s take a closer look at some of the parts used to build this how-to. Remember, there’s more to find on Schema.org/HowTo. These are some of the parts you will use often:

  • HowTo: To define that this data is a set of instructions to achieve something
    • Name: What’s the project called?
    • EstimatedCost: How much do the tools cost for instance?
      • MonetaryAmount: What currency is and for which amount?
    • TotalTime: How long does the job take? You can also specify a prepTime for preparation.
    • HowToTool: Which tools do you need? Maybe a hammer?
      • Supply: Do you need supply as well, like nails?
    • HowToItem: Which items do you need?
      • Name: Name of the item, list ‘em all
  • HowToSection: Is it preparation, starting or finishing up?
    • HowToStep: Every step needs its own type
      • HowToDirection: Descriptions for the step
      • BeforeMedia: An image of what the starting point looks like.
    • DuringMedia: You can add images or videos per step
    • AfterMedia: And even an image showing the endresult
    • HowToTip: if you want to give extra tips and tricks

You’ll see that the code is fairly straightforward: everything has a clear description. Don’t forget to add a position to each step to determine the sequence of the steps. Mark section one as HowToSection with a position of one. Section two of the how-to will receive a position of two, as you can imagine. You can expand this code with a lot of properties from CreativeWork and some from Thing as well.

And now, the JSON-LD HowTo Schema code

As you might know, JSON-LD is Google’s preferred data format for adding structured data. It’s easy to add since it isn’t embedded in the HTML code. In addition, it is very readable for humans. When running the code through Google’s Structured Data Testing Tool you might see that some variations give errors. For instance, if you use howToItem to determine which tools you need, you get an error, but if you use HowToTool it works perfectly fine. Same goes for supply and howToSupply. Keep in mind that the difference between supply and tool is that the former is consumed while doing the job. A hammer is a tool, while nails are its supply. You need both to finish your work, right? In our example, I could add a ‘computer’, an ‘internet connection’ or a ‘website’ as supply if I wanted to. You can also add a yield to determine what the outcome of the workshop is.

<script type="application/json+ld"/>
{
 "@context":"http://schema.org",
 "@type":"HowTo",
 "name":"How To Add Your Website To Google Search Console",
 "estimatedCost":
 {
 "@type":"MonetaryAmount",
 "currency":"USD",
 "value":"0"
 },
 "totalTime":"PT10M",
 "tool":
 [
 {
 "@type":"HowToTool",
 "name":"Yoast SEO WordPress plugin"
 },
 {
 "@type":"HowToTool",
 "name":"Google Search Console account"
 }
 ],
 "steps":
 [
 {
 "@type":"HowToSection",
 "name":"Preparation",
 "position": "1",
 "itemListElement":
 [
 {
 "@type":"HowToStep",
 "position": "1",
 "itemListElement":
 [
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Install Yoast SEO and activate your Google Search Console.",
 "duringMedia":
 {
 "@type":"ImageObject",
 "contentUrl":"yoast_seo_search_console.jpg"
 }
 },
 {
 "@type":"HowToTip",
 "position": "2",
 "description":"Did you know you can check and fix crawl errors directly from Yoast SEO?"
 }
 ]
 },
 {
 }
 ]
 },
 {
 "@type":"HowToSection",
 "name":"Adding your site to Search Console",
 "position": "2",
 "itemListElement":
 [
 {
 "@type":"HowToStep",
 "position": "1",
 "itemListElement":
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Go to Google Search Console (former Google Webmaster Tools), sign into your Google account and click the red button to add your website."
 }
 },
 {
 "@type":"HowToStep",
 "position": "2",
 "itemListElement":
 [
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Copy the code for the HTML tag under the Alternate Methods tab.",
 "duringMedia":
 {
 "@type":"ImageObject",
 "contentUrl":"yoast_seo_search_console_2.jpg"
 }
 },
 {
 "@type":"HowToTip",
 "position": "2",
 "description":"Please make sure you enter your complete url."
 }
 ]
 },
 {
 "@type":"HowToStep",
 "position": "3",
 "itemListElement":
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Copy the code for the HTML tag under the Alternate Methods tab."
 }
 },
 {
 "@type":"HowToStep",
 "position": "4",
 "itemListElement":
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Log in to your WordPress website and click on ‘SEO’ in your menu. After that, click on General."
 }
 },
 {
 "@type":"HowToStep",
 "position": "5",
 "itemListElement":
 [
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Click on the ‘Webmaster Tools’ tab and add the code under ‘Google Search Console’. Click ‘Save Changes’."
 },
 {
 "@type":"HowToStep",
 "position": "6",
 "itemListElement":
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Switch back to Google Search Console (formerly Google Webmaster Tools) and click ‘Verify’."
 }
 }
 ]
 }
 ]
 },
 {
 "@type":"HowToSection",
 "name":"Finishing up",
 "position": "3",
 "itemListElement":
 [
 {
 "@type":"HowToStep",
 "position": "1",
 "itemListElement":
 {
 "@type":"HowToDirection",
 "position": "1",
 "description":"Congratulations! You’ve connected your website to Google Search Console (former Google Webmaster Tools)!"
 }
 },
 {
 "@type":"HowToStep",
 "position": "2",
 "itemListElement":
 {
 "@type":"HowToDirection",
 "position": "2",
 "description":"Now that you’ve verified and connected your website, you can submit your sitemap!"
 }
 }
 ]
 }
 ]
}

Adding structured data to your site with WordPress or Google Tag Manager

Adding structured data requires you to edit the code of your pages. For most people, that requires help of their developers. There is an easier way, though. If you have WordPress and use Yoast SEO 8.2 and up, you can add structured data via the dedicated Yoast SEO structured data content blocks. In addition, or if you don’t use WordPress, you can add structured data via the tags, triggers and variables available in Google Tag manager. What’s more, this way of adding your data gives you an extra amount of flexibility as you can save your variables and reuse them or even dynamically fill them. There are loads of options to explore. Annelieke wrote a post on how to add structured data to your site with Google Tag Manager.

A fun look at HowTo’s

This was cool, right? Well, you can test this for yourself, but keep in mind that it might take a while for search engines to pick this up. Even then, it’s hard to predict if search engines will do anything at all with your structured data. Also, keep in mind that badly written or faulty structured data can do your site more harm than good.

Read more: Structured data: the ultimate guide »

Original Article


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.