I’m primarily a WordPress fangirl, but I’m also a Pinterest supporter. I recently got a question on how to add Recipe Rich Pins for Blogger, and the best post I found on it was outdated, using an older format. Luckily, the information on the developers site has been added since then to get you up to speed.

Pinterest uses a format called h-recipe, and it can also use Schema.org formatting. For these purposes, we’re going to go with h-recipe.

The documentation here is really all you’re going to need to add this to your Blogger site. Copy the code for the recipe from below, add your own details, then validate it. For any recipe post you make in Blogger, just start composing your message in the regular Compose tab. Then switch to HTML to add the recipe details at the end of the post. Here’s the code:

<meta property="og:site_name" content="Your Site Name" />
<article class="h-recipe">
    <h1 class="p-name">15 Minute Easy Margherita Flatbread Pizza</h1>
    <img class="u-photo" src="http://www.example.com/yourimagehere.jpg">

    <h3>Ingredients</h3>
    <ul>
      <li class="p-ingredient">1 Naan bread</li>
      <li class="p-ingredient">3 pieces fresh mozzarella</li>
      <li class="p-ingredient">1 1/2 tbsp olive oil</li>
      <li class="p-ingredient">1 1/2 tbsp balsamic vinegar</li>
      <li class="p-ingredient">5 basil leaves</li>
      <li class="p-ingredient">3 cloves garlic</li>
      <li class="p-ingredient">1 tomato</li>
    </ul>
    <p>Takes <time class="dt-duration" datetime="PT15M">15 min</time>,
     serves <data class="p-yield" value="4">four people</data>.</p>

    <h3>Instructions</h3>
    <ol class="e-instructions">
      <li>Press fresh garic and mix with oil.</li>
      <li>Brush the flatbread with half the oil mixture. Place in preheated oven for 5 minutes.</li>
      <li>Arange sliced mozzarella and tomato on flatbread. Place back in oven until cheese is melted and bubbly.</li>
      <li>Sprinkle with chopped basil.</li>
    </ol>
  </article>

Here’s what that looks like in your Blogger editor:

What does this all mean? Good question! Here it is broken down:

Those extra bits, dt-duration and p-yield aren’t necessary, and your code will validate without them. But they will display on your pins if you do it right!

The code on the developers site isn’t quite right for the dt-duration time fields. The code for that:

• PT15M – 15 minutes
• PT1H- 1 hour
• PT1H30M- 90 minutes, or an hour and a half

pt-yield is simply a value of how many servings, and the value=”x” tells Pinterest what to show, while the text between the <data></data> tags is what is shown to your site visitors.

Some extra tags you can add that aren’t currently on pins but might be used to help your pin appear with similar pins:

• p-summary – The recipe description, basically a quick description of the recipe similar to a meta description
• p-author – The person who wrote the recipe, optionally embedded with h-card
• dt-published – The date the recipe was published in microsyntax, already included in the Blogger post format
• p-nutrition – The nutritional information of the recipe (e.g., calories, fat or dietary fiber)

Once you have the post on your site and published, you can validate it to check your code. Do that at the Rich Pin Validator. If you’re already approved for Rich Pins, this simply can be used to test your code before pinning. If the link you added the data to has been pinned before, use the “Fetch new scrape information” button that appears to refresh the data for the URL.

If you haven’t applied yet, you can now click the Apply button. You’ll get an email back about approval very soon, sometimes within a few minutes or up to about 24 hours. Once you’ve been approved, all your pins that have meta data on the linked URL will start converting to the Rich Pin format!

Well, I hope this tutorial has helped you to implement those fancy Recipe Rich Pins for Blogger on your own site. Let me know if this helped you, or if you have any questions about these!