Rich snippets - Breadcrumbs

Nieuw! Met schema.org kunt u een veel breder scala aan itemtypen markeren op uw pagina's, met een vocabulary die Google, Microsoft en Yahoo! allemaal kunnen herkennen. Meer informatie. (Google biedt echter nog steeds ondersteuning voor uw bestaande rich snippets-markeringen.)

Opmerking: in dit artikel wordt een experimentele indeling behandeld. Dit artikel kan in de toekomst worden aangepast of verwijderd, afhankelijk van feedback en andere beschikbare standaarden voor markeringen.

Over breadcrumbs

Een spoor met breadcrumbs is een reeks links (breadcrumbs) die een gebruiker kan helpen bij het begrijpen van en navigeren in de hiërarchie van uw site:

Pagina's kunnen meer dan één spoor met breadcrumbs bevatten. Bijvoorbeeld:

Wanneer u breadcrumbgegevens markeert in de hoofdtekst van een webpagina, kan Google deze identificeren en gebruiken om de informatie op uw pagina's beter te begrijpen en te presenteren in onze zoekresultaten.

Eigenschappen

Breadcrumbs kunnen een aantal verschillende eigenschappen bevatten die u kunt labelen met microdata of RDFa. Google herkent de volgende eigenschappen voor breadcrumbs.

Eigenschap Beschrijving
title De titel van een breadcrumb.
url De URL van een breadcrumb.
child De volgende breadcrumb in de hiërarchie. Het onderliggende item moet ook een breadcrumb-item zijn.

De volgende HTML-code beschrijft een spoor met breadcrumbs voor een productpagina op een site met dameskleding.

  <a href="http://www.example.com/jurken">Jurken</a> › 
  <a href="http://www.example.com/jurken/lang">Lange jurken</a> › 
  <a href="http://www.example.com/jurken/lang/groen">Lange groene jurken</a> 

Deze reeks breadcrumbs wordt als volgt weergegeven op de pagina:

JurkenLange jurkenLange groene jurken

In de volgende gedeelten wordt beschreven hoe u deze inhoud kunt markeren met microdata of RDFa.

Microdata

Hier volgt dezelfde HTML-code met markeringen in microdata:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/jurken" itemprop="url">
    <span itemprop="title">Jurken</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/jurken/lang" itemprop="url">
    <span itemprop="title">Lange jurken</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/kleding/jurken/lang/groen" itemprop="url">
    <span itemprop="title">Lange groene jurken</span>
  </a>
</div>

Dit voorbeeld werkt als volgt:

  • Op de eerste regel van elke <div> geeft <itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> aan dat de HTML-code die is ingesloten in <div>, een breadcrumb beschrijft. itemscope geeft aan dat de inhoud van de <div>-tags een item beschrijft en itemtype="http://data-vocabulary.org/Breadcrumb" geeft aan dat het item een breadcrumb is.
  • In het voorbeeld worden de eigenschappen van het item beschreven, zoals de titel en de URL. Om de eigenschappen te labelen, krijgt elk element dat een van deze eigenschappen bevat (zoals <div> of <span>) het kenmerk itemprop toegewezen om aan te geven dat het een eigenschap betreft. Bijvoorbeeld <span itemprop="url">.
  • De breadcrumb-items moeten op volgorde worden weergegeven. Het eerste item stelt de pagina op het bovenste niveau voor en het laatste item stelt het bovenliggende item van de huidige pagina voor.

Als een pagina meerdere sporen met breadcrumbs heeft

Als uw pagina slechts één spoor met breadcrumbs bevat, gebruikt Google de volgorde van de items zoals ze op uw pagina worden weergegeven. Als uw pagina echter meer dan één spoor met breadcrumbs bevat, moet u aangeven bij welk spoor met breadcrumbs elke breadcrumb hoort. Gebruik hiervoor de eigenschap child om het volgende item in de hiërarchie als volgt aan te geven:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/boeken" itemprop="url">
    <span itemprop="title">Boeken</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/boeken/auteurs" itemprop="url">
      <span itemprop="title">Auteurs</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/boeken/auteurs/stephenking" itemprop="url">
        <span itemprop="title">Stephen King</span>
      </a>
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/boeken" itemprop="url">
    <span itemprop="title">Boeken</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fictie" itemprop="url">
      <span itemprop="title">Fictie</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/boeken/fictie/horror" itemprop="url">
        <span itemprop="title">Horror</span>
      </a>
    </div>
  </div>
</div>

RDFa

Hier volgt dezelfde HTML-inhoud met RDFa-markeringen.

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/jurken" rel="v:url" property="v:title">
      Jurken
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/jurken/lang" rel="v:url" property="v:title">
      Lange jurken
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/jurken/lang/groen" rel="v:url" property="v:title">
      Lange groene jurken
    </a> ›
   </span>
</div>

Dit voorbeeld werkt als volgt.

  • Het voorbeeld begint met de declaratie van een naamruimte via xmlns. Hiermee wordt een naamruimte aangegeven waarin de 'vocabulary' (een lijst met entiteiten en ondergeschikte onderdelen) wordt vermeld. Voeg aan het eind een forward slash (/) en hekje (#) toe (xmlns:v="http://rdf.data-vocabulary.org/#").
  • Elke breadcrumb wordt aangegeven met typeof="v:Breadcrumb".
  • De naam van de breadcrumb wordt als volgt aangegeven met de title-eigenschap, voorafgegaan door v:: <span property="v:title">. Het kenmerk rel geeft aan dat de link de URL van de breadcrumb is. Het kenmerk property moet worden gespecificeerd in het <a>-in plaats van erin te worden genest, zoals hier: <a href="books.html" rel="v:url" property="v:title">Boeken</a>.
  • De breadcrumb-items moeten op volgorde worden weergegeven. Het eerste item stelt de pagina op het bovenste niveau voor en het laatste item stelt het bovenliggende item van de huidige pagina voor.

Als een pagina meerdere sporen met breadcrumbs heeft

Als uw pagina slechts één spoor met breadcrumbs bevat, gebruikt Google de volgorde van de items zoals ze op uw pagina worden weergegeven. Als uw pagina echter meer dan één spoor met breadcrumbs bevat, moet u aangeven bij welk spoor met breadcrumbs elke breadcrumb hoort. Gebruik hiervoor de eigenschap child om het volgende item in de hiërarchie als volgt aan te geven:


<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/boeken" rel="v:url" property="v:title">
      Boeken
    </a> ›
    <span rel="v:child">
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/boeken/auteurs" rel="v:url" property="v:title">
          Auteurs
        </a> ›
        <span rel="v:child">         
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/boeken/auteurs/stephenking" rel="v:url" property="v:title">
              Stephen King
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/boeken" rel="v:url" property="v:title">
      Boeken
    </a> ›
    <span rel="v:child">
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/boeken/fictie" rel="v:url" property="v:title">
          Fictie
        </a> ›
        <span rel="v:child">         
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/boeken/fictie/horror" rel="v:url" property="v:title">
              Horror
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>