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)
- 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.
- Now look for every occurrence of
- and replace it with
<b:if cond='data:blog.pageType == "item"'> <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>
- 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):
- 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>
- 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
- Adding Nutrition Information - When you add nutrition information, use the format
<span class="nutrition"><span class="calories">250</span></span>
- 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 Help in adding this to your blog?
If you are not sure how to do this, or if you think you can’t do this on your own, then leave a comment or contact me via the Contact Page. Leave the trouble to me and I will help you out for free (yea , you heard it right. I have some spare time now).
If you out have friends who use blogger for posting recipes, then do share the post with them :-).