Microformats: Mark-up Your Recipes Online With hRecipe

I love it when Google announces support for new Microformats. In the past we’ve discussed hReview, hCard, and many other draft standards. Today it’s hRecipe‘s turn to get some attention and support from Google.

lemon

Image credit: Hamad M

What is the hRecipe Microformat? [Definition]

hRecipe is a simple, open, distributed format, suitable for embedding information about recipes for cooking in (X)HTML, Atom, RSS, and arbitrary XML. hRecipe is one of several microformats open standards.

http://microformats.org/wiki/hrecipe

Recipe websites are extremely popular on the internet, and it’s actually quite a competitive industry to be part of. So why wouldn’t you investigate the use of hRecipe on your site?

hRecipe example

Google demonstrate this result in their announcement, and as we see the new Google UI rollout, I wonder if we’ll see a “recipes” link in the left hand options menu as more websites adopt a similar approach.

hrecipe example result in Google

Using hRecipe in WordPress

If you have a WordPress blog, you’re in luck. Dave Doolin has written a plugin for WordPress called hRecipe. The plugin integrates with WordPress and allows you to insert a recipe into any WordPress post page. The editor looks like this:

hrecipe-editor

To test the output generated by the plugin, and to produce some quick and easy example code, I thought I’d borrow this recipe for my favourite cake.

Recipe: Banana Cake

Summary: Moist banana cake, easy to make and uses up overipe bananas

Ingredients

  • 2 ripe bananas (overipe is best) 170g caster sugar 170g self raising flour 170g soft margarine 3 eggs Few drops of vanilla essence

Instructions

  1. Use a food processor Pre heat oven to 160C / gas mark 3 Add all ingredients and blend until well mixed Pour into lined loaf tin Bake for 1 hour Cool and enjoy If you are a nut lover, once ingredients are blended add 60g chopped walnuts and blend in to the mixture

Cooking time (duration): 90

Number of servings (yield): 8

Meal type: snack

Culinary tradition: English

My rating:5 stars: ?????

What does the code look like?

For a full breakdown of all the hRecipe properties, check out the Microformats page or this handy guide from Google. Alternatively, you can inspect the code for the example created by Dave’s plugin below:

<div class="hrecipe">
<h2 class="fn">Recipe: <a class="url" href="http://www.bbcgoodfood.com/recipes/7380/banana-cake">Banana Cake</a></h2>
<p class="summary"><strong>Summary</strong>: <em>Moist banana cake, easy to make and uses up overipe bananas</em></p>
<div class="ingredients">
<h4>Ingredients</h4>
<ul class="ingredients">
<li class="ingredient">2 ripe bananas  (overipe is best) 170g caster sugar 170g self raising flour 170g soft margarine 3 eggs Few drops of vanilla essence</li>
</ul>
</div>
<div class="instructions">
<h4>Instructions</h4>
<ol class="instructions">
<li>Use a food processor Pre heat oven to 160C / gas mark 3  Add all ingredients and blend until well mixed  Pour into lined loaf tin  Bake for 1 hour  Cool and enjoy  If you are a nut lover, once ingredients are blended add 60g chopped walnuts and blend in to the mixture</li>
</ol>
</div>
<p class="duration"><span class="hrlabel">Cooking time (duration): </span><span class="hritem">90</span></p>
<p class="yield"><span class="hrlabel">Number of servings (yield): </span><span class="hritem">8</span></p>
<p class="mealtype"><span class="hrlabel">Meal type: </span><span class="hritem">snack</span></p>
<p class="tradition"><span class="hrlabel">Culinary tradition: </span><span class="hritem">English</span></p>
<p class="myrating">My rating:<span class="rating">5</span> stars: ?????</p>

Putting it to the test

Sadly, Google seem to be extremely slow when it comes to responding to completed rich snippets testing form submissions. Regardless, if you can get the Google team to review your site and include hRecipe rich snippets in your search results pages, it’s quite possible you’ll get a competitive edge in the organic click through rate for your site. At the moment I’m not seeing this implementation in the UK, but it’s bound to follow the US soon.

Microformats: Mark-up Your Recipes Online With hRecipe, 5.0 out of 5 based on 1 rating

Comments

  1. Marty Martin

    Been using this microformat for a while now and yes, it does work. Funny though, Google always supports something “under the radar” long before they officially announce it.

    Microformats are your friends folks, even before they are “official”. ;)

  2. richardbaxterseo

    Hi Marty! Good to hear you’re working with Microformats! Glad they’re working too – Google are very slow at including the changes in the search results…