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

236

Creating a semantic breadcrumb using HTML5 microdata

26601 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

  • Img_0839_normal
    satya61229

    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
    ceane

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

  • 0_fdcxepiegmtoeydxdulueyvbchnoeyuxsoiueywcgdcvb4uk_ifhxojjuq9ziushaazv5jbq2cg5
    kpobococ

    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.

  • Untitled-2
    euantor

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

    .breadcrumb {
        display: none;
    }
    

  • 0_fdcxepiegmtoeydxdulueyvbchnoeyuxsoiueywcgdcvb4uk_ifhxojjuq9ziushaazv5jbq2cg5
    kpobococ

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

  • Untitled-2
    euantor

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

  • 0_fdcxepiegmtoeydxdulueyvbchnoeyuxsoiueywcgdcvb4uk_ifhxojjuq9ziushaazv5jbq2cg5
    kpobococ

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

  • Untitled-2
    euantor

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

  • Untitled-2
    euantor

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

  • 0_r7vm6ciebwwiefuzvhja6h4fcwofecjzjeaa6heqheo0v6ovbwoce8pvjiyrd5pjvu4kdbvan6cj
    jaredjameswolf

    @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
    smontiu

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

  • Blank-mugshot
    fahmi182

    use screen reader to hide elemen, google it :)

  • Gl3r13bi_normal
    springboardseo

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

Add a comment