How to Add RECIPE Rich Pins on Blogger

I have previously shared a tutorial on how to add rich pins for articles to your Blogger Blog. I have had a ton of positive feedback on that article, and since the majority of bloggers on Pinterest need article pins, it is relevant to most bloggers. If you are a blogger who shares content on Pinterest, you want to have rich pins installed!

There is a another subset of bloggers who could also use the additional resource of RECIPE rich pins. Even if you only occasionally share recipes, it is a something you can use. It is a little more complicated but it isn’t hard once you know what to do.

What are Rich Pins for Recipes?

If you don’t know what a recipe rich pin is, here is an example.

You can see it includes the recipes, keywords for the type of recipe it is (Paleo, Vegetarian, Dessert, etc) as well as a “Make It” call to action button. It also has a “follow” button for your site. THIS IS HUGE. A big perk of rich pins.
Here is similar recipe, but you can see this blogger only has ARTICLE rich pin markup. It still has the authorship and follow buttons, but there is no actual cooking for food markup. Plus you can see it says “read it” instead of "Make it."
Recipe non rich

And (worst case scenario) here is a regular pin for the recipe. There is no markup available at all:
Non rich pin

How do you install Rich Pins for Recipes?

Well, first you need to install article rich pins, since a lot of the markup is the same. You can follow the original tutorial to do that. Go ahead.. I’ll wait.
Now that you have article rich pins, the only thing you need to add is the recipe specific markup. This is what your pins will look like before the markup:
Spinach before

Now you need to add the recipe information. There are two ways of doing this. One is to use Schema markup. The other is to use hRecipe markup. I’m going to show you how to use schema because it also means your posts will be marked up for GOOGLE!! (Yes, this is how you get your recipe images to show up in the recipe search on google!)

This is the most simple mark up. Just copy this code at the bottom of your post and add the indicated information in the HTML SECTION:

<div itemscope itemtype="http://schema.org/Recipe"> <h1 itemprop="name">ADD RECIPE NAME HERE </h1> 
<img itemprop="image" src="ADD IMAGE SOURCE URL" width="200"> 
By ADD AUTHOR NAME 
ADD DESCRIPTION UP TO 200 CHARACTERS 
Prep time: <time datetime="PT25M" itemprop="prepTime">ADD TIME</time>,
Cook time: <time datetime="PT25M" itemprop="cookTime">ADD TIME</time>,
Total time: <time datetime="PT50M" itemprop="totalTime">ADD TIME</time> 
Yield: ADD SERVINGS 
Ingredients: 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 

Instructions:
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li> 
<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Calories per serving: CALORIES HERE 
Fat per serving: FAT HERE </div> </div>

This is what mine looks while I’m actually composing the post:
Plain text HTML markup

And this is what that code looks like in the post (notice I didn’t have nutrition info, so removed those lines. Also note how you set the time. You need to change the PT##M with the minute count along with adding the hours/minutes.) Nothing wrong with this code. Nice and clean, easy to read.
Result

Now we need to run that through Pinterest and make sure they like what we added and that we aren’t missing anything. You just need to past your URL into Pinterest’s Debugger/Validator.

When I did my ravioli recipe, you can see my rich pins were approved. Approved Rich Pins on Blogger

And when I scroll to the bottom you can see all the new markup is present:
Rich pin schema markup validator

How can you customize the markup on Blogger?

It is great that rich recipe pins are working, but what if you want a little more custom look? You can do that with CSS.

You need to change the code a little bit to indicate what parts you want styled. You can use this instead:

<div id="recipe-schema" itemscope="" itemtype="http://schema.org/Recipe">
<img alt="IMAGE ALT TEXT" class="recipe-schema-image" itemprop="image" src="IMAGE URL"width="220" /> 
<div class="schema-primary-meta-data">
RECIPE TITLE 
By NAME 
200 WORD DESCRIPION 
Prep time: <time datetime="PT15M" itemprop="prepTime">HH:MM</time> 
Cook time: <time datetime="PT25M" itemprop="cookTime">HH:MM</time> 
Total time: <time datetime="PT40M" itemprop="totalTime">HH:MM</time> 
Yield: 2 Bowls</itemprop></div> 
Ingredients: 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
INGREDIENT 
Instructions:

<li> INSTRUCTION </li>
<li> INSTRUCTION</li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION</li>
<li> INSTRUCTION</li>
 
<div itemprop="nutrition" itemscope="" itemtype="http://schema.org/NutritionInformation">
Calories per serving: CALORIES HERE 
Fat per serving: FAT HERE </div>
</div>

Here is mine with the correct information already included: Pretty ravioli markup

Next you want to open up your template and add the CSS. Template>>Customize>>Advanced>> (Scroll to Bottom)Add CSS and paste this in the window:

#recipe-schema { border: 1px dashed #ff4da9; padding: 25px; background: #fbeaf3; font-size: 15px; margin-bottom: 10px; }
.recipe-schema-image { float: right; clear: right; margin-left: 10px; padding: 5px; background: #eee; border: 1px solid #ddd; }
.recipe-schema-name { font-size: 18px; }
.schema-primary-meta-data { margin-top: -25px; border-bottom: 1px solid #D0E3DF; padding-bottom: 20px; }
.recipe-schema-ingredients, .recipe-schema-instructions { font-weight: bold; }
.recipe-schema-description { font-style: italic; }
@media screen and (max-width: 500px){
.recipe-schema-image { float: none; clear: both; margin-bottom: 30px; margin-left: 0; }
}

You can change the color and styling to suit your own blog. Since my blog is pink on pink, that is just the colors I chose for my site. This will work on ALL your posts using that rich recipe markup code, so you only have to install it once!!

This is how that displays on the post, like a recipe card:
Pretty schema markup

And check out the new Ravioli Pins:
Rich pin after

The cool part is that this code is retroactive, so any recipes you go back and mark up, will now have rich pins, for ALL the pins from that URL.

Hopefully that helps anyone looking to get Rich Recipe Pins working on their Blogger Blog! And if you love Pinterest as much as I do, make sure you are following my Blogging Tips and Tricks boards for more blogging tutorials like this one!

Jun 19, 2016