Blogger and google rich snippet recipe using micro data

at 5:42 PM Labels:

Using Google structured data test tool to verify microdata
Using Google structured data test tool to verify microdata
Update: I am developing a web app - SEO Recipe Tool for formatting recipe with microdata. Now it is in preview/alpha stage. I am planning to finish it by Feb 2014.
Well I have started a cooking blog some time before and wanted to add microdata for Google rich snippets in my blog so that I could get some benefit from the Google recipe search and SEO boost. Though there are different formats available(microformat, RDFa), microdata is the latest format developed together by the search giants like Google, Yahoo, Bing etc.  I searched a lot for some widgets which I could use with blogger for this purpose. After lot of search also I could find only widgets for WordPress and not for blogger. So I thought if adding it by editing the template and HTML code of recipe post.
This is not so easy as using the WordPress plug in. so I am listing the information here so that it could be helpful for some one trying to do the same. First of all this requires some template modification and a little modification of HTML tags while. Without modification also it is possible, but in that case we will have to do a lot of HTML editing while posting every time.

Some information about microdata

In web pages we can write information which can be understood by humans, but it will not be possible(or difficult) for machines to understand


For example, if I am writing "This recipe is from Soumya and needs 1 hour preparation."From this sentence we can understand that Soumya is author and 1hour is required for preparation. By adding Google Rich Recipe snippets, it is possible for search engines(machines) to understand please see the snippet after adding metadata
<div itemscope itemtype="http://schema.org/Recipe"> This recipe is from <span itemprop="author">Soumya</span> and needs <meta itemprop="prepTime" content="PT1H">1 hour preparation. </div>
The above marked part will tell author is Soumya and preparation time is 1 hour. However the above code is just a part and a vocabulary is also necessary. This is available in http://schema.org/Recipe this is necessary to tell what is itemprop="author". Well this informatioin is incomplete for a recipe. For full list of properties of recipe click here.

Updating template for adding microdata

Complete information cannot be updated in template as information like cooking time, ingredients, prepration method etc will be inside the post(May be using some advanced script or something, it will be possible. But do not know much about those stuffs).
Following are the updates which I did.

Note: If you are going to follow this, then please take a backup of template first.

1) Changed the following line
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
to
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/Recipe'>
2) Under this line, added some extra code for author, description, date, name, image, thumbnail etc.
<meta expr:content='data:post.snippet' itemprop='description'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>
<meta expr:content='data:post.author' itemprop='author'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>

3) Now rest of the tags are added my modifying HTML tags in each post. Example below.

Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes
Cook time: <meta itemprop="cookTime" content="PT1H">1 hour
Yield: <span itemprop="recipeYield">1 loaf</span>

 <span itemprop="ingredients">3 or 4 ripe bananas, smashed</span>

 <span itemprop="recipeInstructions"> Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
the flour last. Pour the mixture into a loaf pan and bake for one hour.
</span>
Once finished, you can use the Google Structured Data Testing Tool to check if the microdata contents are correct. 

Note 1: There might be more that one line as in step .1, these steps has to be repeated all places.
Note 2: The meta tags for preparation time, cooking time etc added in post will be automatically deleted if you switch to compose mode in the blog post editor. So add this tag at the end and publish without switching to the compose mode.

PS: It is also possible to add meta tags only by changing HTML tags in blog post instead of updating the template itself. But in each post all tags need to be added. To minimize this, you can also create a post template. But still some HTML editing will be necessary for each post.

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )