RDFa Breadcrumbs

Question

When you use an ul element to format your breadcrumb (aiming for better Google search results), how do you define the RDFa markup? The reason I am asking is that the li elements are siblings from each other, and not children. I am doing something like:

<div class="dv_breadcrumbs">
  <ul xmlns:v="http://rdf.data-vocabulary.org/#">
    <li typeof="v:Breadcrumb"><a title="Level1" href="/level1" rel="v:url"><span property="v:title">Level1</span></a></li>
    <li typeof="v:Breadcrumb"><a title="Level2" href="/level2" rel="v:url"><span property="v:title">Level2</span></a></li>
    <li typeof="v:Breadcrumb"><a title="Level3" href="/level3" rel="v:url"><span property="v:title">Level3</span></a></li>
    <li typeof="v:Breadcrumb"><a title="lever4" href="/level4" rel="v:url"><span property="v:title">Level4</span></a></li>
    <li typeof="v:Breadcrumb"><a class="currentLevel" title="Current Level" rel="v:url" property="v:title">Current Level</a></li>
  </ul>
</div>

Is it correct? Would the search engines understand that the breadcrumb items are in sequence inside the ul element?

Answer 1

Yes. You can check it using Google Testing Tool. Your code will result in following:

Although some clarifications needed.

• As you see the last link in the chain ("Current Level") is not shown. It seems Google needs some reasonable url to show it. You can add href with your page address to last part of breadcumb:

a class="currentLevel" title="Current Level" href="/my_page.html" rel="v:url" property="v:title"

(sorry for citation - for some reason SO doesn't allow me to put visible code here).

And you'll get smth like:

• As it stated in Google doc for breadcrumbs:

The breadcrumb name is identified using the title property, prefixed with v:, like this:

<span property="v:title">. 

The rel attribute indicates that the link is that breadcrumb's URL. The property attribute should be specified in the a element rather than nested inside it, like this:

<a href="books.html" rel="v:url" property="v:title">Books</a>.

So it is better to rewrite your code like this:

<div class="dv_breadcrumbs">
  <ul xmlns:v="http://rdf.data-vocabulary.org/#">
    <li typeof="v:Breadcrumb"><a title="Level1" href="/level1" rel="v:url" property="v:title">Level1</a></li>
    <li typeof="v:Breadcrumb"><a title="Level2" href="/level2" rel="v:url"property="v:title">Level2</a></li>
    <li typeof="v:Breadcrumb"><a title="Level3" href="/level3" rel="v:url" property="v:title">Level3</a></li>
    <li typeof="v:Breadcrumb"><a title="lever4" href="/level4" rel="v:url" property="v:title">Level4</a></li>
    <li typeof="v:Breadcrumb"><a class="currentLevel" title="Current Level" href="/my_page.html" rel="v:url" property="v:title">Current Level</a></li>
  </ul>
</div>

Answer 2

Yes, search engines tend to presume the order of the breadcrumbs from the order of the elements in the HTML marked up with RDFa.

However if you want to have really semantic HTML then maybe an <ol> is better than a <ul>, since you're dealing with an ordered list of breadcrumbs, not an unordered list.