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:

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.



Stay Updated: Sign Up for Webinar & New Blog Alerts

5 thoughts on “Microformats: Mark-up Your Recipes Online With hRecipe

  1. mary firth says:

    I think that you’ll find you favourite banana cake is the Nigella recipe http://www.nigella.com/recipe/recipe_detail.aspx?key=B&rid=222

  2. Ahh – yep that’s the best banana cake there is :-)

  3. jane says:

    Very nice written article. It is as tasty as any good recipe. Very nice piece of work.

  4. Marty Martin says:

    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”. ;)

  5. 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…

Comments are closed.