Skip to content

Google, meet KitchenPC

February 28, 2011

One of the things I’ve noticed about Google is they have the ability to format certain types of results depending on what type of content the page is displaying.  If you search for “spinach quiche”, you’ll get several results that Google recognizes as recipes and it will display them nicely.  You’ll see a picture of the dish, the “star” rating, how many reviews the recipe has, and even the total preparation time.  That’s pretty sweet!  However, Google apparently doesn’t like KitchenPC too much as my results would get displayed like any other page.  In other words, Google didn’t treat my content as recipe content.  Boo!

Results from AllRecipes.com look great!

It’s been on my list to get to the bottom of this and figure out exactly what sites like AllRecipes are doing that I’m not.  After all, I have all this data available so why not display it on search result listings?  Recently, I got the perfect excuse to dig a bit deeper into this.  Recently, Google announced new features to make searching for recipes even more powerful.  Now, users can filter down search results to only recipe content, exclude recipes based on cook time or calories, and even check “Yes/No” boxes based on what ingredients they have to find that perfect recipe.  So I decided to spend the evening researching what Google calls “Rich Snippets.”

Google will display a “rich snippet” for your page if it finds certain types of markup embedded in your HTML.  Google recognizes several standards, namely microdata, RDFa and microformats.  These technologies all basically work in the same way; by embedding certain markup that will be ignored by browser rendering but recognized by any parser looking for this data.

Google will support any of these formats to recognize recipe data in a website and parse out various properties.  In fact, there’s an excellent tutorial on exactly how to do this with the three major formats here.  I looked briefly at the different options, and eventually chose to go with the hRecipe microformat since that’s what AllRecipes was using and it seemed to be the most adopted standard.  I also see AllRecipes results displayed nicely in Bing, so I know Bing also supports this format.

Modifying the HTML was fairly straight forward.  You can surround information with span tags of a certain class to indicate what they are.  In certain circumstances, you want to display information in one way (such as display 4 star images in a row to indicate a rating) but provide the data to be parsed in another way (such as 4.0).  You can do that with an empty span tag with the correct data in the title attribute.

How KPC results will look according to Google's testing tool

Google, of course, provides a Rich Snippets Testing Tool to preview your content to make sure everything gets parsed right.  Rather than modifying a bunch of my code, I instead saved a recipe to a static file called test.htm on my web server so I could modify that in Notepad until I got everything working right.  I then migrating the changes back over to the source code when everything was displaying the way I wanted.

Though it will probably take a few weeks for Google to update their index, hopefully now KitchenPC results will show up when users are using Google’s new recipe searching tools.  That is if I’m not drowned out by the millions of AllRecipes results that will usually bubble to the top of the first page.  Sigh.

Advertisements

From → Business, Technical

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: