Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am having problems implementing the breadcrumb rich snippets from schema.org. When I construct my breadcrumb using the documentation and run via Google Rich Snippet testing tool, the breadcrumb is identified but not shown in the preview.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">     
      <strong>You are here: </strong>
      <div itemprop="breadcrumb">
        <a title="Home" href="/">Home</a> >
        <a title="Test Pages" href="/Test-Pages/">Test Pages</a> >
      </div>
  </body>
</html>

If I change to use the snippets from data-vocabulary.org, the rich snippets show correctly in the preview.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body>
      <strong>You are here: </strong>
      <ol itemprop="breadcrumb">
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/" itemprop="url">
            <span itemprop="title">Home</span>
          </a>
        </li>
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/Test-Pages/" itemprop="url">
            <span itemprop="title">Test Pages</span>
          </a>
        </li>
      </ol>
  </body>
</html>

I want the breadcrumb to be shown in the search result rather than the url to the page.

Given that schema.org is the recommended way to be using rich snippets, I would rather use this, however as the breadcrumb is not showing in the preview of the search result using this method, i'm not convinced this is working correctly.

Am I doing something wrong in the markup for schema.org example?

share|improve this question
    
Google recommends using microdata format over others. Breadcrumbs they support microdata and RDFa support.google.com/webmasters/bin/… i'd use their recommended format if you want it to appear in search results. –  Anagio Aug 1 '12 at 10:20
add comment

3 Answers

With this implementation:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

You will have the following breadcrumb in Google:

Dresses > Real Dresses > Real Green Dresses
share|improve this answer
1  
I would +1 for your Barenaked Ladies reference, but sadly I think I'd be abusing the voting system :-) SO I'll +1 you for an actually working solution instead. –  Paul d'Aoust Feb 28 at 18:39
add comment

It seems to me that the issue is with the schema.org documentation itself. Here are some educating links:

I've ranked those as most helpful first, essentially they all link to each other eventually. The action on this is due at the end of this month but it looks like the result will be the same as in your second example.

It's a pity because the html ends up being more complicated than really it needs to be, but there we are.

Hope that helps!

share|improve this answer
add comment

I have been doing some research on this recently.

As it turns out, What Google recommends for breadcrumbs does not work. When I looked a couple of weeks ago, their own example failed in Google's Rich Snippet Tool. It appears that Google is lagging behind a bit but still ahead of the others.

Data-vocabulary.org is the accepted and de-facto standard though Schema.org is said to have replace it with Data-vocabulary.org as being depreciated. However, the reality does not match the rhetoric. The intent was that Schema.org would replace Data-vocabulary.org and it may be that will happen. Still, I found a snippet (pun intended) somewhere that mentioned that Google has not modified their code yet to recognize Schema.org.

Having said that, this is the example I found that works in Google and Bing, though Bing changed things up a bit lately so use caution if Bing is important to you.

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/"><span itemprop="title">Home</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/marvel/"><span itemprop="title">Marvel Comics</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/"><span itemprop="title">Fantastic Four</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/58/"><span itemprop="title">Fantastic Four #48: The Coming of Galactus</span></a></span>

Hope this helps.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.