Over microdata

De HTML5-microdataspecificatie is een manier om inhoud te labelen met het doel een specifiek type informatie te beschrijven (zoals recensies, persoonsgegevens of evenementen). Elk informatietype beschrijft een specifiek soort item, zoals een persoon, een gebeurtenis of evenement of een recensie. Zo heeft een evenement bijvoorbeeld de eigenschappen 'locatie', 'starttijd', 'naam' en 'categorie'.

Microdata maakt gebruik van eenvoudige kenmerken (vaak <span> of <div>) om korte en beschrijvende namen toe te wijzen aan items en eigenschappen. Hier volgt een voorbeeld van een klein blok HTML-inhoud met algemene informatie over Nicolaas de Vries.

<div> 
  Mijn naam is Nicolaas de Vries, maar mensen noemen me Niek. Dit is mijn homepage:
  <a href="http://www.example.com">www.example.com</a>
  Ik woon in Amersfoort, Utrecht en werk als technicus bij Acme.
</div>

Hier volgt dezelfde HTML-inhoud met markeringen in microdata.

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  Mijn naam is <span itemprop="name">Nicolaas de Vries</span>, 
  maar mensen noemen me <span itemprop="nickname">Niek</span>. 
  Dit is mijn homepage:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  Ik woon in Amersfoort, Utrecht en werk als <span itemprop="title">technicus</span>
  bij <span itemprop="affiliation">Acme</span>.
</div>

Dit voorbeeld werkt als volgt.

  • Op de eerste regel geeft itemscope aan dat de inhoud tussen de <div>-tags een item is. itemtype="http://data-vocabulary.org/Person geeft aan dat het item een persoon is.
  • Elke eigenschap van het persoonsitem wordt aangeduid met het kenmerk itemprop. Zo beschrijft itemprop="name" de naam van de persoon.

Geneste entiteiten

In het bovenstaande voorbeeld worden contactgegevens van Nicolaas de Vries weergegeven, maar niet zijn adres. In het onderstaande voorbeeld zien we dezelfde HTML, maar in dit geval met de eigenschap address.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   Mijn naam is <span itemprop="name">Nicolaas de Vries</span>, 
   maar mensen noemen me <span itemprop="nickname">Niek</span>.
   Dit is mijn homepage: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Ik woon in 
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="locality">Amersfoort</span>, 
      <span itemprop="region">Utrecht</span> 
   </span>
   en werk als <span itemprop="title">technicus</span>
   bij <span itemprop="affiliation">Acme</span>.
</div>

Dit voorbeeld werkt als volgt:

  • De eigenschap address is zelf ook weer een item met een eigen reeks eigenschappen. Dit wordt aangeduid door het kenmerk itemscope bij het item te plaatsen dat de eigenschap address aanduidt, en door het kenmerk itemtype te gebruiken om het type item te specificeren dat wordt beschreven, zoals hier: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Zie Geneste items voor meer voorbeelden.

Informatie over datum en tijd

Om de datum en tijd ondubbelzinnig op te geven, gebruikt u het element time met het kenmerk datetime. Hier geeft de eigenschap startDate de startdatum van een evenement aan. De waarde in het kenmerk datetime wordt gespecificeerd op basis van de ISO-datumnotatie. Met deze indeling kunt u zoekmachines een gedetailleerde datum, tijd en (optioneel) de tijdzone in ISO-notatie ('2012-10-15T19:00-08:00') doorgeven en de datum toch op een voor gebruikers prettig leesbare manier op uw pagina weergeven ('15 oktober 2012, 19:00 uur).

<time itemprop="startDate" datetime="2012-10-15T19:00-08:00">15 oktober 2012, 19:00 uur</time>

Niet-zichtbare inhoud

In het algemeen geeft Google geen inhoud weer die niet zichtbaar is voor de gebruiker. Met andere woorden: u kunt geen inhoud aan gebruikers weergeven en vervolgens verborgen tekst gebruiken om extra informatie voor zoekmachines en webapplicaties te markeren. U moet de tekst markeren die daadwerkelijk wordt weergegeven aan de gebruikers die uw website bezoeken.

Er gelden enkele uitzonderingen op deze richtlijn. In sommige gevallen kan het nuttig zijn gedetailleerdere informatie te leveren aan zoekmachines, zelfs wanneer u deze informatie niet aan de bezoekers van uw pagina wilt weergeven. Als een restaurant bijvoorbeeld een beoordeling van 8,5 krijgt, zullen gebruikers ervan uitgaan dat deze gebaseerd is op een schaal van 1-10 punten, maar zoekmachines weten dat niet. In dit geval kunt u de beoordelingsschaal aanduiden met het element meta, zoals hier:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   Beoordeling: <span itemprop="value">8,5</span>
   <meta itemprop="best" content="10" />
</div>

Dit voorbeeld werkt als volgt:

  • De tag meta wordt gebruikt om extra informatie te specificeren die niet zichtbaar is op de pagina, zoals het feit dat de best mogelijke beoordeling hier 10 punten is. De waarde van de eigenschap wordt gespecificeerd met het kenmerk content.

Zo kan het doorgeven van de duur van een evenement in ISO-notatie ervoor helpen zorgen dat deze informatie correct in de zoekresultaten wordt weergegeven, zoals hier:

Duur: 
<span>1 uur 30 min<meta itemprop="duration" content="PT1H30M" />
</span>

Dit voorbeeld werkt als volgt:

  • Gebruik de tag meta om de waarde van de eigenschap te specificeren (in dit geval een tijdsduur). Op deze manier kunt u de waarde van het kenmerk content ('PT1H30M') om de duur te specificeren in ISO 8601-tijdnotatie, terwijl de duur voor gebruikers nog steeds in prettig leesbare tekst wordt weergegeven ('1 uur 30 min') op de pagina zelf.
  • Google kijkt naar het bovenliggende element van het meta-element om te bepalen welke informatie op een alternatieve manier wordt gepresenteerd in de meta-tag. In dit geval is het dus belangrijk ervoor te zorgen dat de bovenliggende codering van de meta-tag om de tekst '1 uur 30 min' wordt geplaatst.

Bekijk voor specifieke vocabulary en voorbeelden:

Als u uw markeringen wilt controleren, gebruikt u het hulpprogramma voor het testen van gestructureerde gegevens.