Alex Rivera | Logout

How to implement schema.org markup for a breadcrumb?

Asked 2012-04-12T08:35:55.233
30

There isn't much info about implementing a breadcrumb using schema.org markup. So far, I could get two official documents -- one showing this:

<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
   <link itemprop="domain" href="http://schema.org/WebPage"/>
   <link itemprop="range" href="http://schema.org/Text"/>
</div>

And another showing this:

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb">
    <a href="category/books.html">Books</a> >
    <a href="category/books-literature.html">Literature & Fiction</a> >
    <a href="category/books-classics">Classics</a>
  </div>
</body>

The two markups are quite different. Do they make any sense to you? If they do, how do I enclose the following plain breadcrumb code with that markup -- the RIGHT WAY?

<body>
  <span id="breadcrumbs">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

Thanks!

xhtml breadcrumbs schema.org
Edit
Report

1 Answer

16

The first document is the definition, so don't worry about that. It just says that breadcrumb is a text property of WebPages.

The example on http://schema.org/WebPage is the one you want to use and understand. It sets the breadcrumb snippet to a single text field saying "Books > Literature & Fiction > Classics".

You would do that like this:

<body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

The result would be "Noob Archive » HTML » Best Practices: Markup for Setting up Breadcrumbs on Web Pages".

You can use http://linter.structured-data.org/ to check how your item properties are parsed and http://diveintohtml5.ep.io/extensibility.html to find out more about the parse rules.

answered 2012-04-23T14:41:34.877

Your Answer