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 additional
span just to specify title microdata.
The meaningful parts are the
itemprop 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
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.
Sign up for our newsletter
Get the latest from us in tech, business, design – and why not life.