Recipe

Recipe schema tells search engines and AI answer engines that a page contains cooking instructions. It powers Recipe rich results in Google Search, which display the recipe image, star ratings, cook time, and calorie count directly in search results. Recipes also appear in the Google Recipe carousel, Google Discover, and voice assistant cooking guides.

Why Recipe schema matters

Recipe rich results are among the most visually prominent in Google Search. They display a large image, star ratings, preparation time, calorie count, and step-by-step instructions. AI answer engines use Recipe schema to answer cooking queries directly: "how long does banana bread take to bake," "what ingredients do I need for pad thai," and "low calorie dessert recipes."

Without Recipe schema, search engines and AI systems must parse unstructured page content to extract recipe data. Structured markup guarantees they read the correct values.

Google requirements

Google requires name and image at the page level for Recipe rich result eligibility. All fields listed below are Recommended by Google, meaning they improve rich result appearance and AI answer engine coverage but are not required for eligibility.

For the full specification, see Google's Recipe structured data documentation.

Fields

All 9 Recipe-specific fields are Recommended by Google:

Recommended

• cookTime — Active cooking duration in ISO 8601 format
• nutrition — Nutritional breakdown using NutritionInformation
• prepTime — Preparation time in ISO 8601 format
• recipeCategory — Meal type: Dessert, Appetizer, Main course
• recipeCuisine — Regional origin: Italian, Mexican, Thai
• recipeIngredient — Array of ingredient strings with quantities
• recipeInstructions — Step-by-step directions using HowToStep objects
• recipeYield — Number of servings or physical yield
• totalTime — Full recipe duration in ISO 8601 format

JSON-LD example

A complete Recipe implementation using data from King Arthur Baking:

{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Banana Bread",
  "image": "https://www.kingarthurbaking.com/sites/default/files/recipe/banana-bread.jpg",
  "description": "This banana bread is moist, flavorful, and easy to make.",
  "prepTime": "PT20M",
  "cookTime": "PT1H10M",
  "totalTime": "PT1H30M",
  "recipeYield": ["18 servings", "1 loaf"],
  "recipeCategory": "Dessert",
  "recipeCuisine": "American",
  "recipeIngredient": [
    "8 tablespoons (113g) unsalted butter",
    "2/3 cup (142g) light brown sugar, packed",
    "1 teaspoon vanilla extract",
    "1 teaspoon ground cinnamon",
    "3 large ripe bananas, mashed",
    "2 large eggs",
    "2 cups all-purpose flour",
    "1 teaspoon baking soda",
    "1/2 teaspoon salt"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "Preheat the oven to 325°F. Lightly grease a 9x5-inch loaf pan."
    },
    {
      "@type": "HowToStep",
      "text": "In a large bowl, combine the butter, sugar, vanilla, cinnamon, baking soda, baking powder, and salt."
    },
    {
      "@type": "HowToStep",
      "text": "Stir in the mashed bananas and eggs until well combined."
    },
    {
      "@type": "HowToStep",
      "text": "Fold in the flour until just combined. Pour into the prepared pan."
    },
    {
      "@type": "HowToStep",
      "text": "Bake for 60 to 70 minutes until a toothpick inserted in the center comes out clean."
    }
  ],
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "170 calories",
    "fatContent": "6g",
    "carbohydrateContent": "27g",
    "proteinContent": "3g",
    "sugarContent": "14g",
    "sodiumContent": "230mg"
  }
}

Webflow implementation

Static recipe pages

Add the full JSON-LD block to Page Settings > Custom Code (Before ). Replace values with your actual recipe data.

CMS recipe template

Create CMS fields for each recipe property (name, prep time, cook time, ingredients, etc.) and reference them in an HTML embed on your recipe template page. See individual field articles for specific CMS field setup.

With Schema HQ

Schema HQ generates complete Recipe schema from your Webflow CMS fields. It maps your content to all 9 recommended properties, formats time values as ISO 8601, builds ingredient arrays, and structures instructions as HowToStep objects. Publish directly to Webflow custom code without manual JSON-LD construction.