Here is a screenshot of what my company’s search results looked like before I added breadcrumb rich snippets. Due to our CMS constraints we are not able to use search engine friendly url’s. They look messy and add no additional value to the customer to help pick our listing instead of someone else’s. To be honest, they look a little spammy.
Let’s Start.
Here is what my markup started with. I have seen many different ways to markup breadcrumbs but I chose to follow the lead of WebAIM and use a paragraph with a hidden span with the wording “You are here:”.
<p class="breadcrumbs"> <span class="visuallyhidden">You are here: </span> <a href="#">Home</a> <a href="#">Iowa Apparel</a> <a href="#">Shirts</a> <a href="#">T-Shirts</a> <span>Iowa Hawkeyes Short Sleeve Logo Tee by Nike</span> </p>
The first step is to wrap each breadcrumb in a span with the itemscope and itemtype defined.
itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
<p class="breadcrumbs">
<span class="visuallyhidden">You are here: </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#">Home</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#">Iowa Apparel</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#">Shirts</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#">T-Shirts</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
Iowa Hawkeyes Short Sleeve Logo Tee by Nike</span>
</p>
The next step is to add the “url” property to each anchor tag. The last item in the breadcrumbs is not a link so it will not need this property.
itemprop="url"
<p class="breadcrumbs">
<span class="visuallyhidden">You are here: </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">Home</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">Iowa Apparel</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">Shirts</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">T-Shirts</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
Iowa Hawkeyes Short Sleeve Logo Tee by Nike
</span>
</p>
The last step is to define the breadcrumb title. We do this by wrapping the name of each breadcrumb with a span and add the “title” property.
itemprop="title"
<p class="breadcrumbs">
<span class="visuallyhidden">You are here: </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">
<span itemprop="title">Home</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">
<span itemprop="title">Iowa Apparel</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">
<span itemprop="title">Shirts</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url">
<span itemprop="title">T-Shirts</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">
Iowa Hawkeyes Short Sleeve Logo Tee by Nike
</span>
</span>
</p>
Here is what our search results look like after this process. No more messy urls. In addition to looking better, each breadcrumb item (Iowa Apparel, Shirts, T-shirts) is a clickable link that goes directly to that page, adding additional opportunity for customers to gain access to our website.
Why didn’t I use Schema.org?
At the current moment Schema.org’s documentation for the breadcrumbs is incorrect and as a result the rich snippets will appear so I had to use Microdata as a fallback.
Will this show up in Bing and Yahoo?
As far as I can tell only Google is implementing breadcrumb rich snippets in their search results.
How long will it take to appear in Google’s search results?
For me, it only took 2 days to start appearing.