Menu

Developers

Breadcrumbs in Rich Snippets bij Google

19 april 2011

Soms zie je in de zoekresultaten van Google mooie breadcrumbs. Daarmee zie je het pad van die pagina binnen de website:

Bij sommige resultaten zoekt Google zelf uit wat het logische 'kruimelpad' van die pagina is, maar je kunt dit ook door middel van metadata in de pagina stoppen. Google pikt dit dan vanzelf op en toont ze dan in de resultaten.

In de bron van de hierboven getoonde pagina vind je het volgende stukje metadata in de bron (vereenvoudigd voor de leesbaarheid):

<div id="breadcrumbs">

<span class="header">Je bent nu hier</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" class="first" rel="home" itemprop="url">
<span class="crumb" itemprop="title">Home</span>
</a></span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="crumb">
<meta itemprop="title" content="Reisgidsen">
<span class="separator">&gt;</span>
<a href="/boeken/" itemprop="url">Reisgidsen</a>
</span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="crumb">
<meta itemprop="title" content="Fietsgids">
<span class="separator">&gt;</span>
<a href="/boeken/fietsgids/" itemprop="url">Fietsgids</a>
</span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="crumb">
<meta itemprop="title" content="Europa"><span class="separator">&gt;</span>
<a href="/boeken/fietsgids/europa/" itemprop="url">Europa</a>
</span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="crumb">
<meta itemprop="title" content="Nederland">
<span class="separator">&gt;</span>
<a href="/boeken/fietsgids/europa/nederland/" itemprop="url">Nederland</a>
</span>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="crumb">
<meta itemprop="title" content="Gelderland">
<span class="separator">&gt;</span>
<meta itemprop="url" content="http://reisgids-kopen.nl/boeken/fietsgids/europa/nederland/gelderland/">Gelderland</span>

</div>

Elk element dat je als breadcrumb wilt aanmerken geef je een itemtype http://data-vocabulary.org/Breadcrumb mee. Vervolgens daaronder dien je twee 'properties' van dit item te definieren, namelijk 'title' en 'url'. Dit kun je op een bestaand element zetten, zoals op de <a> tags van de eerste breadcrumbs, maar het laatste breadcrumb heeft geen url (is niet gelinkt). In dat geval kun je een <meta> tag toevoegen (dat mag sinds HTML5 ook in de <body>) met daarop een 'itemprop' en 'content' attribuut.

Voor meer informatie over de Breadcrumb metadata, check de uitstekende documentatie van Google zelf.

blog comments powered by Disqus

Nieuwsbrief ontvangen?

Velden met een * zijn verplicht

Like ons op Facebook

Klik hieronder om ons te liken op Facebook.