The HowTo structured data definition from schema.org provides a way to define a series of steps to complete a task

In my previous post on using structured data for FAQPages I showed you how to boost your websites’ rankings and gain featured snippets in Google search result pages

Structuring your data for HowTo’s is very similar, in the sense you will receive a rankings boost and featured snippet status on your search term

Structuring your data as a HowTo

There’s lots of information that can be included in a how-to, such as videos, images, cost, sub-sections, tips and directions.

Have a read through the schema.org type definition on a HowTo and look at their examples to get a better idea of how it all fits together. The Google Search Gallery (GSG) provides specific tips on what you can and can’t include in a HowTo

The following will describe a simple HowTo

Requirements

  • Text Editor
  • WordPress
  • Optionally: Advanced Custom Fields

Time to complete: 120 minutes

Contents

  1. Identify the following features of your HowTo
  2. Write your HowTo as a normal page/post
  3. Include images/videos in the post
  4. Code up the JSON-LD
  5. Initial HowTo information
  6. Supplies and tools
  7. Each individual HowTo step
  8. Place your JSON-LD code into the page template

1. Identify the following features of your HowTo

  • the steps required to complete the task
  • any ‘tools’ needed to complete the task (such as a hammer or a saw) – you can have multiple tools and you can add a URL for a tool, such as a download link or place to buy the tool
  • any ‘supplies’ needed (such as nails and wood) – you can have multiple supplies
  • the total time the task will take to completd
  • estimated cost of the HowTo, if appropriate

2. Write your HowTo as a normal page/post

Build your HowTo page with a table of contents linking to each step. You will need the anchor links in the structured data for the HowTo. Important: Don’t try to game the system by optimizing your data, effectively making it different than the content on the page – the data needs to exactly reflect the post content.

3. Include images/videos in the post

Ensure the images are unique for each step and that they describe what is going on in the step – e.g. don’t re-use an image in two steps.

4. Code up the JSON-LD

Let’s break this down into sections to make it easier to understand

5. Initial HowTo information

This could be referred to as metadata for the HowTo. Taking the GSG example of tying a tie:

Define the schema as a HowTo

    "@context": "http://schema.org",
    "@type": "HowTo",

Define a final image if desired – the result of the HowTo

    "image": {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg"
    },

Name and description of your HowTo

    "name": "How to tie a tie",
    "description": "The four-in-hand knot is a great look for any occasion. From formal suits to casual jacket and tie affairs, it’s a simple way to quickly look great. Once you have mastered the knot you can tie it in just a minute, so it’s also great when you’re in a pinch too. ",

Total time the HowTo will take to complete.

It’s written in ISO 8601 format. P refers to days/weeks/months, T refers to hours/minutes/seconds. The example below is 2 minutes

    "totalTime": "PT2M",

6. Supplies and tools

Fairly self-explanatory. You can have a URL for a tool, such as a download link or place to buy the tool.

    "supply": [
        {
            "@type": "HowToSupply",
            "name": "A tie"
        }, {
            "@type": "HowToSupply",
            "name": "A collared shirt"
        }
    ],
    "tool": [
        {
            "@type": "HowToTool",
            "name": "A mirror",
            "url": "https://www.buymirrorsonline.com"
        }, {
            "@type": "HowToTool",
            "name": "Your hands"
        }
    ],

 

7. Each individual HowTo step

Remember at the beginning of this HowTo we suggested using a table of contents for the anchor links? Well those anchor links go into the relevant HowToStep below

    "step":[
        {
            "@type": "HowToStep",
            "name": "Preparations",
            "text": "Button your shirt how you’d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",
            "image": "https://example.com/1x1/step1.jpg",
            "url": "https://example.com/tie#step1"
        }, {
            "@type": "HowToStep",
            "name": "Crossing once",
            "text": "Cross the long end over the short end. This will form the basis for your knot.",
            "image": "https://example.com/1x1/step2.jpg",
            "url": "https://example.com/tie#step2"
        }, {
            "@type": "HowToStep",
            "name": "Second crossing",
            "text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.",
            "image": "https://example.com/1x1/step3.jpg",
            "url": "https://example.com/tie#step3"
        }, {
            "@type": "HowToStep",
            "name": "Loop in",
            "text": "Now pull the long end through the loop near your neck, forming another loop near your neck.",
            "image": "https://example.com/1x1/step4.jpg",
            "url": "https://example.com/tie#step4"
        }, {
            "@type": "HowToStep",
            "name": "Pull and tighten",
            "text": "Pull the long end through that new loop and tighten to fit!",
            "image": "https://example.com/1x1/step5.jpg",
            "url": "https://example.com/tie#step5"
        }
    ]

 

8. Place your JSON-LD code into the page template

I normally place the schema code at the end of the page content.