---
title: "Schema.org for How-To Content · Unhead"
canonical_url: "https://unhead.unjs.io/docs/svelte/schema-org/guides/recipes/how-to"
last_updated: "2026-09-02T06:35:51.812Z"
meta:
  description: "Add HowTo structured data with defineHowTo(), including steps, images, supplies, tools, and time estimates."
  "og:description": "Add HowTo structured data with defineHowTo(), including steps, images, supplies, tools, and time estimates."
  "og:title": "Schema.org for How-To Content · Unhead"
---

Home

`
Unhead on GitHub

Switch to SvelteSwitch to TypeScriptSwitch to VueSwitch to ReactSwitch to Solid.jsSwitch to AngularSwitch to Nuxt

**Recipes**

# **Schema.org for How-To Content**

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/schema-org/2.guides/4.recipes/how-to.md)

HowTo structured data describes the steps, supplies, tools, and timing of instructional content. [**~~Google deprecated How-to rich results in September 2023~~**](https://developers.google.com/search/blog/2023/08/howto-faq-changes), but the markup remains part of Schema.org.

## Useful Links

- [**~~defineHowTo~~**](https://unhead.unjs.io/docs/schema-org/api/schema/how-to)
- [**~~HowTo - Schema.org~~**](https://schema.org/HowTo)
- [**~~How-to rich result deprecation | Google Search Central~~**](https://developers.google.com/search/blog/2023/08/howto-faq-changes)

## Marking up a How-To Guide

The [**~~defineHowTo~~**](https://unhead.unjs.io/docs/schema-org/api/schema/how-to) helper creates a HowTo node and resolves its steps.

Some fields may already be inferred. See [**~~Schema.org Params~~**](https://unhead.unjs.io/docs/schema-org/guides/core-concepts/params).

```
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/svelte'

useSchemaOrg([
  defineHowTo({
    name: 'How to Build a Desk',
    description: 'A step-by-step guide to building a home office desk.',
    image: '/images/desk-building.jpg',
    estimatedCost: {
      '@type': 'MonetaryAmount',
      currency: 'USD',
      value: '100'
    },
    supply: [
      'Wood panels',
      'Screws',
      'Hammer',
      'Nails'
    ],
    tool: [
      'Screwdriver',
      'Power drill',
      'Tape measure'
    ],
    step: [
      {
        name: 'Gather materials',
        text: 'Collect all necessary supplies and tools.',
        image: '/images/desk-materials.jpg',
        url: '/how-to-build-desk/materials'
      },
      {
        name: 'Cut wood panels',
        text: 'Cut the wood panels to the proper dimensions.',
        image: '/images/cutting-panels.jpg',
        url: '/how-to-build-desk/cutting'
      },
      {
        name: 'Assemble desk frame',
        text: 'Connect the panels to form the desk frame.',
        image: '/images/desk-frame.jpg',
        url: '/how-to-build-desk/assembly'
      },
      {
        name: 'Attach desk top',
        text: 'Secure the desk top to the frame.',
        image: '/images/desk-top.jpg',
        url: '/how-to-build-desk/finishing'
      }
    ]
  })
])
```

## Steps with HowToStep

Use `**HowToStep**` when a step contains several directions:

```
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/svelte'

useSchemaOrg([
  defineHowTo({
    name: 'How to Change a Flat Tire',
    description: 'Instructions for changing a flat tire safely.',
    step: [
      {
        '@type': 'HowToStep',
        'name': 'Prepare your vehicle',
        'itemListElement': [
          {
            '@type': 'HowToDirection',
            'text': 'Park your car on flat, stable ground'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Apply the parking brake'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Turn on hazard lights'
          }
        ]
      },
      {
        '@type': 'HowToStep',
        'name': 'Remove the flat tire',
        'itemListElement': [
          {
            '@type': 'HowToDirection',
            'text': 'Loosen lug nuts with a lug wrench'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Use a jack to lift the vehicle'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Remove the lug nuts completely'
          },
          {
            '@type': 'HowToDirection',
            'text': 'Remove the flat tire'
          }
        ]
      }
    ]
  })
])
```

## Adding Time Information

For How-To guides, you can specify the time spent performing the instructions and the total time required:

```
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/svelte'

useSchemaOrg([
  defineHowTo({
    name: 'How to Make Pancakes',
    performTime: 'PT20M', // 20 minutes performing the instructions
    totalTime: 'PT30M', // 30 minutes in ISO 8601 duration format
    step: [
      {
        name: 'Mix ingredients',
        text: 'Combine flour, milk, eggs, and sugar in a bowl.'
      },
      {
        name: 'Cook pancakes',
        text: 'Pour batter onto hot griddle and flip when bubbles form.'
      }
    ]
  })
])
```

For time durations, use the [**~~W3C duration format~~**](https://www.w3.org/TR/xmlschema11-2/#duration). For example, "PT30M" represents 30 minutes, "PT2H30M" represents 2 hours and 30 minutes.

## Structured How-To Content

Keep the visible instructions consistent with the schema. For example:

```
<div>
  <h1>How to Build a Desk</h1>
  <p>A step-by-step guide to building a home office desk.</p>

  <div>
    <h2>What You'll Need</h2>
    <ul>
      <li>Wood panels</li>
      <li>Screws</li>
      <li>Hammer</li>
      <li>Nails</li>
    </ul>

    <h2>Tools</h2>
    <ul>
      <li>Screwdriver</li>
      <li>Power drill</li>
      <li>Tape measure</li>
    </ul>
  </div>

  <div>
    <h2>Steps</h2>

    <div>
      <h3>1. Gather materials</h3>
      <img src="/images/desk-materials.jpg" alt="Materials for desk building" />
      <p>Collect all necessary supplies and tools.</p>
    </div>

    <div>
      <h3>2. Cut wood panels</h3>
      <img src="/images/cutting-panels.jpg" alt="Cutting wood panels" />
      <p>Cut the wood panels to the proper dimensions.</p>
    </div>

    <!-- Additional steps... -->
  </div>
</div>
```

## Best Practices

- Match every marked-up step, tool, supply, and duration to the visible instructions.
- Add step images and time estimates when the page provides them.
- Check the rendered markup with the [**~~Schema.org Validator~~**](https://validator.schema.org/). Google's Rich Results Test no longer supports HowTo.

## Related Recipes

- [**~~Setting Up Your Identity~~**](https://unhead.unjs.io/docs/schema-org/guides/recipes/identity): Define your organization/person
- [**~~FAQ Page~~**](https://unhead.unjs.io/docs/schema-org/guides/recipes/faq): Add FAQ structured data
- [**~~Blog Posts~~**](https://unhead.unjs.io/docs/schema-org/guides/recipes/blog): Article structured data

[Edit this page](https://github.com/unjs/unhead/edit/main/docs/schema-org/2.guides/4.recipes/how-to.md)

[Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/schema-org/2.guides/4.recipes/how-to.md)

**Did this page help you? **

[**FAQ** Add FAQPage structured data with defineQuestion() and connect each Question to the page mainEntity graph.](https://unhead.unjs.io/docs/schema-org/guides/recipes/faq) [**Site Search** Add a SearchAction to WebSite schema with defineSearchAction() and describe your internal search URL template.](https://unhead.unjs.io/docs/schema-org/guides/recipes/site-search)

**On this page **

- [Useful Links](#useful-links)
- [Marking up a How-To Guide](#marking-up-a-how-to-guide)
- [Steps with HowToStep](#steps-with-howtostep)
- [Adding Time Information](#adding-time-information)
- [Structured How-To Content](#structured-how-to-content)
- [Best Practices](#best-practices)
- [Related Recipes](#related-recipes)