Zo markeer je je website met microdata volgens schema.org

microdata

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.


Microdata in vergelijking met andere dataformaten

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.


De microdata-syntax

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:

  • Itemscope: het HTML5-attribuut itemscope wordt gebruikt binnen een div-tag om een bepaald bereik als item te definiëren. Dit item wordt verder gedetermineerd met behulp van itemtype en itemprop.
  • Itemtype: dit attribuut is toepasbaar op alle elementen die gemarkeerd zijn met het itemscope-attribuut en dient om een voorgedefinieerd type te markeren. Zo kunnen relevante elementen op een website worden ingedeeld in universele types volgens Schema.org die door alle gangbare zoekmachines kunnen worden gelezen.
  • Itemprop: het HTML5-attribuut itemprop geeft een eigenschap aan van een eerder genoemd itemtype. Welke eigenschappen kunnen worden toegekend aan het betreffende itemtype kan worden gevonden op de Schema.org-website.

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 <div itemscope itemtype="http://schema.org/Typ">
02 <span itemprop="property">Item</span>
03 </div>

Microdata-mark-up in de praktijk

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.

<div> </div> Het div-element definieert een nieuw tekstblok. Normaal gesproken wordt een itemscope geïntroduceerd en beëindigd door deze tag.
<span> </span> 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.


microdata markeren

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:

01 <div itemscope itemtype="http://schema.org/Organization">
02 <a itemprop="url" href="http://www.voorbeeldbedrijf.nl/">startpagina</a>
03 <img itemprop="logo" src="http://www.voorbeeldbedrijf.nl/logo.png">
04 </div>

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 <div itemscope itemtype="http://schema.org/Brand">
02 <span itemprop="name">merknaam</span>
03 <img itemprop="logo" src="http://www.voorbeeldmerk.nl/logo.png" rel="nofollow">
04 </div>

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


Google microdata

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:

01 <div itemscope itemtype="http://schema.org/Organization">
02 <span itemprop="name">Google.org (GOOG)</span>
03 Contact Details:
04 <div itemprop="address" itemtype="http://schema.org/PostalAddress">
05 Main address:
06 <span itemprop="streetAddress">38 avenue de l'Opera</span>
07 <span itemprop="postalCode">F-75002</span>
08 <span itemprop="addressLocality">Paris, France</span>
09 </div>
10 Tel: <xmp><span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
11 Fax: <xmp><span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
12 E-mail: <xmp><span itemprop="email">secretariat(at)google.org</span>
13 </div>

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.


microdata voor rich snippets

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:

01 <div itemscope itemtype="http://schema.org/Hotel">
02 <span itemprop="name">naam van het hotel</span>
03 <span itemprop="description">beschrijving van het hotel</span>
04 <img itemprop="image" src="http://Images/hotel.jpg" />
05 </div>

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 <div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
02 <span itemprop="price">400 euro</span>
03 </div>

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 <div itemscope itemtype="http://schema.org/Hotel">
02 <span itemprop="name">naam van het hotel</span>
03 <span itemprop="description">beschrijving van het hotel</span>
04 <img itemprop="image" src="http://Images/hotel.jpg"/>
05 <div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
06 <span itemprop="price">400 euro</span>
07 </div>
08 <span itemprop="paymentAccepted">overschrijving, creditcard etc.</span>
09 <span itemprop="map">URL naar de kaart</span>
10 <div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
11 <span itemprop="name">titel van de review</span>
12 <span itemprop="author">auteur</span>
13 <span itemprop="reviewBody">reviewtekst</span>
14 <span itemprop="datePublished">reviewdatum</span>
15 </div>
16 </div>

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 <div itemscope itemtype="http://schema.org/Review">
02 <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
03 <span itemprop="name">naam van het hotel</span>
04 </div>
05 <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
06 <span itemprop="ratingValue">4</span>
07 </span> stars -
08 <b>"<span itemprop="name">titel van de review</span>"</b>
09 <span itemprop="author" itemscope itemtype="http://schema.org/Person">
10 <span itemprop="name">auteur</span>
11 </span>
12 <span itemprop="reviewBody">reviewtekst</span>
13 </div>

microdata Breadcrumbs

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:

01 <ol>
02 <li>
03 <a href="http://www.aanbieder.nl/hotels/" rel="nofollow">Hotels</a>
04 </li>
05 <li>
06 <a href="http://www.aanbieder.nl/hotels/nederland/" rel="nofollow">Hotels in Nederland</a>
07 </li>
08 <li>
09 <a href="http://www.aanbieder.nl/hotels/nederland/amsterdam/" rel="nofollow">Hotels in Amsterdam</a>
10 </li>
11 <ol>

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 <ol> itemscope itemtype="http://schema.org/BreadcrumbList">
02 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
03 <a itemprop="item" href="http://www.aanbieder.nl/hotels/" rel="nofollow">
04 <span itemprop="name">Hotels</span></a>
05 <meta itemprop="position" content="1"/>
06 </li>
07 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
08 <a itemprop="item" href="http://www.aanbieder.nl/hotels/nederland/" rel="nofollow">
09 <span itemprop="name">Hotels in Nederland</span></a>
10 <meta itemprop="position" content="2"/>
11 </li>
12 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
13 <a itemprop="item" href="http://www.aanbieder.nl/hotels/nederland/amsterdam/" rel="nofollow">
14 <span itemprop="name">Hotels in Amsterdam</span></a>
15 <meta itemprop="position" content="3"/>
16 </li>
17 </ol>

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.

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany