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?

They are siblings, but only when referencing their relationship to parent `ul`. Essentially when your viewpoint is the markup itself, as it would be for CSS, they would be siblings. Your RDFa is basically saying, these `li`'s correspond to some underlying data structure. So regarding a semantic viewpoint that wants to figure out what they represent, your RDFa explains they are actually hierarchical. — J. M. Becker, Dec 26 '13 at 22:21

score 5 · Accepted Answer · answered Aug 20 '13 at 21:20

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

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:

enter image description here

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>

score 0 · Answer 2 · answered Jan 13 '14 at 10:48

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.

RDFa Breadcrumbs

2 Answers2