It has been said that recipes are about 1% of all Google searches, a significant number when you consider how many gazillion searches are done every day on Google, so Google is attempting to make it easier to find recipes on the internet and ring up more ad dollars in the process. This will quickly have an impact on food blog and food website bottom lines. It's killing me.
For example, when one enters "ribs" in Google my website, AmazingRibs.com is #1. This is not a paid for slot. It is what they call organic or natural search. My site ranks #1 because it has a LOT of sites linked to it, because it has great ribs content, and because I do Search Engine Optimization (SEO) reasonably well. But, effective February 24, 2011, if you search for "ribs" and then click on the new "Recipes" option in the column on the left on most browsers, the results are limited to only those that Google is sure are recipes and not articles about some football player with broken ribs. My ribs recipes are nowhere in sight. How does Google know a recipe when it sees one? The authors have included code that tells Google "this is a recipe". In addition, the new Google "Recipe View" search allows people to search for recipes with specific ingredients, number of calories, and cooking time.
Handy for consumers, but a pain for food bloggers like me. I'm getting smashed because I did not get around to installing the new recipe codes when Google announced them in April 2010 because the instructions were too confusing. Now the top slots are all occupied by the big-time corporate food sites, Foodnetwork.com, Epicurious.com, About.com, AllRecipes.com, etc. They moved faster than I did, and I will certainly lose ad revenue.
Soon Google will be adding searches for reviews, people, and events. So if you have a food website or food blog, if you review restaurants or kitchen products, you need to dive into this new world now or you will disappear. The sooner the better because it can take a month or more for recipes that are formatted properly to find their way into the recipe search. I know all this because I waited 'til after the horse was out of the barn to learn all I could about the subject. Sob.
So I immediately panicked and spent two whole days researching, and I think I have gotten to the bottom of it. Google has a page devoted to the subject but it was obviously written by engineers for engineers, and I found it a bit obtuse. After struggling through it and following all the links and doing a lot of digging, here is my interpretation or what food bloggers need to know -- a recipe for recipe writers by a recipe writer.
If you are an engineer and you spot some errors in my interpretation, please chime in below.
Three languages: Climbing the Tower of Babel
These tags also manage column width, links, and more. If you use a program like WordPress, you rarely encounter the codes because the program inserts them for you. In order for your recipe to be included in the new Google Recipes search, you need to add codes called "rich snippets" that tell Google when a page has a recipe, the name of the recipe, the time it takes to make it, the ingredients, instructions, etc.
Now things get ugly. It seems there are three different competing languages of rich snippets: Microformats, Microdata, and RDFa. Fortunately Google reads all three and you can mix and match. For now.
Microformats. These are the simplest and most easy to implement if your site uses a Cascading Style Sheet (CSS), and most sites do. A CSS is a list of styles, like the font, size, and color you use for a main headline. By inserting a few new styles into your CSS (provided below) and applying them to your recipe, you can tell Google what it needs to know. Microformats use mostly div and span tags and their attributes. If you don't know these terms, don't worry, they are almost certainly in use on your pages now. Microformats seem to be the language used by many of the big recipe sites. Click here for more on Microformats hRecipe language.
Microdata. This language is a bit more complex and it is designed with an eye to the future website standard called HTML5, still being formulated. It uses all new tags such as itemscope, itemtype, and itemprop. It is not too complicated, and it is probably the future, and if you can create these tags with your software, you should consider using Microdata. Since my site has more than 300 recipes, I decided to wait on this and go with the simpler microformats. I think I will be able to retrofit later if HTML5 decides to ignore microformats, and I have a hard time believing it will for many years. Click here for more on Microdata.
RDFa (Resource Description Framework). This targeted at XHTML pages. I found it a bit too complex but one thing makes it important: I believe Facebook's Open Graph Protocol is RDFa-based. Click here for more on RDFa.
Creating Microformat hRecipe Rich Snippets with CSS
I have discovered some of the codes are case sensitive, at least when it comes to getting approved by Google's Rich Snippet Testing Tool.
hRecipe. This is a section tag, called a "div" tag, and it must open and close around the entire recipe. Required.
fn. The name of the dish. You can also use the Microdata tag name. Required.
author. Creator of the recipe. Can include nested Person information. Optional.
recipeType. The type of dish: for example, appetizer, entree, dessert, etc. This is a tag borrowed from RDFa. Optional.
tag. A keyword, such as the main ingredient. There may be more than one, bit they must be tagged separately. Optional.
photo. Image of the recipe. Optional.
published. The date the recipe was published, in ISO date format. A date looks like this: 2011-01-21. If you want to add a time, it gets complicated, so click the link. Optional.
summary. A short summary describing the dish. Optional.
review. A review of the dish. Can include nested review information. Optional.
duration. The time it takes to prepare and the cook the dish combined. The tag duration is from the microformats language, but the tag totalTime, borrowed from RDFa, can be substituted. You can use min or max tags nested within to specify a range of time. This tag appears to be case sensitive. The format of the numbers is a bit tricky. They are tags that must be nested inside another tag and look like this
5 hours 20 min
5H20M means 5 hours 20 minutes. You can omit hours and minutes if you wish so it could look like this PT5M or PT13H. Required.
prepTime. The length of time it takes to prepare the recipe not including cooking. This tag is not required, but you cannot pass the testing tool without either prepTime or cookTime. This is odd because neither is part of the hRecipe language. They are borrowed from RDFa. All the other rules for duration for prepTime apply.
cookTime. The time it takes to actually cook the dish. All the other rules for duration for prepTime apply.
nutrition. Can contain the following child elements: servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein, and cholesterol. These elements are not part of the hRecipe microformat, but Google will recognize them. Optional.
instructions. The steps to make the dish. Can contain the child element instruction, which can be used to annotate each step. This is a div tag and must open and close around the entire set of instructions. If you wish, you can use the tag instruction (singular) around each paragraph. Optional.
yield. The quantity produced by the recipe (for example, number of people served, number of servings, etc). Optional.
ingredient. Use this tag around each individual ingredient in the recipe. Can contain child items name (name of the ingredient) and amount. Required.
review hreview-aggregate. If your readers rate recipes, you can include this. You can include the average rating and the count of raters within the tag. It's hard to explain, so look at the sample below. Optional.
Creating Microformat hRecipe Rich Snippets with Wordpress
Day has also created an online processor for microformats. You can type or paste a recipe int a web page she created and it will spit out a recipe with the codes inserted pretty much the same as the WordPress plug-in.
Add these codes to your CSS
.hrecipe { }
.fn { }
.author { }
.photo { }
.summary { }
.recipeType { }
.tag { }
.yield { }
.prepTime { }
.cookTime { }
.duration { }
.ingredient { }
.instructions { }
.published { }
.review hreview-aggregate { }
.nutrition { }
.servingSize { }
.calories { }
.fat { }
.saturatedFat { }
.unsaturatedFat { }
.carbohydrates { }
.sugar { }
.fiber { }
.protein { }
.cholesterol { }
Example
After you are done with a page, you can test your code and if it works, see a preview of your listing with Google's Rich Snippet Testing Tool.
Corrections?
All text and photos are Copyright (c) 2011 By Meathead, and all rights are reserved