Recipes

Annotations for recipes can be used by Bing to enhance its recipe-related features. Your website may contain the following recipe:

For example, your website may have the following content:

Dan Jump’s peanut butter and jelly sandwich spectacular

By: Dan Jump (May 22, 2011)

My favorite recipe for a spectacular peanut butter and jelly sandwich. A kid favorite!

★★★★☆ (4.0 based on 50 reviews) Prep time: 30 minTotal time: 30 minYield: 1 sandwich (1 serving)

Serving size: 1 sandwichCalories per serving: 200

Ingredients

Slices of bread: 2 slicesPeanut butter: 1 tablespoonStrawberry jelly: 1 tablespoon

Directions

  1. Spread peanut butter on one slice of bread
  2. Spread jelly on other piece of bread
  3. Put the two pieces of bread together (jelly and peanut butter on the inside) and serve

Marking It Up

Recipes will contain one or more of the following attributes.

 

Item property

Microdata

Microformats

RDFa

Description

Name

name

fn

name

Required. Name of the recipe.

Author

author

author

author

The author of the recipe.

Published

published

published

published

The date the recipe was published.

Summary

summary

summary

summary

Summary describing the recipe.

Recipe type

recipeType

recipetype

recipeType

The type of dish. For example, the dish could be an appetizer, main course, or desert.

Photograph

photo

photo

photo

Picture associated with the recipe. This can be a picture of the dish or the ingredients of the dish.

Review

review

review

review

Review of the recipe.

Preparation time

prepTIme

preptime

prepTime

The amount of time needed to prepare the ingredients of the recipe.

Total time required for preparation and cooking

totalTime

totaltime

totalTime

The total time it takes to prepare the ingredients and cook the dish.

Yield

yield

yield

yield

The quantity of the dish prepared by the recipe (e.g. number of servings).

Nutrition

nutrition

nutrition

nutrition

Nutritional information of the dish the recipe is used to prepare.

Ingredient

ingredient

ingredient

ingredient

An ingredient used in the recipe.

Instructions

instructions

instructions

instructions

The steps specified by the recipe to prepare the dish.

Bing recommends the use of the ISO 8601 standard for dates, times and durations.

Within the ingredient item property, Bing supports the following optional sub-properties for all supported annotation formats:

  • name: the name of the ingredient (e.g. “sugar”, “jelly”)
  • amount: the amount of the ingredient used in the recipe (e.g. “1 tablespoon”)

Within the nutrition item property, Bing supports the following optional sub-properties for all supported annotation formats:

  1. servingSize: (servingsize in microformats) the serving size for the dish
  2. calories: the number of calories per serving

Microdata

Example: Recipe for “Dan Jump’s peanut butter and jelly sandwich spectacular”

<div itemscope itemtype="http://data-vocabulary.org/Recipe"> <div itemprop="name"><strong>Dan Jump’s peanut butter and jelly sandwich spectacular</strong></div> <div> By: <span itemprop="author">Dan Jump</span> (<span itemprop="published" datetime="2011-05-22">May 22, 2011</span>) </div> <div itemprop="summary"> My favorite recipe for a spectacular peanut butter and jelly sandwich. A kid favorite! </div> <div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate"> ★★★★☆ (<span itemprop="rating">4.0</span> based on <span itemprop="count">50</span> reviews) </div> <div>Prep time: <time itemprop="prepTime" datetime="PT30M">30 min</time></div> <div>Total time: <time itemprop="totalTime" datetime="PT30M">30 min</time> <div>Yield: <span itemprop="yield">1 sandwich (1 serving)</span></div> <div itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition"> <div>Serving size: <span itemprop="servingSize">1 sandwich</span></div> <div>Calories per serving: <span itemprop="calories">200</span></div> </div> <div><strong>Ingredients</strong></div> <div itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"> Slices of <span itemprop="name">bread</span>: <span itemprop="amount">2 slices</span> </div> <div itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"> <span itemprop="name">Peanut butter</span>: <span itemprop="amount">1 tablespoon</span> </div> <div itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"> <span itemprop="name">Strawberry jelly</span>: <span itemprop="amount">1 tablespoon</span> </div> <div><strong>Directions</strong></div> <div itemprop="instructions"> <ol> <li>Spread peanut butter on one slice of bread</li> <li>Spread jelly on other piece of bread</li> <li>Put the two pieces of bread together (jelly and peanut butter on the inside) and serve</li> </ol> </div> </div>

Breaking It Down

In this example, we declare a total of four item types:

  • Recipe: itemtype="http://data-vocabulary.org/Recipe"
  • Review (using an embedded aggregated review): itemtype="http://data-vocabulary.org/Review-aggregate"
  • Nutrition: itemtype="http://data-vocabulary.org/Nutrition"
  • Ingredient: itemtype="http://data-vocabulary.org/RecipeIngredient"

Using a combination of block and inline elements, we annotate the recipe details. We annotate the preparation and total time using HTML 5’s new time element and the ISO 8601 standard for duration. Here’s how “PT30M” breaks down:

  1. P is the duration indicator
  2. T is the time component indicator
  3. 30 is the value
  4. M is the minute indicator; use H for hours and S for seconds

Note the use of the datetime attribute to convey machine-readable content to search engines, while displaying human-friendly versions of the date and durations on the page.

Finally, we annotate the step-by-step instructions by embedding an ordered list within the instructions block (itemprop="instructions").

Microformats (hRecipe)

Example: Recipe for “Dan Jump’s peanut butter and jelly sandwich spectacular”

<div class="hrecipe"> <div class="fn"><strong>Dan Jump’s peanut butter and jelly sandwich spectacular</strong></div> <div> By: <span class="author">Dan Jump</span> (<span class="published">May 22, 2011</span>) </div> <div class="summary"> My favorite recipe for a spectacular peanut butter and jelly sandwich. A kid favorite! </div> <div class="hreview-aggregate"> ★★★★☆ (<span class="average">4.0</span> based on <span class="count">50</span> reviews) </div> <div>Prep time: <span class="preptime">30 min<span class="value-title" title="PT30M"></span></span></div> <div>Total time: <span class="totaltime">30 min<span class="value-title" title="PT30M"></span></span></div> <div>Yield: <span class="yield">1 sandwich (1 serving)</span></div> <div class="nutrition"> <div>Serving size: <span class="servingsize">1 sandwich</span></div> <div>Calories per serving: <span class="calories">200</span></div> </div> <div><strong>Ingredients</strong></div> <div class="ingredient"> Slices of <span class="name">bread</span>: <span class="amount">2 slices</span> </div> <div class="ingredient"> <span class="name">Peanut butter</span>: <span class="amount">1 tablespoon</span> </div> <div class="ingredient"> <span class="name">Strawberry jelly</span>: <span class="amount">1 tablespoon</span> </div> <div><strong>Directions</strong></div> <div class="instructions"> <ol> <li>Spread peanut butter on one slice of bread</li> <li>Spread jelly on other piece of bread</li> <li>Put the two pieces of bread together (jelly and peanut butter on the inside) and serve</li> </ol> </div> </div>

Breaking It Down

In this example, the hRecipe specification is used to annotate the contact information. In the first line, we define the item type (class="hrecipe").

We use a combination of item types to annotate this content:

  • Recipe: class="hrecipe"
  • Review (using an embedded aggregated review): class="hreview-aggregate"
  • Nutrition: class="nutrition"
  • Ingredient: class="ingredient"

Using a combination of block and inline elements, we annotate the recipe details. We annotate the preparation and total time using the ISO 8601 standard for duration. Here’s how “PT30M” breaks down:

  • P is the duration indicator
  • T is the time component indicator
  • 30 is the value
  • M is the minute indicator; use H for hours and S for seconds

We use an empty span element to convey machine-readable content to search engines, while displaying human-friendly versions of the date and durations on the page (class="value-title" title="PT30M").

Finally, we annotate the step-by-step instructions by embedding an ordered list within the instructions block (class="instructions").

RDFa

Example: Recipe for “Dan Jump’s peanut butter and jelly sandwich spectacular”

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe"> <div property="v:name"><strong>Dan Jump’s peanut butter and jelly sandwich spectacular</strong></div> <div> By: <span property="v:author">Dan Jump</span> (<span property="v:published" content="2011-05-22">May 22, 2011</span>) </div> <div property="v:summary"> My favorite recipe for a spectacular peanut butter and jelly sandwich. A kid favorite! </div> <div rel="v:review"> <div typeof="v:Review-aggregate"> <div rel="v:rating"> <div typeof="v:Rating"> ★★★★☆ (<span property="v:average">4.0</span> based on <span property="v:count">50</span> reviews) </div> </div> </div> </div> <div>Prep time: <span property="v:prepTime" content="PT30M">30 min</span></div> <div>Total time: <span property="v:totalTime" content="PT30M">30 min</span></div> <div>Yield: <span property="v:yield">1 sandwich (1 serving)</span></div> <div rel="v:nutrition"> <div typeof="v:Nutrition"> <div>Serving size: <span property="v:servingSize">1 sandwich</span></div> <div>Calories per serving: <span property="v:calories">200</span></div> </div> </div> <div><strong>Ingredients</strong></div> <div rel="v:ingredient"> <div typeof="v:Ingredient"> Slices of <span property="v:name">bread</span>: <span property="v:amount">2 slices</span> </div> </div> <div rel="v:ingredient"> <div typeof="v:Ingredient"> <span property="v:name">Peanut butter</span>: <span property="v:amount">1 tablespoon</span> </div> </div> <div rel="v:ingredient"> <div typeof="v:Ingredient"> <span property="v:name">Strawberry jelly</span>: <span property="v:amount">1 tablespoon</span> </div> </div> <div><strong>Directions</strong></div > <div property="v:instructions"> <ol> <li>Spread peanut butter on one slice of bread</li> <li>Spread jelly on other piece of bread</li> <li>Put the two pieces of bread together (jelly and peanut butter on the inside) and serve</li> </ol> </div></div>

Breaking It Down

In this example, the first line declares the namespace (xmlns:v="http://rdf.data-vocabulary.org/#") followed by the item type declaration (typeof="v:Recipe"). Using a combination of block and inline elements, the syntax defines three additional item types:

  • Review: typeof="v:Review-aggregate"
  • Nutrition: typeof="v:Nutrition"
  • Ingredient: typeof="v:Ingredient"

Note the prefix referring to the namespace we declared in the first line of the syntax (v:). We use the rel attribute, as opposed to the property attribute, to denote the relationship between the different blocks of information.

We annotate the preparation and total time using the ISO 8601 standard for duration. Here’s how “PT30M” breaks down:

  • P is the duration indicator
  • T is the time component indicator
  • 30 is the value
  • M is the minute indicator; use H for hours and S for seconds

Note the use of the content attribute to convey machine-readable content to search engines, while displaying human-friendly versions of the date and durations on the page.

Finally, we annotate the step-by-step instructions by embedding an ordered list within the instructions block (property="v:instructions").