Where developers come to connect, share, build and be inspired.

17

Creating a semantic breadcrumb using HTML5 microdata

35063 views


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.

Comments

  • User-avatar

    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 Rich snippet tool.

  • Img_1931

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

  • User-avatar

    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.

  • 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;
    }
    
  • User-avatar

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

  • 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).

  • User-avatar

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

  • Irnhmv6

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

  • Irnhmv6

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

  • User-avatar

    @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;
    }
    
  • 1f44f79dcf4bc7b22cbd3bd1b9d1a0e9_normal

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

  • 52746fa43b6a0e7e6c220a841278ffc1

    use screen reader to hide elemen, google it :)

  • Gl3r13bi_normal

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

  • La8swkpl_normal

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