Rich snippets - Recipes

New! schema.org lets you mark up a much wider range of item types on your pages, using a vocabulary that Google, Microsoft, and Yahoo! can all understand. Find out more. (Google still supports your existing rich snippets markup, though.)

When recipe information is marked up in web pages, Google may use that information to show rich snippets for recipe results, and for inclusion in Google with Recipe View. (Recipe View is currently available only in the US and Japan, but we're working to bring it everywhere.)


snippet for a recipe marked up with hRecipe format

Usage guidelines

The goal of a recipe rich snippet is to provide users with additional information about a specific cooking recipe, such as the reviewer(s) star ratings (1 to 5 stars), cook/prep time, and calorie information.

The following guidelines apply to recipe snippets:

  • When using recipe markup, the main topic of the page needs to be about a specific recipe. Using recipe markup on a page containing multiple recipes is not supported.
  • If the recipe markup contains a single review, the reviewer’s name needs to be a valid name (Person or Organization). For example, "50% off ingredients" is not a valid name for a reviewer.

Properties

Google recognizes the following microdata, RDFa, and microformats (hRecipe) properties. Where the microformats name differs from the microdata/RDFa name, the hRecipe name appears in parentheses. Properties in bold are required. In addition, rich snippets are currently only shown for recipes that provide at least two of the following:
  • photo
  • prepTime, cookTime, totalTime, or ingredients
  • calories
  • review (nested)
Property Description
name (fn) The name of the dish.
recipeType (tag) The type of dish: for example, appetizer, entree, dessert ...
photo Image of the dish being prepared.
published The date the recipe was published, in ISO date format.
summary A short summary describing the dish.
review A review of the dish. Can include nested review information.
prepTime The length of time it takes to prepare the recipe for dish, in ISO 8601 duration format. Can use min, max as child elements to specify a range of time.
cookTime The time it takes to actually cook the dish, in ISO 8601 duration format. Can use min, max as child elements to specify a range of time.
totalTime (duration) The total time it takes to prepare the cook the dish, in ISO 8601 duration format. Can use min, max as child elements to specify a range of time.
nutrition Nutrition information about the recipe. Can contain the following child elements: servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein, cholesterol. These elements are not explicitly part of the hRecipe microformat, but Google will recognize them.
instructions The steps to make the dish. Can contain the child element instruction, which can be used to annotate each step.
yield The quantity produced by the recipe (for example, number of people served, number of servings, etc).
ingredient An ingredient used in the recipe. Can contain child items name (name of the ingredient) and amount. Use this to identify individual ingredients.
author Creator of the recipe. Can include nested Person information.

Marking up content

The following HTML code describes a recipe for apple pie:
<div>
  <h1>Grandma's Holiday Apple Pie</h1>
  <img src="apple-pie.jpg" />
  By Carol Smith
  Published: November 5, 2009
  This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
  4.0 stars based on 35 reviews
  Prep time: 30 min
  Cook time: 1 hour
  Total time: 1 hr 30 min
  Yield: 1 9" pie (8 servings)
  Serving size: 1 medium slice
  Calories per serving: 250
  Fat per serving: 12g
  Ingredients: 
    Thinly-sliced apples: 6 cups
    White sugar: 3/4 cup 
  ... 
		
  Directions: 
    1. Cut and peel apples 
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. 
  ...
</div>

The following sections describe how to mark up this content using microdata, microformats, or RDFa.

To check that your markup is correct, and preview how your content might look in search results, use the structured data testing tool.
Microdata

Here is the same HTML code marked up with microdata.

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
  <h1 itemprop="name">Grandma's Holiday Apple Pie</h1>
  <img itemprop="photo" src="apple-pie.jpg" /> 
  By <span itemprop="author">Carol Smith</span>
  Published: <time datetime="2009-11-05" itemprop="published">
    November 5, 2009</time>
  <span itemprop="summary">This is my grandmother's apple pie recipe. I like to add a
    dash of nutmeg.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <span itemprop="rating">4.0</span> stars based on
    <span itemprop="count">35</span> reviews </span>
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  Yield: <span itemprop="yield">1 9" pie (8 servings)</span>
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Serving size: <span itemprop="servingSize">1 medium slice</span>
    Calories per serving: <span itemprop="calories">250</span>
    Fat per serving: <span itemprop="fat">12g</span>
  </span>
  Ingredients:
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      Thinly-sliced <span itemprop="name">apples</span>:
      <span itemprop="amount">6 cups</span>
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">White sugar</span>:
      <span itemprop="amount">3/4 cup</span>
    </span>
  ...
		  
  Directions:
    <div itemprop="instructions">
      1. Cut and peel apples
      2. Mix sugar and cinnamon. Use additional sugar for tart apples.
      ...
    </div>
</div>

Here's how this sample works:

  • On the first line, indicates that the HTML enclosed in the <div> represents a Recipe. itemscope indicates that the content of the <div> describes an item, and itemtype="http://www.data-vocabulary.org/Recipe" indicates that the item is a Recipe.
  • The sample describes properties of the recipe, such as its author, ingredients, and preparation time. To label recipe properties, each element containing one of these properties (such as <div> or <span> is assigned an itemprop attribute indicating a property. For example, <span itemprop="author">.
  • A property can consist of another item (in other words, an item can include other items). For example, the recipe above includes an Review-aggregate item (itemtype="http://www.data-vocabulary.org/Review-aggregate") with the properties rating and count, and a Recipe-ingredient item (ingredient), which in turn has the properties amount and name.
  • Except in special circumstances, Google won't display content that is not visible to the user. However, in some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be visible to the people who visit your page. This example uses the datetime attribute to indicate that the rich snippets parser should use the attribute value to find the prep time, cook time, and total time needed to make the dish, but still displays the durations on the page in a human-readable way. For example: <time datetime="PT1H" itemprop="cookTime">1 hour</time>.
Microformats

Here is the same HTML code marked up with microformats. (Note: Some of the properties shown above, while recognized by Google, are not part of the official hRecipe draft specification published on microformats.org.)

<div class="hrecipe">
   <span class="item">
      <h1 class="fn">Grandma's Holiday Apple Pie</h1>
   </span>
   <img src="apple-pie.jpg" class="photo" />
   By <span class="author">Carol Smith</span>
   Published: <span class="published"> November 5, 2009<span class="value-title" title="2009-11-05"></span></span>
   <span class="summary">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span>
   <span class="review hreview-aggregate">
      <span class="rating">
         <span class="average">4.0</span> stars based on
         <span class="count">35</span> reviews
      </span> 
   </span>
   Prep time: <span class="preptime">30 min <span class="value-title" title="PT30M"></span></span>
   Cook time: <span class="cooktime">1 hour<span class="value-title" title="PT1H"></span></span>   
   Total time: <span class="duration">1 hour 30 min <span class="value-title" title="PT1H30M"></span></span>
   Yield: <span class="yield">1 9" pie (8 servings)</span>
   <span class="nutrition">
      Serving size: <span class="servingsize">1 medium slice</span>
      Calories per serving: <span class="calories">250</span>
      Fat per serving: <span class="fat">12g</span>
   </span>   
   
   Ingredients:
   <span class="ingredient">
      Thinly-sliced <span class="name">apples</span>:
      <span class="amount">6 cups</span> 
   </span>
   <span class="ingredient">
      <span class="name">White sugar</span>:
      <span class="amount">3/4 cup</span> 
   </span>   

   Directions:
   <span class="instructions">
   1. Cut and peel apples
   2. Mix sugar and cinnamon. Use additional sugar for tart apples.
   ...   
   </span>
</div>

Here's how this sample works:

  • In the first line, class="hrecipe" indicates that the HTML enclosed in the divrepresents a Recipe—in this case, apple pie.
  • The structured information is conveyed by the class attribute (such as class="fn" and class="author"), and the values (such as "white sugar", "1 hr 30 min"). You can change the tags such as span and div to suit your formatting needs.
  • To display review information, Review-aggregate information (hreview-aggregate) is nested inside hrecipe. More information about nested items.
  • The rating (class="rating") represents a value of a ratings markup where the rating is written as "4.0 stars" on the recipe web page. More information about marking up review ratings.
  • Except in special circumstances, Google won't display content that is not visible to the user. However, in some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be visible to the people who visit your page. The HTML above contains an example of the microformats value class pattern, used to indicate the total cook time to search engines in ISO 8601 duration format, while at the same time displaying this information in human-friendly style ("1 hour 30 min") on the page itself. It uses the title attribute to indicate that the rich snippets parser should use the attribute value to find the total time needed to make the dish, but still displays the durations on the page in a human-readable way. For example: <span class="value-title" title="PT1H30M">.
RDFa

Here is the same HTML code marked up with RDFa.


<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   <h1 property="v:name">Grandma's Holiday Apple Pie</h1>
   <span rel="v:photo"/>
     <img src="apple-pie.jpg"/>
   </span>
   By <span property="v:author">Carol Smith</span>
   Published: <span property="v:published" content="2009-11-05">November 5, 2009</span>
   <span property="v:summary">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span>
   <span rel="v:Review">
      <span typeof="v:Review-aggregate">
         <span rel="v:rating">
            <span typeof="v:Rating">
               <span property="v:average">4.0</span> stars based on 
               <span property="v:count">35</span> reviews
            </span>
         </span>
      </span>
   </span>
   Prep time: <span property="v:prepTime" content="PT30M">30 min</span>
   Cook time: <span property="v:cookTime" content="PT1H">1 hour</span>
   Total time: <span property="v:totalTime" content="PT1H30M">1 hour 30 min</span>
   Yield: <span property="v:yield">1 9" pie (8 servings)</span>
   <span rel="v:nutrition">
      <span typeof="v:Nutrition"> 
        Serving size: <span property="v:servingSize">1 medium slice</span>
        Calories per serving: <span property="v:calories">250</span>
        Fat per serving: <span property="v:fat">12g</span> 
      </span>
   </span>
   Ingredients:   
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         Thinly-sliced <span property="v:name">apples</span>:   
         <span property="v:amount">6 cups</span> 
     </span>   
   </span>
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:name">White sugar</span>:   
         <span property="v:amount">3/4 cup</span>  
      </span>   
   </span>  
   ...
 
   Directions:
   <div property="v:instructions">
   1. Cut and peel apples
   2. Mix sugar and cinnamon. Use additional sugar for tart apples.
   ...   
   </div>
</div>

Here's how this sample works.

  • The example begins with a namespace declaration using xmlns. This indicates the namespace where the vocabulary (a list of entities and their components) is specified. You can use the xmlns:v="http://rdf.data-vocabulary.org/# namespace" declaration any time you are marking up pages for people, review, recipe, event, or place data. Be sure to use a trailing slash and # (xmlns:v="http://rdf.data-vocabulary.org/#").
  • Also on the first line, typeof="v:Recipe" indicates that the marked-up content describes a Recipe.
  • Each property of the recipe (such as the name, summary, and fat content) is labeled using property. The property name is prefixed with v: (<span property="v:fat">).
  • Except in special circumstances, Google won't display content that is not visible to the user. However, in some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be visible to the people who visit your page. This example uses the content attribute to indicate that the rich snippets parser should use the attribute value to find the prep time, cook time, and total time needed to make the dish, but still displays the durations on the page in a human-readable way. For example: <span content="PT30M" property="v:prepTime">30 min</span>.