Microdata is een HTML5-specificatie van de WHATWG (Web Hypertext Application Technology Working Group). Dit dataformaat biedt een metasyntax voor het markeren van gestructureerde gegevens die het websiteoperators mogelijk maakt om content te verrijken met metadata door semantische context machineleesbaar te annoteren.
Deze metadata worden gelezen door programma’s als webcrawlers of browsers. Ze vormen de basis van uitgebreide contentpresentaties of een bewerking van websitecontent door ondersteunende systemen, zoals screenreaders. Gestructureerde data zijn ook relevant voor zoekmachine-optimalisatie, omdat semantische annotaties het indexeren van een website vereenvoudigen en de zoekresultaten uitbreiden met extra informatie. Voor datastructurering is microdata gebaseerd op een uniforme tagwoordenschat van Schema.org.
Terwijl de internet community het erover eens is dat HTML meer semantisch moet worden, is de keuze van het juiste dataformaat voor het markeren van metadata nog altijd onderwerp van discussie. Als separate module voor HTML5 is microdata oorspronkelijk geïntroduceerd als alternatief voor de toenmalige standaard RDFa, het door W3C aanbevolen formaat voor het beschrijven van metadata in HTML en XHTML. Het doel was om een vereenvoudigde syntax te realiseren met een vergelijkbare functionaliteit. Een extra voordeel is de overeenkomst met de nieuwste HTML-versie. Microdata kwam in de belangstelling door het project Schema.org, een gezamenlijk initiatief van de zoekmachineproviders Google, Bing, Yahoo en Yandex, die samen een uniforme woordenschat, gebaseerd op microdata-mark-up, ter beschikking stellen voor de semantische annotatie. Hoewel microdata lange tijd als dataformaat de voorkeur droeg van de marktleider Google, is deze aanbeveling tegenwoordig een stuk minder dwingend. De woordenschat van Schema.org ondersteunt naast microdata ook nog steeds een markering met RDFa. Bovendien komt JSON-LD steeds meer in de belangstelling te staan met een nieuw script-based mark-up-formaat. Dit formaat wordt nog niet voor alle datatypes ondersteund door Google, waardoor microdata nog steeds actueel is.
Microdata-syntax is gebaseerd op naam-waardeparen, zogenaamde items, en kan het best worden uitgelegd in drie stappen. Eerst wordt een element gedefinieerd en gekenmerkt als item. Dit item wordt vervolgens toegewezen aan een bepaald type uit de Schema.org-woordenschat. Wanneer het itemtype is gedefinieerd, kunnen hieraan verschillende eigenschappen (properties) worden toegekend. Deze markering gebeurt met de HTML5-attributen itemscope, itemtype en itemprop:
Het insluiten van de attributen itemscope, itemtype en itemprop in de HTML-code gebeurt volgens het volgende basisschema voor microdata-mark-up:
Basisschema van de microdata-mark-up voor een item:
01 | |
02 | |
03 |
Net als andere formaten voor het semantisch markeren van HTML-documenten is microdata ook gebaseerd op een reeks klassieke HTML-tags. In feite zijn microdata-attributen onafhankelijk van HTML-tags. Als supportelementen van microdata-attributen zijn daarom semantisch lege HTML-tags als <div> en <span> zeer geschikt.
Het div-element definieert een nieuw tekstblok. Normaal gesproken wordt een itemscope geïntroduceerd en beëindigd door deze tag. | |
Het span-element definieert een algemeen inline-bereik, zonder de rendering van de browser te beïnvloeden. Het wordt daarom gebruikt om een itemprop te markeren. |
In principe kunnen metadata met microdata-attributen in alle HTML-tags worden opgenomen. De volgende voorbeelden laten het toevoegen van metadata zien in div- en span-elementen, hyperlinks, geïntegreerde illustraties en lijsten.
Een typische applicatie voor het semantisch markeren van websitecontent zijn embedded bedrijfslogo’s. Voor deze bedrijfslogo's kun je bijvoorbeeld vector afbeeldingen gebruiken. Waar een menselijke bezoeker in staat is om een afbeelding op een website te herkennen als bedrijfslogo, zijn programma’s als webcrawlers afhankelijk van microdata om de context te ‘begrijpen’:
Mark-up van een bedrijfslogo:
01 | |
02 | |
03 | ![]() |
04 |
In coderegel 01 wordt een nieuw div-element geïntroduceerd dat zowel de URL in regel 02 als de HTML-code van de geïntegreerde afbeelding in regel 03 omvat. Deze op zich niet-specifieke div-tag wordt door het attribuut itemscope gekenmerkt als informatiedragend element. Het itemtype-attribuut verwijst naar het type Organization volgens de Schema.org-standaard. De webcrawler komt zodoende te weten dat de informatie binnen de div-tags gaat over een bedrijf. Bovendien zijn de eigenschappen url en logo met hun corresponderende waardes toegekend aan het itemtype. De zoekmachine kan de afbeelding nu als bedrijfslogo identificeren en hem in verband brengen met de homepage van het bedrijf. Zoekmachines als Google gebruiken dit soort gemarkeerde afbeeldingen bijvoorbeeld voor het maken van de knowledge graphs.
In het geval van een merklogo zou de volgende Schema.org-mark-up kunnen worden gebruikt:
Mark-up van een merklogo:
01 | |
02 | |
03 | ![]() |
04 |
Het element binnen de itemscope is gekenmerkt volgens Schema.org als Brand. Als eigenschappen worden de merknaam en het logo inclusief opslagplaats aangegeven.
Naast het markeren van afbeeldingen is de semantische annotatie van contactgegevens ook bijzonder belangrijk, omdat ook deze informatie een basis vormt voor uitgebreide zoekmachineresultaten, zoals sitelinks of de knowledge graph. Een uitgebreide microdata-mark-up van contactgegevens is in het volgende voorbeeld op Schema.org te zien:
Mark-up van de contactgegevens van Google:
01 | |
02 | |
03 | |
04 | |
05 | |
06 | |
07 | |
08 | |
09 | |
10 | |
11 | |
12 | |
13 |
In coderegel 01 definieert het itemtype-attribuut het element in de div-tag van regel 01 tot en met regel 13 als Organization volgens Schema.org. Met verschillende itemprop-attributen zijn hieraan de eigenschappen name, address, telephone, faxNumber en email toegewezen met hun corresponderende waardes. Tot zover is het schema gelijk aan de vorige voorbeelden. Een uitzondering is echter te zien in regel 04. De microdata-syntax staat toe dat een waarde van een eigenschap ook een item kan zijn. Hier is de informatie onder address door een tweede div-element met eigen itemscope ingebed en gedefinieerd als itemtype PostalAddress volgens Schema.org. Dit wordt door de eigenschappen streetAddress, postalCode en addressLocality nader gedefinieerd.
Wanneer je wilt dat je website bij de zoekresultaten van o.a. Google in de uitgebreide vorm van rich snippets voorkomt, is de semantische markering van bepaalde informatie zeer belangrijk. Met rich snippets worden details als productinformatie, recepten, gebruikersreviews, events, softwareapplicaties, video’s en nieuwsberichten, die bijvoorbeeld van belang zijn voor de customer journey, direct in de zoekmachineresultatenpagina’s (SERP’s) getoond, ervan uitgaand dat de corresponderende websites geoptimaliseerd zijn voor machinaal lezen. Het volgende voorbeeld van een fictieve hotelaanbieding laat schematisch zien hoe zulke informatie met microdata-syntax volgens Schema.org kan worden gemarkeerd.
Normaal gesproken ontvangen geïnteresseerden van een reis- of vakantieportal informatie over de naam van het hotel, een korte beschrijving en een foto van de accommodatie. Met microdata, gemarkeerd volgens Schema.org, zou de HTML-code van deze basisinformatie er als volgt uitzien:
01 | |
02 | |
03 | |
04 | ![]() |
05 |
Het attribuut itemtype in regel 01 verwijst naar het voorgedefinieerde type Hotel. In de regels 02 tot en met 04 worden de eigenschappen name, description en image met hun corresponderende waardes toegewezen.
Dit basiskader kan worden uitgebreid met zoveel andere informatie in de vorm van itemprops of ondergeschikte itemscopes als je maar wilt. Daarbij is het belangrijk dat ondergeschikte div-elementen binnen de div-tags van bovenliggende itemscopes worden geplaatst. De volgende code breidt de semantische annotatie voor de hotelaanbieding uit met een prijsopgave.
Mark-up voor hotelprijzen:
01 | |
02 | |
03 |
In regel 01 wordt de eigenschap makesOffer (doet een aanbod) als het itemtype Offer (aanbod) gedefinieerd. En omdat aanbiedingen altijd met een prijs worden aangegeven, is in regel 02 de itemprop price toegevoegd en voorzien van de waarde 400 euro.
Informatie over de betalingsmethodes (itemprop="paymentAccepted"), locatie (itemprop="map") of klantenreviews (itemprop="reviews") kan ook worden gemarkeerd volgens Schema.org. De mark-up ziet er dan als volgt uit:
Uitgebreide mark-up voor een hotelaanbieding:
01 | |
02 | |
03 | |
04 | ![]() |
05 | |
06 | |
07 | |
08 | |
09 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 |
In regel 01 wordt het item Hotel gedefinieerd als bovenliggend type voor de daaropvolgende items tot regel 15. Daarna volgt basisinformatie als naam, beschrijving en afbeelding, die is gekenmerkt als eigenschappen van het item Hotel. De hotelprijs is gemarkeerd in regel 05 tot 07 door het ondergeschikte itemscope-attribuut Offer. Daarna volgen de betaalmethodes en informatie over de locatie die zijn toegewezen aan het bovenliggende item Hotel. Het ondergeschikte item Review markeert de informatie in regel 10 tot 15 als horend bij een review. Deze review bevat de eigenschappen titel, auteur, reviewtekst en -datum die allemaal met een eigen itemprop zijn gekenmerkt.
Wanneer er bij een review van een hotel ook een rating met sterren in de rich snippets voorkomt, adviseert Google de volgende mark-up:
Mark-up voor een review met een rating:
01 | |
02 | |
03 | |
04 | |
05 | |
06 | |
07 | |
08 | |
09 | |
10 | |
11 | |
12 | |
13 |
Een andere mogelijkheid om meer informatie in de SERP’s weer te geven, zijn breadcrumbs (broodkruimels). Hiermee kan de navigatiestructuur van een website worden gemarkeerd, wat zoekmachines de mogelijkheid geeft om een webpagina binnen een website exact te lokaliseren. Een kenmerkend voorbeeld voor het toevoegen van breadcrumb trails in HTML is de volgende code:
HTML-mark-up van een breadcrumb trail:
01 | |
02 | |
03 | |
04 | |
05 | |
06 | |
07 | |
08 | |
09 | |
10 | |
11 |
Het voorbeeld toont een lijstelement (ordered list of ol) dat de links van verschillende subpagina’s van een website bevat. Om deze navigatiestructuur voor programma’s als webbrowsers of zoekmachinecrawlers te markeren als breadcrumb trail wordt de volgende microdata-mark-up gebruikt volgens Schema.org:
Microdata-mark-up voor breadcrumbs volgens Schema.org.
01 |
|
02 | |
03 | |
04 | |
05 | |
06 | |
07 | |
08 | |
09 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 |
Het lijstelement <ol> wordt met het itemscope-attribuut als item gedefinieerd en is via itemtype toegekend aan het schema BreadcrumbList volgens Schema.org. Voor elke ‘broodkruimel’ binnen de navigatiestructuur wordt een eigen itemscope met het itemtype ListItem geopend. Aan elk ListItem van de breadcrumb trail worden de itemprops name, item en position als eigenschappen toegekend. Deze bevatten de waardes voor de naam, de URL en de positie van een breadcrumb trail in een vorm die voor machines leesbaar is.