Jun 19, 2016

How to Add RECIPE Rich Pins on Blogger

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.
Recipe rich pin
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><br>
<img itemprop="image" src="ADD IMAGE SOURCE URL" width="200"><br>
By <span itemprop="author">ADD AUTHOR NAME</span><br/><br/>
<span itemprop="description"><i>ADD DESCRIPTION UP TO 200 CHARACTERS </i></span><br/><br/>
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> <br>
Yield: <span itemprop="recipeYield">ADD SERVINGS</span><br/><br>
<strong>Ingredients:</strong><br/>
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />

<strong>Instructions:</strong><span itemprop="recipeInstructions">
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li></span><br>
<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Calories per serving: <span itemprop="calories">CALORIES HERE</span><br>
Fat per serving: <span itemprop="fatContent">FAT HERE</span> </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" /><br /><br />
<div class="schema-primary-meta-data">
<span itemprop="name"><b>RECIPE TITLE</b></span><br/>
By <span itemprop="author">NAME</span><br /><br />
<span itemprop="description"><i>200 WORD DESCRIPION</i></span><br /><br />
Prep time: <time datetime="PT15M" itemprop="prepTime">HH:MM</time><br />
Cook time: <time datetime="PT25M" itemprop="cookTime">HH:MM</time><br />
Total time: <time datetime="PT40M" itemprop="totalTime">HH:MM</time> <br /><br />
Yield: <span class="recipe-schema-description" itemprop="recipeYield">2 Bowls</span></itemprop></div><br/>
<strong>Ingredients:</strong><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br />
<span itemprop="ingredients">INGREDIENT</span><br /><br />
<strong>Instructions:</strong><span class="recipe-schema-instructions" itemprop="recipeInstructions">
</span>
<li> INSTRUCTION </li>
<li> INSTRUCTION</li>
<li> INSTRUCTION </li>
<li> INSTRUCTION </li>
<li> INSTRUCTION</li>
<li> INSTRUCTION</li>
<br />
<div itemprop="nutrition" itemscope="" itemtype="http://schema.org/NutritionInformation">
Calories per serving: <span itemprop="calories">CALORIES HERE</span><br />
Fat per serving: <span itemprop="fatContent">FAT HERE</span> </div>
</div>
Here is mine with the correct information already included:Pretty ravioli markupNext 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; }
}
Adding css to markup recipe rich pins
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 afterThe 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!


1 comment: