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 evenement of een recensie. Zo heeft een evenement bijvoorbeeld de eigenschappen 'locatie', 'starttijd', 'naam' en 'categorie'.

Microdata maakt gebruik van eenvoudige kenmerken in HTML-codering (vaak <span> of <div>) om korte en beschrijvende namen toe te wijzen aan entiteiten en hun 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 en ik wordt Nico genoemd. Dit is mijn homepage:
  <a href="http://www.example.com">www.example.com</a>
  Ik woon in Overvecht in Utrecht en werk als biotechnicus in het Utrecht Science Park.
</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> 
  en ik wordt <span itemprop="nickname">Nico</span> genoemd. 
  Dit is mijn homepage:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  Ik woon in Overvecht in Utrecht en werk als <span itemprop="title">biotechnicus</span>
  in het <span itemprop="affiliation">Utrecht Science Park</span>.
</div>

Dit voorbeeld werkt als volgt.

  • itemscope in de eerste regel geeft aan dat de inhoud van de <div> een item beschrijft en 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. Het onderstaande voorbeeld bevat dezelfde HTML-inhoud, maar nu met de eigenschap address.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   Mijn naam is <span itemprop="name">Nicolaas de Vries</span> 
   en ik wordt <span itemprop="nickname">Nico</span> genoemd.
   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">Overvecht</span>, 
      <span itemprop="region">in Utrecht</span> 
   </span>
   en werk als <span itemprop="title">biotechnicus</span>
   in het <span itemprop="affiliation">Utrecht Science Park</span>.
</div>

Dit voorbeeld werkt als volgt:

  • De eigenschap address is zelf ook weer een item met een eigen reeks eigenschappen. Dit wordt aangeduid met het kenmerk itemscope voor het item met de eigenschap address. Vervolgens wordt het kenmerk itemtype gebruikt om het itemtype dat wordt beschreven aan te geven, zoals: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Zie Geneste items voor meer informatie.

Gerefereerde items

U kunt een item op een bepaalde locatie definiëren en vanuit een of meer andere locaties naar deze locatie verwijzen. In het onderstaande voorbeeld wordt een adres beschreven en worden twee personen vermeld (Nicolaas en Miranda de Vries) die op dit adres wonen.

<div id="devries-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
   <span itemprop="locality">Overvecht</span>, 
   <span itemprop="region">in Utrecht</span> 
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="devries-address">
   Mijn naam is <span itemprop="name">Nicolaas de Vries</span> 
   en ik wordt <span itemprop="nickname">Nico</span> genoemd.
   Dit is mijn homepage: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Ik werk als <span itemprop="title">biotechnicus</span>
   in het <span itemprop="affiliation">Utrecht Science Park</span>.
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="devries-address">
   Mijn naam is <span itemprop="name">Miranda de Vries</span>.
</div>

Dit voorbeeld werkt als volgt:

  • De HTML die het item address beschrijft, bevat het kenmerk id: <div id="devries-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
  • De items person voor Nicolaas en Miranda verwijzen naar het adres met behulp van het kenmerk itemref waarin de adres-ID wordt weergegeven: <div itemscope itemtype="http://data-vocabulary.org/Person" itemref="devries-address">.

Informatie over datum en tijd

Gebruik het element time met het kenmerk datetime om datum en tijd ondubbelzinning op te geven. Hier geeft de eigenschap startDate de startdatum van een evenement aan. De waarde voor het kenmerk datetime wordt gespecificeerd in de ISO-datumnotatie. Met deze notatie voorziet u zoekmachines van gedetailleerde informatie over datum, tijd en (optioneel) tijdzone in ISO-notatie ("2009-10-15T19:00-08:00"). De datum op uw pagina wordt hierbij op gebruiksvriendelijke wijze weergegeven ("15 oktober 2009, 19:00 uur").

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15 oktober 2009, 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 relevante gegevens toevoegen via het element meta:

<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 aanvullende informatie te specificeren die niet zichtbaar is op de pagina, in dit geval het feit dat de 'best mogelijke' beoordeling 10 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 minuten<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). Hierdoor kunt u de waarde van het kenmerk content ("PT1H30M") gebruiken om de tijdsduur op te geven in de ISO 8601-tijdsindeling en wordt de tijdsduur op de pagina zelf op gebruiksvriendelijke wijze genoteerd ("1 uur 30 minuten").
  • Google kijkt naar het bovenliggende element van het element meta om te bepalen welke informatie op een alternatieve manier wordt gepresenteerd in de tag meta. In dit geval is het dus belangrijk om ervoor te zorgen dat de bovenliggende codering van de tag meta om de tekst '1 uur 30 minuten' wordt geplaatst.

Bekijk voor specifieke vocabulary en voorbeelden:

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