: Breadcrumb using Schema.org rich snippets I am having problems implementing the breadcrumb rich snippets from schema.org. When I construct my breadcrumb using the documentation and run via Google
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?
More posts by @Ann8826881
4 Comments
Sorted by latest first Latest Oldest Best
(Leaving aside consumer support.)
The vocabulary Schema.org offers two ways to provide breadcrumbs for a WebPage (and its sub-types):
breadcrumb property with a text value
breadcrumb property with a BreadcrumbList value
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>
>
<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.)
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> > </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> > </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> > </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.
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> >
</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> >
</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
It seems to me that the issue is with the schema.org documentation itself.
Here are some educating links:
W3C breadcrumb schema proposal
Action on breadcrumb schema
Webmaster forum discussion
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!
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.