Recipe Markup For Blogger

I have been doing some cooking experiments and came across lots of awesome BlogSpot blogs with recipes of mouth watering dishes. This post is for all of those BlogSpot Food Bloggers who would like to spice up their recipe posts in Google Search results. Google Search results uses your webpage markup to identify better ways of displaying meaningful information
If your Recipe blog has these markup information added , then Google will try to display your recipe pages in a better way.

How does this work ?

If recipe information is marked up in your blog posts, then Google might use this information to show rich snippets for recipe results
The image below is a snapshot from Google's search result page and it displays the image of the sausage, rating, nutrition information and the total time needed to make this dish in addition to what you normally expect to see.

Add proper Recipe Markup to your Blog

If you are looking for an easy solution to implement recipe markup in your BlogSpot blog, then you will have to modify your BlogSpot template. These are some simple changes and won’t take more than 5 minutes.(This will add hRecipe markup to all your existing and new Blog Posts)

1. Login to your Blogger Account and go to Template > Edit HTML
   Click somewhere within the Blogger Template Editor and press Ctrl + F to search within the template.
2. Now look for every occurrence of

   <data:post.body/>

   
   
3. and replace it with

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class="hrecipe">
      <span class="item">
         <h1 id="recipetitle"class="fn"><data:post.title/></h1>
      </span>
    <b:if cond='data:post.thumbnailUrl'>
    <img id="recipephoto" class="photo" expr:src ="data:post.thumbnailUrl" expr:alt="data:post.title"/>
    </b:if>
   <data:post.body/>
   </div>
   <b:else/>
   <data:post.body/>
   </b:if>
   

4. Click Save Template and save your Template

Writing a New Recipe Post

When you write a new Recipe Post, follow the below Markup Guidelines.(You will have to use the HTML view of your Post Editor to add these HTML markups):

1. Adding ingredients - When you add an ingredient, make sure that you add it using proper recipe markup. If you have apple and white sugar as ingredients, then you will add the below markup to your post

   <span class="ingredient">
         <span class="name">apples</span>:
         <span class="amount">6 cups</span> 
      </span>
      <span class="ingredient">
         <span class="name">White sugar</span>:
         <span class="amount">3/4 cup></span> 
      </span> 
   

2. Adding Cooking Time - When you add cooking time, use the format

   <span class="duration">1 hour 30 min <span class="value-title" title="PT1H30M"></span></span>

   It uses the ISO 8601 format PT1H30M. It the duration was 20 minutes you would have used PT0H20M
   
3. Adding Nutrition Information - When you add nutrition information, use the format

   <span class="nutrition"><span class="calories">250</span></span>

4. When you have published the post, check the markup using this Rich Snippet Testing Tool

When will this show up in Google?

Once you add the rich snippet markup to your Blogger Blog, it might take a few weeks for Google to crawl your Blog.If it doesn't appear, then make sure that you have added the markup properly. You can do this using the Rich Snippet Testing Tool. If it still doesn't show up in Google Search, use this form to tell Google about the Rich Snippets used on your blog.
While creating this post, I had also setup a test blog just to test the same. Google has now indexed the test blog and you can see the Rich snippet in the below screenshot taken from the Google Search result page

You can probably see a live demo if you search in Google for "recipe markup omelet recipe"

---

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

---