---
title: "HowTo Schema - JSON-LD Guide & Examples · Unhead"
canonical_url: "https://unhead.unjs.io/docs/solid-js/schema-org/api/schema/how-to"
last_updated: "2026-08-01T05:41:31.137Z"
meta:
  description: "Add HowTo structured data with Unhead, including step-by-step JSON-LD, images, supplies, tools, and time estimates."
  "og:description": "Add HowTo structured data with Unhead, including step-by-step JSON-LD, images, supplies, tools, and time estimates."
  "og:title": "HowTo Schema - JSON-LD Guide & Examples · Unhead"
---

Home

`
Unhead on GitHub

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

**Schema**

# **HowTo Schema - JSON-LD Guide & Examples**

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/schema-org/5.api/9.schema/how-to.md)

HowTo schema marks up step-by-step instructions for tutorials, guides, DIY instructions, and other how-to content. Google deprecated How-to rich results in September 2023.

## JSON-LD Example

```
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Tie a Tie",
  "step": [
    {
      "@type": "HowToStep",
      "text": "Drape the tie around your neck with the wide end on your right, about 1/3 longer than the narrow end.",
      "image": "https://example.com/step1.jpg"
    },
    {
      "@type": "HowToStep",
      "text": "Cross the wide end over the narrow end, then bring it underneath.",
      "image": "https://example.com/step2.jpg"
    }
  ],
  "totalTime": "PT5M"
}
```

Use the [**~~Schema.org Generator~~**](https://unhead.unjs.io/tools/schema-generator) to build your structured data visually.

## Schema.org HowTo

- **Type**: `defineHowTo<T extends Record<string, any>>(input?: HowTo & T)`
  Describes a HowTo guide, which contains a series of steps.

## Useful Links

- [**~~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)

## Required properties

- **name** `**string**`
  A string describing the guide. Route metadata on the `**title**` key can provide this value; see [**~~Defaults~~**](#defaults).
- **step** `**NodeRelations<HowToStep | string>[]**`
  An array of objects or strings describing the steps in the guide. Unhead adds the `**HowToStep**` type and resolves supported `**url**`, `**image**`, and `**itemListElement**` fields.
- **step.text** `**string**`
  The full instruction text for an object step. A string step is converted to `**{ text: value }**`.

## Examples

### Minimal

```
defineHowTo({
  name: 'How to tie a tie',
  step: [
    {
      url: '#step-one',
      text: 'Button your shirt, then drape the tie around your neck. Let the wide end hang about one-third lower than the narrow end.',
      image: '/1x1/photo.jpg',
    },
    {
      url: '#step-two',
      text: 'Cross the long end over the short end. This will form the basis for your knot.',
      image: '/1x1/photo.jpg',
    },
    {
      url: '#step-three',
      text: 'Bring the wide end under the narrow end, then pass it across the front in the other direction.',
      image: '/1x1/photo.jpg',
    },
    {
      text: 'Pull the wide end up through the loop around your neck.',
      image: '/1x1/photo.jpg',
    },
    {
      text: 'Pull the wide end through the front loop, then tighten the knot.',
      image: '/1x1/photo.jpg',
    },
  ]
})
```

## Defaults

- **@type**: `**HowTo**`
- **@id**: `**${canonicalUrl}#howto**`
- **name**: `**title**` from resolved page metadata _(see: [**~~Schema.org Params~~**](https://unhead.unjs.io/docs/schema-org/guides/core-concepts/params))_
- **image**: `**image**` from resolved page metadata
- **description**: `**description**` from resolved page metadata
- **inLanguage**: `**inLanguage**` from resolved page metadata
- **mainEntityOfPage**: WebPage Reference

## Types

```
/**
 * Instructions that explain how to achieve a result by performing a sequence of steps.
 */
export interface HowToSimple extends Thing {
  /**
   * A string describing the guide.
   */
  name: string
  /**
   * An array of howToStep objects
   */
  step: NodeRelations<HowToStep | string>[]
  /**
   * The total time required to perform all instructions or directions (including time to prepare the supplies),
   * in ISO 8601 duration format.
   */
  totalTime?: string
  /**
   * Introduction or description content relating to the HowTo guide.
   */
  description?: string
  /**
   * The language code for the guide; e.g., en-GB.
   */
  inLanguage?: string
  /**
   * The estimated cost of the supplies consumed when performing instructions.
   */
  estimatedCost?: string | unknown
  /**
   * Image of the completed how-to.
   */
  image?: NodeRelations<ImageObject | string>
  /**
   * A supply consumed when performing instructions or a direction.
   */
  supply?: string | unknown
  /**
   * An object used (but not consumed) when performing instructions or a direction.
   */
  tool?: string | unknown
  /**
   * A video of the how-to. Follow the list of required and recommended Video properties.
   * Mark steps of the video with hasPart.
   */
  video?: NodeRelations<VideoObject | string>
  /**
   * The time required to prepare for the how-to, in ISO 8601 duration format.
   */
  prepTime?: string
  /**
   * The time it takes to perform the how-to, in ISO 8601 duration format.
   */
  performTime?: string
  /**
   * The quantity that results from performing the how-to.
   */
  yield?: string
}
```

```
export interface HowToStepSimple extends Thing {
  /**
   * A link to a fragment identifier (an 'ID anchor') of the individual step
   * (e.g., https://www.example.com/example-page/#recipe-step-5).
   */
  url?: string
  /**
   * The instruction string
   * ("e.g., "Bake at 200*C for 40 minutes, or until golden-brown, stirring periodically throughout").
   */
  text: string
  /**
   * The word or short phrase summarizing the step (for example, "Attach wires to post" or "Dig").
   * Don't use non-descriptive text (for example, "Step 1: [text]") or other form of step number (for example, "1. [text]").
   */
  name?: string
  /**
   * An image representing the step, referenced by ID.
   */
  image?: NodeRelations<ImageObject | string>
  /**
   * A video for this step or a clip of the video.
   */
  video?: NodeRelations<VideoObject | string>
  /**
   * A list of detailed substeps, including directions or tips.
   */
  itemListElement?: NodeRelations<HowToDirection | string>[]
}
```

## Related Schemas

- [**~~Recipe~~**](https://unhead.unjs.io/docs/schema-org/api/schema/recipe): Cooking instructions
- [**~~Article~~**](https://unhead.unjs.io/docs/schema-org/api/schema/article): Tutorial articles
- [**~~Person~~**](https://unhead.unjs.io/docs/schema-org/api/schema/person): Instruction author

[~~Edit this page~~](https://github.com/unjs/unhead/edit/main/docs/schema-org/5.api/9.schema/how-to.md)

[~~Markdown For LLMs~~](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/schema-org/5.api/9.schema/how-to.md)

**Did this page help you? **

[**Food Establishment Schema** Use defineFoodEstablishment() to describe a food-related business, including its menu, reservations, cuisine, address, and opening hours.](https://unhead.unjs.io/docs/schema-org/api/schema/food-establishment) [**Image Schema** Use defineImage() to add ImageObject structured data with captions, dimensions, content URLs, and language metadata.](https://unhead.unjs.io/docs/schema-org/api/schema/image)

**On this page **

- [JSON-LD Example](#json-ld-example)
- [Schema.org HowTo](#schemaorg-howto)
- [Useful Links](#useful-links)
- [Required properties](#required-properties)
- [Examples](#examples)
- [Defaults](#defaults)
- [Types](#types)
- [Related Schemas](#related-schemas)