HowToStep
HowToStep is used inside a HowTo (or Recipe) to represent individual steps. It has no properties of its own but inherits from three parent types simultaneously: CreativeWork, ItemList, and ListItem. This triple inheritance means a HowToStep has text (the step instructions), name (step title), url (deep link to the step), image, and position (step number from ListItem).
For a complete implementation, see the HowTo example, which shows HowToStep inside the step array. Google's HowTo rich result reads HowToStep entries to display numbered step-by-step instructions directly in search results.
Full example of schema.org/HowToStep json-ld markup
The markup is verified as valid with Rich Results Test from Google.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Add Product Schema to Your Website",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Identify the product page template",
"text": "Find the HTML template or component that renders your product pages. This is where you will add the JSON-LD script tag.",
"url": "https://xoocode.com/guides/product-schema#step-1",
"image": "https://xoocode.com/guides/product-schema/step-1.jpg"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Write the JSON-LD block",
"text": "Create a script tag with type application/ld+json. Set @type to Product and populate name, image, description, offers, and brand from your product data.",
"url": "https://xoocode.com/guides/product-schema#step-2"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Test with Rich Results Test",
"text": "Paste your page URL into Google's Rich Results Test. Verify the Product snippet appears with no errors or warnings.",
"url": "https://xoocode.com/guides/product-schema#step-3"
}
]
}
</script>Minimal valid version
The smallest markup that still produces a valid HowToStep entity. Use it as the floor. Reach for the advanced example above when you want search engines and AI agents to understand more about your content.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Add Product Schema",
"step": [
{ "@type": "HowToStep", "text": "Find the product page template.", "position": 1 },
{ "@type": "HowToStep", "text": "Write the JSON-LD block.", "position": 2 },
{ "@type": "HowToStep", "text": "Test with Rich Results Test.", "position": 3 }
]
}
</script>Google rich results this unlocks
Markup matching this example makes your page eligible for the following Google Search rich results. The primary target drives the required / recommended property classification in the advanced code block above.
- Google docsHowTo rich resultprimary
Common HowToStep mistakes
Mistakes that pass validation but silently fail to earn rich results or mislead consumers walking the graph. Avoid these and your markup will be ahead of most sites in the wild.
- 01
HowToStep without text
WrongHowToStep with only name and positionRight"text": "Find the HTML template that renders your product pages."text is the step instruction. name is the optional step title. Google's HowTo rich result displays the text, not just the name. Without text, the step is empty in the rich result.
About the example data
A step from a structured data implementation guide on the Xoo Code blog.
Comments
Loading comments...