How can recipe markup link directly to an instruction step?

Definition: A HowToStep.url value is the recipe page URL followed by a fragment that identifies the HTML location of one instruction. The same step object can carry an image URL or a structured video value for media associated with that instruction.

Key facts

• Google's Recipe structured data documentation describes recipeInstructions as the steps to make the dish and recommends HowToStep.
• Google's example gives each step a URL ending in a fragment such as #step1, alongside an image URL for that step.
• Schema.org describes HowToStep as a step in instructions and defines its url property as the URL of the item.
• The same Schema.org page describes image as a URL or ImageObject, and video as a Clip or VideoObject.
• The HTML Standard requires an id value to be unique in the element's tree and says that an element identifier can link to a specific part of a document with a fragment.

How does the direct link reach the step?

Google's recipe example puts the fragment in HowToStep.url. The fragment after # must match an id on the rendered page, so the structured data and the visible instruction identify the same location.

"recipeInstructions": [
  {
    "@type": "HowToStep",
    "name": "Preheat",
    "text": "Heat oven to 425°F.",
    "url": "https://example.com/recipe#step1",
    "image": "https://example.com/photos/recipe/step1.jpg"
  }
]

The HTML Standard says that the id value gives an element a unique identifier and that identifiers can be used to link to specific document parts through fragments. It requires at least one character and forbids ASCII whitespace in the value. A corresponding rendered element can therefore look like this:

<li id="step1">Heat oven to 425°F.</li>

The identifier is an implementation detail shared by the page and the structured data. Schema.org calls the url property the URL of the item, while Google supplies the fragment pattern in its recipe example.

How do images and video belong to a step?

Google's HowToStep example places an image URL inside each step object, next to name, text, and url. Keep the image value on the step whose instruction it represents. A step image is therefore separate from the recipe's main image property.

Schema.org defines image on HowToStep as an ImageObject or a URL, with the description “An image of the item.” Its table also lists video with the expected types Clip or VideoObject and describes it as an embedded video object. These types describe the vocabulary available on the step; Google's Recipe example specifically demonstrates an image URL.

What should recipeInstructions contain?

Google's documentation says that recipeInstructions can use HowToStep, HowToSection, or text, and recommends HowToStep for specifying the recipe's steps. When a recipe has sections, HowToSection can group its HowToStep items.

The same documentation says to include only text about making the dish in the instruction content. It gives “Directions”, “Watch the video”, and “Step 1” as phrases to place outside structured data. The instruction's text should therefore contain the action itself, while the page can present labels, links, or media controls in its visible HTML.

How can a direct link be checked?

Inspect each HowToStep.url and separate its page URL from its fragment. Check that the fragment has a matching rendered id, that the identifier is unique, and that the step's media values sit on the intended HowToStep. For image data, the documented choices are a URL or ImageObject; for video data, they are Clip or VideoObject.

Related terms

• HowTo structured data
• How should a recipe separate steps into sections?
• What must a recipe's main image show?

FAQ

Does HowToStep.url create a separate recipe page?

No. The fragment identifies a location within the page URL. The HTML Standard describes element identifiers as a way to link to specific parts of a document.

Must the fragment be named step1?

No naming pattern is stated in the documentation. Google's example uses step1, while the HTML Standard describes identifiers as opaque strings. The value in the URL and the value in the rendered id must match.

Can one step have both an image and a video?

The Schema.org HowToStep vocabulary lists both image and video. It defines image values as URLs or ImageObject values and video values as Clip or VideoObject values.

Sources

1. Google Search Central, "Recipe (Recipe, HowTo, ItemList) structured data", 8 September 2026
2. Schema.org, "HowToStep", undated
3. WHATWG, "HTML Standard: The id attribute", undated

---

Check how a page reads to answer engines. Open the GEO score analyzer