Create recipe rich Pins on your website

If you have not read our Create rich Pins article yet, we recommend starting there.

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

Add recipe Pins to your site

1. Add 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 Pins Validator to make sure we can see the Rich Pin data
3. If everything looks good, click Apply now - make sure to 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 markup. If you need help implementing Ratings info to your site, feel free to visit or take a look at this sample Pin to see how has set up their site. Please note that Ratings info can only be added using markup (not h-recipe) and Ratings info will only show up on iOS and Android devices. and hrecipe markups

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

<div itemscope itemtype="">
    <span itemprop="name">
    Orange-Pineapple-Carrot Smoothie</span>
   <span itemprop="description">
    Description of your recipe.</span>
  <span itemprop="aggregateRating">
    Aggregate rating will show here</span>
    <meta itemprop="url"
    content="" />
    <span itemprop="recipeYield">Serves 1</span>
        <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>.
    <span itemprop="recipeInstructions">
    Put the pineapple, ice, orange juice, carrot and
    banana in a blender. Blend until smooth.</span>

hrecipe tags

<article class="h-recipe">
  <h1 class="p-name">Bagels</h1>
    <li class="p-ingredient">Flour</li>
    <li class="p-ingredient">Sugar</li>
    <li class="p-ingredient">Yeast</li>
  <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">
      <li>Start by mixing all the ingredients together.</li>

Check out our developer site to learn more. 

Still need help?
Contact us