XooCode(){

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.

Highlight legend:Required by GoogleRecommendedOptional
schema.org/HowToStep
<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.

schema.org/HowToStep (minimal)
<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.

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.

  1. 01

    HowToStep without text

    Wrong
    HowToStep with only name and position
    Right
    "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.

Schema properties in this example

About the example data

A step from a structured data implementation guide on the Xoo Code blog.

Comments

Loading comments...

Leave a comment