How to Add HowTo Schema.org to a 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!

Want to make your search results stand out in Google and Bing? Learn how in our Structured data training! »

Structured data training Info

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.

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

Get the most out of Yoast SEO, learn every feature and best practice in our Yoast SEO for WordPress plugin training! »

Yoast SEO for WordPress plugin training Info

<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 »

Leave a reply

You have to agree to the comment policy.

7 Responses to How to add HowTo Schema to your how-to article

  1. Rafael
    Rafael  • 5 days ago

    This is a great addition to the plugin!

  2. Will
    Will  • 1 week ago

    If the “How to” mostly or only involves the user taking
    action, such as making calls and filling out documents,
    or possibly using their computer,
    then would it be better to simply take out the
    “@type”: “HowToTool” section from the code, as long as the Google structured data testing tool validates the full remaining code – – – ?

    Google may have it’s own definition of what is a – “Tool” –
    and if it is not really a “Tool” & we force something to
    be a “Tool” because we believe we have to put something in for it, this may comprise the “Badly Written”, or “Faulty” code you were warning about – ? and not be in the best spirit of Goole’s mission of always giving the user the best result and explanation – – – ?

    Similar for cost, If there is not a cost, does it matter if we take out the cost Schema element “@type”:”MonetaryAmount”, etc. rather
    than leave it in and put $0 – – – ?

    Some How To’s will be pretty clear that there is not a cost
    “How to calculate if you are have too much debt for your income”. Google may expect the code writer to factor that in to what code they include & what code they take out of a Schema, on a case by case basis as long
    as it validates –

    Your thoughts please –

  3. endda
    endda  • 1 week ago

    Is this possible to setup with Yoast’s SEO plugin when Gutenberg is not activated?

  4. Fazal Aasar
    Fazal Aasar  • 1 week ago

    Schemas are very important but still many people do not have any idea what Schemas are all about. Awareness is spreading somehow I normally learn from online available tutorials and this is the reason why I bring about results because I keep myself fully updated.

  5. Pradeep Singh
    Pradeep Singh  • 1 week ago

    Great, I run a blog where mostly I share How To Blog posts, I don’t know about Programming, Yes I know some HTML. Currently, I am not using Gutenberg because it has some issues. I will use How to Schema when Gutenberg will come in core WordPress.
    Thanks

  6. Gracious Store
    Gracious Store  • 2 weeks ago

    Could Yoast integrate structured data schema for product pages with unique images for each page for eCommerce websites into their premium plugin

  7. Daniel
    Daniel  • 2 weeks ago

    I don’t have a ‘how to’ page, but I have FAQ and glossary pages. I’d like to know how to add structured data to these pages.


Check out our must read articles about Technical SEO

rel=canonical: the ultimate guide

The canonical URL allows you to tell search engines that certain similar URLs are actually one and the same. Learn how to use rel=canonical!

Read article »

hreflang: the ultimate guide

This guide discusses what hreflang is, what it is for and gives in-depth information on how to implement it for your multilingual websites.

Read article »

robots.txt: the ultimate guide

The robots.txt file is a file you can use to tell search engines where they can and cannot go on your site. Learn how to use it to your advantage!

Read article »