Google Rich Snippets .... for a recipe

Question

I'm having a bit of a problem getting rich snippets shown properly on the testing tool for my site (I understand that Google can take some time / decisions as to if a result shows up on the actual site).

Here's an example Google Rich Snippets Result for one of my pages: http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.makemeacocktail.com%2Fcocktail%2F6741%2Fcosmopolitan%2F

Which is for this url: http://www.makemeacocktail.com/cocktail/6741/cosmopolitan/

Everything looks good - but for some reason no image is shown with the example result. I'm a bit confused here. I have the correct meta tag in place:

<meta itemprop="image" content="http://images.makemeacocktail.com/cocktails/6741/cosmo_4.jpg" class="photo" />

But no image shown in the testing tool result?

As a side - is there anything else that needs including? It does seem to have everything that is required, but can't seem to get the image shown properly.

Answer 1

Not entirely true ... but it did lead me to the solution. For completeness here and if anyone wants to know a little more .....

I was using: itemscope itemtype="http://schema.org/Recipe"

Where as google in their example pages: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=173379

Uses: itemscope itemtype="http://data-vocabulary.org/Recipe"

Note the different itemtypes. Image was the correct itemtype for schema.org (not for data-vocabulary.org). If I changed my meta tag from:

<meta itemprop="image" content="http://images.makemeacocktail.com/cocktails/6741/cosmo_4.jpg" class="photo" />

to

<meta itemprop="photo" content="http://images.makemeacocktail.com/cocktails/6741/cosmo_4.jpg" class="photo" />

Google threw up errors that itemprop="photo" wasn't recognised in the schema.org.

The actual reason my page wasn't showing up a photo in the search results was because I had also used Microdata (I was using the Microdata hrecipe. Schema.org is a Microformat by the way).

My Microdata for the page was correct, but the class="photo" that is needed for Microdata was on a meta tag, where as it turns out you actually need the class="photo" on an actual 'img' tag for google to recognise it.

This also leads on to show that Google actually reads Microdata before Microformat - and gets me wondering whether having both on one page is useful at all. Ie Google was not recognising my correct schema.org image meta tag if hrecipe was present and the photo class not applied properly. So I wonder if Google use the Microformat information at all if Microdata is present.

A couple of open ended questions, but also the answer to the initial question. Hope that helps someone else in the future.

Answer 2

The image property in the recipe markup is called photo and not image:

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=173379

Try replacing itemprop="image" with itemprop="photo" and you should be all set.