Recipe Pins

Recipe Pins let you add a title, serving size, cooking time, ratings and a list of ingredients to recipes from your site. We can also show if a recipe is paleo, vegetarian, vegan or gluten-free.

Add recipe Pins to your site

1. Add Schema.org or hRecipe markups between the <head> </head> section of your HTML code for each page you want to enable recipe Rich Pins on
2. Use our Rich Pin validator to make sure we can see the Rich Pin data
3. If everything looks good, click Apply now – make sure you pick HTML tags when applying

Recipe ratings

You can add ratings info to your recipe Rich Pins. To do so, add the meta tag needed via Schema.org markup. If you need help implementing ratings info to your site, feel free to visit Schema.org or take a look at this sample Pin to see how bettycrocker.com have set up their site. Please note that ratings info can only be added using Schema.org markup (not hRecipe) and ratings info will only appear on iOS and Android devices.

Schema.org and hRecipe markups

Here are the required Rich Pin fields for each type of markup. Edit the fields in black to reflect your recipes. Schema.org markups

<div itemscope itemtype="https://schema.org/Recipe">
    <span itemprop="name">
    Orange-Pineapple-Carrot Smoothie</span>
   <span itemprop="description">
    Description of your recipe.</span>
  <span itemprop="aggregateRating">
    Aggregate rating will appear here</span>
    <meta itemprop="url"
    content="https://myrecipesite.com/pineapple.html" />
    <span itemprop="recipeYield">Serves 1</span>
    Ingredients:
        <span itemprop="ingredients">ingredient 1</span>,
        <span itemprop="ingredients">ingredient 2</span>,
        <span itemprop="ingredients">ingredient 3</span>,
        <span itemprop="ingredients">
    add as many ingredient tags as you need</span>.
    Instructions:
    <span itemprop="recipeInstructions">
    Put the pineapple, ice, orange juice, carrot and
    banana into a blender. Blend until smooth.</span>
</div> 

hRecipe tags

<article class="h-recipe">
  <h1 class="p-name">Bagels</h1>
  <ul>
    <li class="p-ingredient">Flour</li>
    <li class="p-ingredient">Sugar</li>
    <li class="p-ingredient">Yeast</li>
  </ul>
  <p>Takes <time class="dt-duration" datetime="1H">1 hour</time>,
     serves <data class="p-yield" value="4">four people</data>.</p>
  <div class="e-instructions">
    <ol>
      <li>Start by mixing all of the ingredients together.</li>
    </ol>
  </div>
</article>

Check out our developer site to find out more. 

Still need help?
Contact us