Recipe Food Bloggers – Defeat the Homogeny in Google’s new Recipe View

(Update: Thanks to Jeff Crump for his comment on a link to a WordPress plug-in that, in theory, makes this easier for non-technical folks. Read the explanation below, say “that’s crazy”, and then try the plug-in, available at: http://wordpress.org/extend/plugins/hrecipe/ 0 )

Before ChuckEats, there was ChuckWorks1, and he advised e-commerce companies on ways to maximize their revenue through online search efforts, as far back as 1997.

Last week, Google announced Recipe View, a new way to filter and find recipes from Google’s normal search results. You can search for “chicken pot pie” on Google, and it will give you 1.5MM+ results. If you filter by “Recipe”, the results narrow down to 200k. And if you filter by an ingredient, cooking time, or some other attribute, the results narrow much further.

The problem – Homogeny

Once you start narrowing, the results are dominated by large SEO companies like AllRecipes, FoodNetwork, Cooks.com, and other sites that lack the vibrancy of the recipe blogging community. One can presume Google gave them the heads up so the new Recipe View would feature something.

Given the thousands of well-written (and photographed) food blogs, the Recipe View could be much better.

The solution – Micro-tagging

Recipe bloggers need to micro-tag2 their recipes. This helps Google better understand the specific contents of your recipe which, in turn, makes it easier to incorporate into their new search functionality.

You must tell Google explicitly what certain parts of your recipe are. If you say “Cooking time: 20 minutes” in a paragraph somewhere, you should micro-tag that. Marking up your recipes with this information helps build “the semantic web” – text can only tell us so much – explicitly marking the information helps computers make connections faster & more accurately. (It could also pay dividends in the future. 3)

How?

In theory, someone might make a WordPress plug-in that will make this easier. In the meantime, tagging your recipes will give you a huge head-start on your friendly blogger competitors.

The nitty gritty is outlined here by Google: http://www.google.com/support/webmasters/bin/answer.py?answer=173379

You can basically tell Google about the following parts of your recipe:

  • Name of the dish
  • Recipe type
  • Photo
  • Publish date
  • Summary
  • Review
  • Prep time
  • Cook time
  • Total time
  • Nutrition
  • Instructions
  • Yield
  • Ingredient
  • Author

Doing this will require getting your hands a little dirty with HTML – this isn’t too hard in WordPress (i have no idea about other blog platforms.)

Start

1 – Go to the Edit screen of a recipe.

2 – Make sure you’re in “HTML” edit mode, and not “Visual” edit mode. Visual mode will convert the HTML code below into a format that won’t work (and it’s a pain to convert back.)

3 – Let’s pretend you had this recipe in HTML edit mode:

Chicken Pot Pie
(serves 10)
Prep Time: 30 minutes
6 tablespoons salted butter
1 large onion, chopped
1 1/2 pounds potatoes, peeled & cut
Bake for 15 minutes

4- Choose a format to tag your recipe. Google has listed three: microdata, microformats, & RDFa. The problem with competing formats is you never know which one will ultimately win. For purposes of this exercise, Google recognizes all three. I’d choose the microdata format because it’s an HTML 5 standard – and the web, as a whole, is trying to move towards an HTML 5 standard. microdata also looks to be the easiest.

5 -Micro-tag your recipe:

<div itemscope itemtype="http://data-vocabulary.org/Recipe" > <span itemprop="name">Chicken Pot Pie</span><br /> <span itemprop="yield">(serves 10)</span><br /> Prep Time: <time itemprop="prepTime" datetime="PT30M">30 minutes</time></p> <p><span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"><br /> <span itemprop="amount">6 tablespoons</span> <span itemprop="name">salted butter</span><br /> </span><br /> <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"><br /> <span itemprop="amount">1</span> <span itemprop="name">onion</span> chopped<br /> </span><br /> <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"><br /> <span itemprop="amount">1 1/2 pounds</span> <span itemprop="name">potatoes</span> peeled &#038; cut<br /> </span></p> <p>Cook for <time itemprop="cookTime" datetime="PT1H">1 hour</time> </div> <p>

6 – WTF?

What’s Going On? Line by Line

1 –

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
A DIV is a container that you can assign properties to. In this case, it’s used to say 2 things:

  • A: “everything inside of this DIV is my recipe.”
  • B: “this recipe uses the standard found at the itemtype URL”

2 –

<span itemprop="name">Chicken Pot Pie</span><br/>
(You can disregard the BR tags.) A SPAN is also a container with fewer properties. When you look at Google’s list of attributes, such as author or description, you need a way to say “this is the name of the recipe.” What you do is enclose the name in SPAN tags, and use itemprop=”name” to say Chicken Pot Pie is the name of this recipe. (Notice that “name” comes from the list of properties above.)

3 –

<span itemprop="yield">(serves 10)</span>
We encounter an identical situation with yield, except we need to designate it as yield instead of name.

4 –

Prep Time: <time itemprop="prepTime" datetime="PT30M">30 minutes</time>
The prep time property works the same as Name or Yield, except there is a new TIME tag in HTML 5, so we use that. You could also use a span and it would work. The TIME tag just gives the reader (a computer) that little extra bit of information. You do the same later in the recipe for Cook Time.

5 –

<span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"><br /> <span itemprop="amount">6 tablespoons</span> <span itemprop="name">salted butter</span><br /> </span>
This looks complicated but we’ve seen all of the fundamentals before. In the list of properties Google accepts, it says Ingredient, and this is the way to encode an ingredient. There are 2 basic things:

A:

<span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"> is the container for the ingredient. It says “this is an ingredient”, using the definition of a Recipe Ingredient from http://data-vocabulary.org/RecipeIngredient. We did the exact thing in (1) for the Recipe.

B:

<span itemprop="amount">6 tablespoons</span> <span itemprop="name">salted butter</span> defines the ingredient being used. There is a property for the name of the ingredient, and the amount to use; so we encode it just as we did in (2), (3), & (4) for the Recipe. Note that this could be written in any order that you like – all of the below are equal in Google’s eyes:

<span itemprop="name">salted butter</span> &#8211; <span itemprop="amount">6 tablespoons</span>
<span itemprop="name">salted butter</span> &#8211; measure <span itemprop="amount">6 tablespoons</span>
Measure <span itemprop="amount">6 tablespoons</span> of your favorite <span itemprop="name">salted butter</span> &#8211; I prefer Strauss brand whenever available.

That’s it – it’s easy once you get the hang of it.

Things to Remember

Always save a copy of your pre-tagged work. You never know what you might screw up – and sometimes it’s easier to start from the beginning.

A <div> is just a container – make sure there’s always a </div> to close the container. If you added these HTML tags, and your formatting is messed up, a missing </div> can often be the culprit.

<span> is also a container – make sure there’s always one </span> for every <span>

If you put a simple <div> and </div> around some content on your site, and it does funky funky things, your stylesheets for your current theme are interfering. You should seek some advice from a web designer at this point, or change your theme (or learn CSS and change your stylesheets.)

This seems like a lot of work

It could be – depending on how many recipes you have, or if you don’t have much HTML experience. And no one knows how popular this Recipe View will be on Google – or how long it will stay up.

But, as mentioned before, the entire Web is moving in the direction of “the semantic web.” The more you can describe the contents of your content, using agreed-upon industry standards, the easier it will be for future programs to use your information – and (hopefully) provide better distribution for your blog and content. You can consider this a competitive advantage and a long-term investment.

Increasingly, with the distribution power of Google, Facebook, and Twitter, the spoils go to the technical elite who can adjust their content to comply with Google and Facebook demands (requirements.)

- chuck

0 – I haven’t looked at the plug-in in too much detail but it will automatic the technical mumbo jumbo above. The flip-side for this convenience is that you may have to give up some formatting flexibility on your blog. As always, back up everything before trying something new.

1 – I am still working – on something new & exciting. And the next article on this blog will return to fine dining – either Wolvesmouth in LA or Saison in SF, unless a Manresa meal creeps in there!

2 – There doesn’t seem to be a term used to describe this practice, so I’ve deemed it “micro-tagging.” One could say “mark up your pages” but that is a bit techy. We tried to push this as an industry standard in e-commerce in the mid-2000s; it’s taken until now to get some mainstream use.

3 – For example, the Open Graph Protocol might integrate a notion of a recipe entity in its ‘protocol.’ An enterprising young entrepreneur might then come along and devise a new way to search, sort, or rank recipes based on social graph connections – “if 5 of your friends like this recipe, while listening to the new Jay-Z album, you might too.” A second example might be someone figures out, courtesy of the recipe micro-tags, the most-shared recipes on Twitter – and create a unique application / view/ site that utilizes that behavior – and helps distribute your content.

  • http://blog.khymos.org Martin

    I like the idea, but this seems terrible complicated and will completely take away the focus from the actual recipe when you write it. Perhaps someone could write a small program/script that automatically does the required markup? Either one for the different blogging softwares available. Or perhaps for the small text editor Note Tab?

  • chuckeats

    Hi Martin, I’m sure the big guys have it baked into their content management systems already.

    You could also tag parts of your recipe for now – it’s pretty easy to do just name, prep, & cook times; and then focus on the harder ingredient constructions later.

    The problem w/ writing a script is similar to the original problem – how does a script know what something is? Somebody could probably wrap some fancy UI around it; but the time required to highlight & select properties wouldn’t be much less than writing the mark-up above.

    I don’t write recipes but this stuff is almost second-nature to me; however, if you were to ask me to cook one of your recipes, i would most certainly fail :-)

  • http://umamibound.blogspot.com Dj

    Hi Chuck,
    Been following your blog for awhile now, and finally got around to leaving a comment. I work in the industry and love coming to your site and checking out pictures and keeping up to date with whats going on! Some friends of mine that work at Ubuntu and I were speaking and you came up…(sushi lover)

  • http://www.lazybearsf.com David Barzelay

    I definitely see the value in having the semantics available, and I think a lot of people will put that information to better use than Google is doing so far. It’s unfortunate that they’ve chosen to ordain certain properties of a recipe (especially time) over others, and I wonder whether that will shift. In particular, the amount of time a recipe takes is such a fluid and nebulous thing that it seems actually counterproductive to specify it.

    I’m also curious about why Google need everyone to go tag their recipes. It seems like crawling the web, analyzing the data, and populating tags is something Google could do quite well automatically.

  • chuckeats

    I don’t disagree David – Google is imposing a world-view on recipes, trying to impose an arbitrary structure on the recipe construct. At best, people use the structure for convenience; and not hard & rigid rules.

    Tagging the recipes makes it more accurate – you can crawl, analyze, & get it right often; but tagging is that ‘last mile’ that gets it ‘just right.’

  • http://www.jeffcrump.com Jeff Crump

    I wouldn’t say that Google is imposing a worldview on recipes. Technically, Google’s markup is based on the microformat hRecipe. And if you’re using WordPress, there’s already a pretty robust plug-in that’ll get you tagged up and formatted. Check it out here:

    http://wordpress.org/extend/plugins/hrecipe/

    What I would say is that we take for granted how complex recipes are just in general, especially when we take into account things like nutritional info, cuisine style, and multiple recipes in one recipe (like making icing for a cake). You pretty much have to have an exacting spec to mark all that info up so that it makes sense for the future.

    One thing I don’t see mentioned is how microformatting will not only benefit you on Google’s recipe view, but it will also help you on your own site if you use Google Custom Search to crawl it… especially if you end up having hundreds and hundreds of recipes over the life of your blog.

  • chuckeats

    Thanks Jeff for your comments & the hrecipe plug-in – i don’t write recipes so i didn’t know this was out there.

Share

when not eating ...
putting in the work ...