9

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?

Improve this question
2

4 Answers 4

Reset to default
3

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
Improve this answer
1
  • 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, 2014 at 18:39
1

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!

Improve this answer
1

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.

Improve this answer
1

(Leaving aside consumer support.)

The vocabulary Schema.org offers two ways to provide breadcrumbs for a WebPage (and its sub-types):

Using text is easy, but unstructured (harder to parse for consumers).
Using BreadcrumbList is more complex, but allows to specify anything needed explicitly (easier to parse for consumers).

Taking your example, using BreadcrumbList could look like this:

<body itemscope itemtype="http://schema.org/WebPage">     
  <strong>You are here: </strong>
  <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
    </span> 

    &gt;

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a itemprop="item" href="/Test-Pages/">
        <span itemprop="name">Test Pages</span>
      </a>
    </span>

  </div>
</body>

(You might have to move elements if whitespace is a concern.)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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