recipeInstructions

recipeInstructions · Recommended

Appears in

Recipe

What is it?

recipeInstructions contains the step-by-step directions for making a recipe. Each step can be a simple text string or a structured HowToStep object with a name, text, URL, and image. For complex recipes with multiple phases, steps can be grouped into HowToSection objects.

Why this matters for AEO

Recipe instructions are heavily used by AI answer engines and voice assistants. When a user asks "how do I make banana bread" or "what's the next step," the engine reads individual HowToStep entries to provide sequential guidance. Structured steps enable voice assistants to walk users through a recipe one step at a time. Google also uses structured instructions for step-by-step display in recipe rich results.

What the specs say

Schema.org:Text, CreativeWork, or ItemList. A step in making the recipe, in the form of a single item (document, video, etc.) or an ordered list with HowToStep and/or HowToSection items. Source

Google: Recommended. "The steps to make the dish." Source

Google strongly prefers HowToStep objects over plain text strings.

How to find your value

• Recipe card — The numbered directions or method section
• Cookbook — The step-by-step instructions below ingredients
• CMS — Rich text instruction fields or individual step entries

Break instructions into logical steps. Each step should describe one action or a small group of closely related actions.

Format and code

HowToStep array (recommended)

This is the format Google prefers and most recipe sites use:

{
  "@type": "Recipe",
  "name": "Banana Bread",
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Preheat the oven to 350°F and grease a 9x5-inch loaf pan."
    },
    {
      "@type": "HowToStep",
      "text": "In a large bowl, mash the bananas with a fork until smooth."
    },
    {
      "@type": "HowToStep",
      "text": "Stir in the melted butter, sugar, eggs, and vanilla extract."
    },
    {
      "@type": "HowToStep",
      "text": "Fold in the flour, baking soda, and salt until just combined."
    },
    {
      "@type": "HowToStep",
      "text": "Pour the batter into the prepared pan and bake for 55 to 65 minutes."
    }
  ]
}

HowToStep with name and image

For richer results, add a name (short summary) and image to each step:

{
  "@type": "HowToStep",
  "name": "Prepare the pan",
  "text": "Preheat the oven to 350°F and grease a 9x5-inch loaf pan with butter or cooking spray.",
  "image": "https://example.com/images/step1.jpg"
}

HowToSection for grouped steps

For recipes with distinct phases (dough, filling, assembly), use HowToSection:

{
  "@type": "Recipe",
  "name": "Cinnamon Rolls",
  "recipeInstructions": [
    {
      "@type": "HowToSection",
      "name": "Make the dough",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "text": "Warm the milk to 110°F and dissolve the yeast."
        },
        {
          "@type": "HowToStep",
          "text": "Mix in the flour, sugar, and salt until a dough forms."
        }
      ]
    },
    {
      "@type": "HowToSection",
      "name": "Make the filling",
      "itemListElement": [
        {
          "@type": "HowToStep",
          "text": "Combine brown sugar, cinnamon, and softened butter."
        }
      ]
    }
  ]
}

Plain text (valid but not recommended)

A single string with all instructions is technically valid but loses all the structural benefits:

{
  "recipeInstructions": "Preheat oven to 350°F. Mash bananas. Mix wet ingredients. Fold in dry ingredients. Bake 55-65 minutes."
}

Google will accept this but cannot display individual steps in rich results or enable step-by-step voice guidance.

Webflow implementation

Static pages

Add to Page Settings > Custom Code (Before ):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Banana Bread",
  "recipeInstructions": [
    {"@type": "HowToStep", "text": "Preheat the oven to 350°F and grease a loaf pan."},
    {"@type": "HowToStep", "text": "Mash bananas and mix with wet ingredients."},
    {"@type": "HowToStep", "text": "Fold in flour, baking soda, and salt."},
    {"@type": "HowToStep", "text": "Pour into pan and bake for 55-65 minutes."}
  ]
}
</script>

CMS template pages

Webflow CMS does not natively support arrays of objects. Store instructions in a rich text field with numbered steps, then use JavaScript to parse them:

<script>
  var stepsText = "{{wf {"path":"instructions","type":"PlainText"} }}";
  var steps = stepsText.split("\n").filter(function(s) { return s.trim(); });
  var howToSteps = steps.map(function(s) {
    return {"@type": "HowToStep", "text": s.replace(/^\d+\.\s*/, '')};
  });
  // Insert howToSteps into your JSON-LD object
</script>

In Schema HQ

The recipeInstructions field parses your Webflow CMS instruction fields and automatically generates HowToStep objects. It handles numbered lists, rich text formatting, and multi-step CMS structures, outputting valid structured instructions without manual JSON construction.

Real examples

King Arthur Baking (source):

{
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Preheat the oven to 325°F. Lightly grease a 9\" x 5\" loaf pan."
    },
    {
      "@type": "HowToStep",
      "text": "In a large bowl, combine the butter, sugar, vanilla, cinnamon, nutmeg, baking soda, baking powder, and salt."
    }
  ]
}

Love and Lemons (source):

{
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Preheat the oven to 350°F and grease an 8x4 or 9x5-inch loaf pan."
    },
    {
      "@type": "HowToStep",
      "text": "In a large bowl, whisk together the mashed banana, sugar, butter, eggs, and vanilla."
    }
  ]
}

Both sites use the HowToStep format. Neither uses HowToSection for these straightforward single-phase recipes.

Related fields

• recipeIngredient lists the ingredients these instructions reference
• prepTime records how long the preparation steps take
• cookTime records how long the cooking steps take
• totalTime captures the full recipe duration
• recipeYield states what these instructions produce

FAQ

Should I use HowToStep objects or plain text?

Use HowToStep objects. Google strongly prefers them and they enable step-by-step display in rich results and voice assistant guidance. Plain text strings are valid but provide fewer benefits.

When should I use HowToSection?

Use HowToSection when a recipe has distinct phases that a cook would recognize as separate tasks: making the dough, preparing the filling, assembling the layers. Do not use sections just to break up a linear set of steps.

How granular should each step be?

Each step should describe one action or a small cluster of actions that happen together. "Preheat the oven to 350°F and grease the pan" is a good single step. An entire paragraph combining mixing, resting, and baking should be split into multiple steps.