(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/ ⁰ )

Before ChuckEats, there was ChuckWorks¹, 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-tag² 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. ³)

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.