Breadcrumbs microdata not appearing in structured data preview tool

1
votes

I'm trying microdata for breadcrumbs on a development site, and I've followed Google's own example, but for some reason the actual breadcrumb doesn't preview in the Structured Data Testing Tool

This is how my code looks like:

<div class="back" xmlns:v="http://rdf.data-vocabulary.org/#">
    <h3>
        <span itemprop="breadcrumb" typeof="v:Breadcrumb">
            <a href="http://www.SteaksAndGame.com/" title="Online Shopping" rel="v:url" property="v:title">Steaks And Game</a>
        </span> :: 
        <span itemprop="breadcrumb" typeof="v:Breadcrumb">
            <a href="http://www.SteaksAndGame.com/wagyu-steaks/" title="Wagyu Steaks" rel="v:url" property="v:title">Wagyu Steaks</a>
        </span> :: 
        <span itemprop="breadcrumb" typeof="v:Breadcrumb"><a href="http://www.SteaksAndGame.com/wagyu-steaks/tenderloin-filet-mignon-052" title="Tenderloin - Filet Mignon" rel="v:url" property="v:title">Tenderloin - Filet Mignon</a>
        </span>
    </h3>
    <div class="clear"></div>
</div>

And this is what the Structure Data Tool is showing me: It's showing URL under the title instead of the breadcrumb links.

This is an example showing the breadcrumb links: enter image description here

  • The test page is here
  • And the preview of the page using the Structured data tool is here
  • site is built using Asp.Net

I've tried a number of things like:

Using the › sign instead of :: I've even copy pasted Google's own example code for microdata breadcrumb implementations:

<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>

I've copy pasted the entire source code of the page on another page on a linux server and amazingly that validates correctly. I really don't know what to do further. Any advice would be appreciated.

2
microdataschema.orgrich-snippetsstructured-data
......so why don't you just use the example provided that works? - albert
I did, and it hasn't worked when I implemented it on the site... - Bogdan
....what else is going on in the site? did you validate the markup and css? can you share it? - albert
a sample page can be found here and I've found some errors with the W3C Validator, I think these are showing because of the doctype: example error: there is no attribute "itemscope" - Bogdan
whoa thats alot of errors. huh. i bet its your doctype to say the least...pretty sure that all of this is html5, although its not like the big three dunno what you are implying in your markup...it is their spec. my advice is to switch doctypes. - albert

2 Answers

2
votes

I found a way to use the current Schema.org markup for valid breadcrumbs. It is important to not just append the breadcrumb links one by one, but to nest them and give all but the first one the 'child' itemprop.

<p id="breadcrumbs">
    <span itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
        <a href="http://www.example.com/dresses" itemprop="url"><span itemprop="title">Dresses</span></a>
        &raquo;
        <span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
            <a href="http://www.example.com/dresses/real" itemprop="url"><span itemprop="title">Real Dresses</span></a>
            &raquo;
            <span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
                <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url"><span itemprop="title">Real Green Dresses</span></a>
            </span>
        </span>
    </span>
</p>

This is exactly how it works with Data-Vocabulary.org, it just uses the more current Schema.org markup instead. This will tell the search engines how your breadcrumbs are connected.

0
votes

Use This SCHEMA strcture

**

Use this for Microdata for breadcrumber

**

<div class="breadcrumbs">
  <ul>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
      <a href="index.html" title="Go to Home Page" itemprop="url">
        <span itemprop="title">Home</span>
      </a>
      <span>></span>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
      <a href="product.html" title="Product" itemprop="url">
        <span itemprop="title">product name</span>
      </a>
      <span>></span>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
      <a href=".finalproduct.html" title="final product" itemprop="url">
        <span itemprop="title">final product</span>
      </a>
      <span>></span>
    </li>
    <li class="category6"><strong>Final Product view</strong></li>
  </ul>
</div>

**

Important: It also used for SEO Purpose

**

enter link description here