Technology

HTML microdata – Google compliant breadcrumbs

May 18, 2013

Read time 2 min

Search engines, web crawlers, and browsers can extract and process Microdata from a web page […] it allows search engines to understand the information on web pages and provide more relevant results to users.

Google is the UI for the internet. First you need to get rankings, but an parallel goal is to get those results to show up like you want them to. You need small features like breadcrumbs. Here is how you can get them with HTMLmicrodata.

TL;DR! Show me the code!

<nav class="breadcrumbs">
  <ol>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="/" itemprop="url">
        <span itemprop="title">Reaktor</span>
      </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="/blog/" itemprop="url">
        <span itemprop="title">Blog</span>
      </a>
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="/blog/clojurescript-pekonilla-vai-ilman/" itemprop="url">
        <span itemprop="title">ClojureScript, pekonilla vai ilman?</span>
      </a>
    </li>
  </ol>
</nav>

 

How is this snippet constructed?

I started with the nav to wrap up my breadcrumbs. The olis used because this navigation is clearly in a phase-like order. li to show each item, a for links and an additionalspan just to specify title microdata.

The meaningful parts are the itemscopeitemtype anditemprop attributes. I use itemscope to declare a semantical container for this item. itemtype tells the crawler to use the Data-vocabulary.org vocabulary.

a elements are attributed with itemprop="url", which is self-explanatory. span is used only so that you can attribute it with itemprop="title".

Google has a limit for characters in breadcrumbs. This limit is the sum off all entries. After this limit is reached, Google shortens the list with “…”

Be sure to test your breadcrumb implementation (and other microdata experiments as well) at the Google Structured Data testing tool. I used the perhaps outdated data-vocabulary, because after my tests the schema.org webpage didn’t work. Schema.org is still a work in progress and because Google testing tool doesn’t show the search result correctly, I won’t use it.

No more fuzzy URL’s (which were user-friendly clean url’s in the beginning, weren’t they?) but a nice crisp trail of breadcrumbs.

I originally wrote about this at Coderwall.

Never miss a post