Zo markeer je je website met microdata volgens schema.org

Wat zijn microdata?

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.

Afbeeldingen met microdata markeren

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:

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:

Het element binnen de itemscope is gekenmerkt volgens Schema.org als Brand. Als eigenschappen worden de merknaam en het logo inclusief opslagplaats aangegeven.

Contactgegevens met microdata in de website markeren

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:

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.

Websitecontent markeren met microdata voor rich snippets

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:

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:

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:

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:

Breadcrumbs markeren met microdata

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:

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.

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.