XooCode(){

HowToDirection

HowToDirection dual-inherits from ListItem and CreativeWork. It represents a single action within a HowTo guide — the finer-grained sibling of HowToStep. It adds 8 direct properties:

  • beforeMedia, duringMedia, afterMedia (MediaObject or URL): photos or videos showing the state before, during, and after the action.
  • prepTime, performTime, totalTime (Duration): time to prepare, to perform, total.
  • supply (HowToSupply or Text): materials used.
  • tool (HowToTool or Text): tools used.

Full example of schema.org/HowToDirection json-ld markup

The markup is verified as valid with Rich Results Test from Google.

Highlight legend:Required by GoogleRecommendedOptional
schema.org/HowToDirection
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowToDirection",
  "name": "Glue the upright to the base",
  "text": "Apply a thin bead of acrylic glue along the bottom edge of the upright; press firmly against the centre of the base; hold for 60 seconds.",
  "performTime": "PT1M",
  "totalTime": "PT5M",
  "beforeMedia": { "@type": "ImageObject", "contentUrl": "https://xoocode.com/guides/stand/before-glue.jpg" },
  "duringMedia": { "@type": "VideoObject", "name": "Gluing the upright", "contentUrl": "https://xoocode.com/guides/stand/gluing.mp4", "uploadDate": "2026-03-20" },
  "afterMedia": { "@type": "ImageObject", "contentUrl": "https://xoocode.com/guides/stand/after-glue.jpg" },
  "supply": { "@type": "HowToSupply", "name": "Acrylic glue" },
  "tool": { "@type": "HowToTool", "name": "Clamp" }
}
</script>

HowToDirection vs HowToStep

A HowToStep can contain one or more HowToDirection entries. Use HowToDirection when a step breaks into multiple visual or timed sub-actions; use HowToStep when one name + text + image covers the whole step.

Minimal valid version

The smallest markup that still produces a valid HowToDirection 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/HowToDirection (minimal)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowToDirection",
  "name": "Glue the upright",
  "text": "Apply glue and press firmly for 60 seconds.",
  "performTime": "PT1M"
}
</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.

  • No dedicated rich result (consumed by AI instruction assistants)
    Google docs

Common HowToDirection 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

    Times as plain numbers

    Wrong
    "performTime": 60
    Right
    "performTime": "PT1M" (ISO 8601 duration)

    performTime expects ISO 8601; plain numbers are unitless.

  2. 02

    Media as bare URLs instead of typed MediaObjects

    Wrong
    beforeMedia as a URL string
    Right
    Typed ImageObject / VideoObject with contentUrl

    Typed media carries alt text, licensing, and upload date — all consumed by AI assistants.

Schema properties in this example

HowToDirectionListItemCreativeWorknametextperformTimetotalTimebeforeMediaImageObjectcontentUrlduringMediaVideoObjectuploadDateafterMediasupplyHowToSupplytoolHowToToolprepTime

Also mentioned in 1 other example

HowToDirection also appears in HowToTip. See the full HowToDirection schema page for every reference.

About the example data

The "Glue the upright" direction in the barcode-scanner stand guide, with before / during / after photos.

Comments

Loading comments...

Leave a comment