Taming the Google Rich Snippet for Recipes

Here are the search results for “No-bake cheesecake”.

Which result would you click on?

The second one, right?

Me too.

Simply being number one on the results doesn't cut it for a recipe search now. Your recipes need to be configured with rich snippet markups to give the audience the incentive to click.

And Google doesn't magically pick up on the fact that your content is that of a recipe. For Google to show the rich snippet, it should understand, that this page is a recipe, and recognise various properties like preparation time, cooking time, rating and photo of the dish.

HOW TO MAKE GOOGLE UNDERSTAND YOUR RECIPE?

Google provides a documentation for rich snippet markups. With Cucumbertown, we had made sure that this was implemented across all the recipe pages. Everything was working fine, and the search results came complete with ratings, time, and the mandatory image. But, out of the blue all the Cucumbertown search results started showing up without this rich snippet.

Before panic set in, I decided to use the rich snippet testing tool provided by Google to check if the markups were put properly. However, the tool was not showing any issues with the page. Now, what?

I started reading the documentation from the beginning. There was no way Google could be wrong, so it had to be something I did.

But the result of the reading was this conclusion; I have implemented the recipe page as suggested by Google and the markup test tool said everything was fine. But things were far from fine in the search results.

So it was time to stop reading and start experimenting.

If you want to know how to do this on your food blog, contact me on basil@cucumbertown.com. To know more about what we did to tame the Google rich snippet, read on.

EXPERIMENTS

The first step was to see for whom this rich snippet was working.

BBC Good Food and Simply Recipes were the two blogs that I knew beyond a doubt were doing it right. But even after comparing I could find nothing wrong with what we were doing.

So it was back to looking at what Google wanted. Google supports two types of markups —microformat and microdata. We were initially using microformat and had moved on to microdata.

Microformat works by identifying recipe block by hrecipe class in the markup. Once hrecipe class is encountered the crawler will search for subsequent elements like images, cooking time etc, which is again denoted by classes like image, cooking time etc.

Now I started reading the documentation again, checked markup in the browser and made sure everything is fine. The only issue I could foresee was hrecipe class not being removed from the markup which was getting mixed up with microdata. I found that a few microformat classes were still present, but removing them didn’t have much effect. But, one thing to note here is to always get rid of those classes from microformat if you are using microdata.

WOW MOMENT

Then I began inspecting the html response in the inspect tool and found few markup properties that were different from what I saw in the code using view source. We were using javascript to load the image, managing the placeholder etc. This javascript code was removing the itemprop=”image” tag and Google was catching this, even if this markup change was happening 1–2 seconds after page load.

Okay —Now I was on to something. I fixed the truant Javascript code to add the microformat properties and pushed the code for a few recipes.

Normally when we experiment different SEO related changes simultaneously with different recipes, all the changes are tracked in a Google doc. Otherwise, it becomes really difficult to track what change worked and what did not. So I added this too to that list.

Two days waiting time — and the search result updated with Rich Snippet! Happiness would certainly be an understatement for what I was feeling then, sheer joy may be close.

So I extended the change across all the recipes and it’s all cool now.

Since Cucumbertown is a platform for food bloggers, these engineering changes reflect across all the blogs hosted in Cucumbertown, and by extension, will reflect in the traffic too. Meaning, bloggers need not worry about the complex engineering behind the scene, but can certainly see the benefits in the numbers.

Caution — There is a high risk that you can become superstitious when you work on SEO issues. Overcome it by not missing even a single minor code change. It’s not magic, it’s just about following the rules.

So in conclusion these are my findings:

1. Use only one format for the recipe(Remove all microformat classes if you are using Microdata)
2. Ensure your markup does not change later on in the lifecycle of the page.

Like this story?

Don’t forget to Recommend so more people get to know what you just did!

And, as they say, Sharing is Caring!