HTML5 validation for Microdata Breadcrumbs

Question

I'm trying to get my pages to validate and the only error it is now throwing is:

Attribute itemprop not allowed on element a at this point.

My code is as follows:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a>
</div>  

This follows the email given by Google on the following page:

Breadcrumbs

It also seems to follows the HTML5 Microdata specification as well here:

HTML5 Microdata

Any ideas why this doesn't validate? What am I missing or is this just too new to for the validator to validate at the moment?

Answer 1

To get breadcrumbs to show in SERPs, code your schema.org markup like this this. Notice the div nesting and the "child" property:

<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span>
  <a title="Go to %title%." href="%link%" class="%type%" itemprop="url">
  <span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
    <a title="Go to %title%." href="%link%" class="%type%" itemprop="url">
    <span itemprop="title">Category One</span></a>
  </div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
    <a title="Go to %title%." href="%link%" class="%type%" itemprop="url">
    <span itemprop="title">Category Two</span></a>
  </div>

</div>

This validates in Google Structured Data Testing Tool:

http://www.google.com/webmasters/tools/richsnippets

A lot of the documentation on schema.org markup for breadcrumbs is widely incorrect. There are a couple thread out there about this. Above is my working solution, hope it helps.

Answer 2

schema.org has come in place of data-vocabulary.org. Schema.org schema is agreed upon by major search engines. And Schema.org does not have itemprop=url in its schema. So, may be Google's tool or its search engine robot has stopped following data-vocabulary.org schema. Anyway better shift to Schema.org Breadcrumb .

Itemtype - WebPage is default for a web page. So, even if you do not provide itemtype - WebPage and provide BreadCrumb type then Google will understand it as breadcrumb. I read this in Schema.org page. I have given you link for this.

Use this Google's tool for validation.

Answer 3

    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.example.com">
        <span itemprop="name">Home</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.example.com/category1">
      <span itemprop="name">Category 1</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.example.com/category1/subcategory">
      <span itemprop="name">SubCategory</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

This will expose many data regarding the breadcrumb to the crawler. If you make the list items inline, the output will be as follows:

1.Home > 2.Category > 3.SubCategory

Answer 4

Which validator were you using? Some don't support the newest features of HTML5 yet, and some do but won't trigger proper validation for your document because of the doctype that you declare.

However, the newly released Nu validator shouldn't have these problems. You can read about it on .net magazine .