HowTo Schema - JSON-LD Guide & Examples · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/svelte/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/svelte/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/svelte/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/svelte/releases/v3)

Svelte

- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/how-to)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/schema-org/api/schema/how-to)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/schema-org/api/schema/how-to)
- [Switch to React](https://unhead.unjs.io/docs/react/schema-org/api/schema/how-to)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/schema-org/api/schema/how-to)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/schema-org/api/schema/how-to)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/schema-org/api/schema/how-to)

v3 (stable)

Schema.org

- [Discord Support](https://discord.com/invite/275MBUBvgP)
- [Svelte Playground](https://stackblitz.com/edit/github-ckbygkxk)

- Composables
  - [`useSchemaOrg()`](https://unhead.unjs.io/docs/svelte/schema-org/api/composables/use-schema-org)
- Nodes
  - [Article](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/article)
  - [Book Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/book)
  - [Breadcrumb Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/breadcrumb)
  - [Comment Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/comment)
  - [Course Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/course)
  - [Dataset Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/dataset)
  - [Event Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/event)
  - [Food Establishment Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/food-establishment)
  - [HowTo](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/how-to)
  - [Image Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/image)
  - [ItemList](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/item-list)
  - [JobPosting](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/job-posting)
  - [LocalBusiness](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/local-business)
  - [Movie Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/movie)
  - [Music Album Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/music-album)
  - [Music Group Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/music-group)
  - [Music Playlist Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/music-playlist)
  - [Music Recording Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/music-recording)
  - [Organization](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/organization)
  - [Person Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/person)
  - [Podcast Episode Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/podcast-episode)
  - [Podcast Season Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/podcast-season)
  - [Podcast Series Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/podcast-series)
  - [Product Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/product)
  - [Question Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/question)
  - [Recipe Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/recipe)
  - [Service Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/service)
  - [SoftwareApplication](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/software-app)
  - [TV Episode Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/tv-episode)
  - [TV Season Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/tv-season)
  - [TV Series Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/tv-series)
  - [Video Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/video)
  - [WebPage Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/webpage)
  - [WebSite Schema](https://unhead.unjs.io/docs/svelte/schema-org/api/schema/website)

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)

Last updated Mar 5, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: improve SEO for schema.org pages, overview, and React Helmet migration (#675)](https://github.com/unjs/unhead/pull/675).

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)

HowTo schema marks up step-by-step instructions so Google can display them as rich results with expandable steps. Use it for tutorials, guides, DIY instructions, and how-to content.

### [JSON-LD Example](#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"
}
```

With Unhead, generate this using the `defineHowTo()` composable — see the [API reference](#schema-org-howto) below.

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

## [Schema.org HowTo](#schemaorg-howto)

- **Type**: `defineHowTo(input?: HowTo)`Describes a HowTo guide, which contains a series of steps.

## [Useful Links](#useful-links)

- [HowTo - Schema.org](https://schema.org/HowTo)
- [How-To Schema Markup - Google Search Central](https://developers.google.com/search/docs/advanced/structured-data/how-to)
- [HowTo - Yoast](https://developer.yoast.com/features/schema/pieces/howto)

## [Required properties](#required-properties)

- **name** `string`A string describing the guide. This can be provided using route meta on the `title` key, see [defaults](#defaults).
- **step** `HowToStep[]`.An array of objects describing the steps in the guide. Appends the [HowToStep](https://developers.google.com/search/docs/advanced/structured-data/how-to#how-to-step) entries on to the HowTo. Completes `@type` and resolves `url` and `image`.
- **step.text** The full instruction text of this step.

## [Examples](#examples)

### [Minimal](#minimal)

```
defineHowTo({
  name: 'How to tie a tie',
  step: [
    {
      url: '#step-one',
      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: '/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 long end back under the short end, then throw it back over the top of the short end in the other direction. ',
      image: '/1x1/photo.jpg',
    },
    {
      text: 'Now pull the long and through the loop near your neck, forming another loop near your neck.',
      image: '/1x1/photo.jpg',
    },
    {
      text: 'Pull the long end through that new loop and tighten to fit! ',
      image: '/1x1/photo.jpg',
    },
  ]
})
```

## [Defaults](#defaults)

- **@type**: `HowTo`
- **@id**: `${canonicalUrl}#howTo`
- **name**: `currentRouteMeta.title` _(see: [Schema.org Params](https://unhead.unjs.io/docs/schema-org/guides/core-concepts/params))_
- **image**: `currentRouteMeta.image` _(see: [Schema.org Params](https://unhead.unjs.io/docs/schema-org/guides/core-concepts/params))_
- **description**: `currentRouteMeta.description` _(see: [Schema.org Params](https://unhead.unjs.io/docs/schema-org/guides/core-concepts/params))_
- **inLanguage**: `options.defaultLanguage` _(see: [user Config](https://unhead.unjs.io/docs/schema-org/guides/core-concepts/params))_
- **mainEntityOfPage**: WebPage Reference

## [Types](#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](#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 add Restaurant structured data. Display menu, reservations, and cuisine info in Google Maps and local search.](https://unhead.unjs.io/docs/schema-org/api/schema/food-establishment) [Image Schema Use defineImage() to add ImageObject structured data. Provide image metadata with captions, dimensions, and alt text for rich results.](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)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/svelte/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/svelte/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/svelte/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/svelte/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/svelte/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/svelte/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/svelte/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/svelte/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/svelte/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/svelte/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/svelte/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/svelte/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/svelte/head/guides/plugins/template-params)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)