p0nvjw
40.37K
· July 2012 ·
Irnhmv6

Creating a semantic breadcrumb using HTML5 microdata

HTML5 is doing a lot for semantics and one of the key features I've been busy implementing in many of my projects is microdata. In this tip I'll share how to build a semantic breadcrumb that uses HTML5 microdata. Sites using microdata to markup their breadcrumbs also have their trail displayed on google search results like so:

Picture

Marking up our breadcrumb is incredibly simple and in this tip I'll be making use of the ol list element as in my eyes your breadcrumb is an ordered list and should be marked up as such.

<ol class="breadcrumb">
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/" itemprop="url">
            <span itemprop="title">Example.com</span>
        </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/news" itemprop="url">
            <span itemprop="title">News</span>
        </a>
    </li>  
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://www.example.com/news/news-story.1" itemprop="url">
            <span itemprop="title">News Story 1</span>
        </a>
    </li>
</ol>

Seems pretty easy right? I see no reason not to make use of this feature today if the rest of your site is making use of HTML5. All we would need to do is add a little styling but that's entirely on you.

Sign in or sign up to add your response.

14 Responses

2191

Hey there! Is there any way to create breadcrumbs using meta tags? I don't really have visible breadcrumbs on my site, but I would still like to add the microdata.

over 1 year ago ·
2193
Irnhmv6

@kpobococ Not that I know of. What you could do is use the above code and simple hide it using CSS:

.breadcrumb {
    display: none;
}
over 1 year ago ·
2194

@euantor sure, but my gut tells me that is wrong :) Anyway, thanks for the quick reply.

over 1 year ago ·
2195
Irnhmv6

@kpobococ It is kind of and Google may well even penalise for it (they don't like hiding stuff and only showing it for crawlers after all).

over 1 year ago ·
2196

@euantor that's what I thought. I would rather make do without the breadcrumbs than anger the almighty God if Search :)

over 1 year ago ·
2197
Irnhmv6

@kpobococ Yeah, anything that angers Google is best avoided if you wish for success.

over 1 year ago ·
3953
Img 1931

This is awesome! Microdata is such an ignored spec right now!

over 1 year ago ·
4814

Use the http://schema.org vocabulary. data-vocabular.org is older one. Schema.org is supported by Google, Bing and Yahoo. Example at schema.org is better and newer and works well even in Google <a href="http://www.google.com/webmasters/tools/richsnippets">Rich snippet tool</a>.

over 1 year ago ·
4951
Irnhmv6

@satya61229 Yes, I am aware of schema.org. Thanks for the comment though :)

over 1 year ago ·
10513

@kpobococ here is microdata for an invisible breadcrumb

Inline Style:

<span itemscope itemtype="http://schema.org/breadcrumb" style="display:none;">
    <a itemprop="url" href="http://mydomain.com/titledPage.html">
        <p itemprop="title">MY PAGE TITLE</p>
    </a>
</span>

External Style (declare the css markup found below in your stylesheet)

<span itemscope itemtype="http://schema.org/breadcrumb" class="hideCrumb">
    <a itemprop="url" href="http://mydomain.com/titledPage.html">
        <p itemprop="title">MY PAGE TITLE</p>
    </a>
</span>

CSS to declare when using the external method:

.hideCrumb {
display:none;
}
over 1 year ago ·
10805
1f44f79dcf4bc7b22cbd3bd1b9d1a0e9 normal

You could not hide microdata Google does not like this kind of tricks, neither hidden attribute, or display none, of text-indent, ...

over 1 year ago ·
10975
52746fa43b6a0e7e6c220a841278ffc1

use screen reader to hide elemen, google it :)

over 1 year ago ·
14102
Gl3r13bi normal

Is there a benefit of using microdata over RDFa for breadcrumbs?

over 1 year ago ·
21108
La8swkpl normal

If last item does not have a link, we just remove <a> from this structure, right?

over 1 year ago ·