Het semantische web: Schema.org voor beginners

Een van de meest onderschatte (of gewoon onbekende) wapens om online content beter onder de aandacht te brengen is gebruikmaken van het semantische web. Een goed begin is het toevoegen van microdata van Schema.org aan je HTML. Door deze te gebruiken help je zoekmachines beter te begrijpen waar een webpagina over gaat en ben je beter zichtbaar in de zoekresultaten. Maar Schema.org biedt meer voordelen.

(Om dit artikel te begrijpen is basiskennis van HTML vereist.)

Schema.org is een gezamenlijk project van Google, Bing, Yahoo! en de Russische zoekmachine Yandex. Met Schema.org voeg je met microdata semantiek toe aan een HTML-document. Of in meer begrijpelijke taal: je zorgt er voor dat bijvoorbeeld zoekmachines begrijpen waar je het over hebt. Schema.org noemt zelf op zijn website het voorbeeld van Avatar.

Stel, je hebt daarover de volgende informatie op je webpagina staan:

<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Voor de menselijke lezer die deze informatie in zijn browser ziet, is het in een keer duidelijk dat het hier over de film gaat. Maar voor een zoekmachine is dat minder duidelijk. Het zou immers ook over een bepaald type profielfoto kunnen gaan, of een term uit het hindoeïsme. Door gebruik te maken van Schema.org voorkom je dit soort misverstanden.

Hoe werkt het?

Op Schema.org vind je een hiërarchie van verschillende categorieën, of types, waar je onderwerp onder kan vallen. Het meest algemene type is Thing. Daarbinnen kun je weer onderscheid maken in meer specifieke subcategorieën. Voor een film kunnen we Thing bijvoorbeeld verder specificeren als CreativeWork, en daar vandaan kunnen we weer duidelijk maken dat het om een Movie gaat.

Door in je HTML naar deze categorie op Schema.org te verwijzen is het voor een zoekmachine zonneklaar dat je het over een film hebt:

<div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

En je kan de zoekmachinespider nog veel meer duidelijk maken. Per Type heb je de mogelijkheid verschillende Properties toe te voegen met daarin aanvullende informatie. In dit geval wie de regisseur is van de film, het genre, en waar je de trailer kan vinden:

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director:
<span itemprop="director">James Cameron</span>
(born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Een oplettende lezer valt bovendien al op dat hiermee nog niet aan alle informatie semantiek is toegevoegd. Door te erkennen dat James Cameron niet alleen een regisseur is maar ook een Person, kan je er ook nog de daaronder vallende Property birthDate aan toewijzen:

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name"&g;Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director:
<span itemprop="name">James Cameron</span>
(born <span itemprop="birthDate">August 16, 1954)</span>
</div>
<span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Rich snippets

Behalve dat je zoekmachines op deze manier een beter beeld geeft van de content op je website, en ze het dus aan een relevanter publiek kunnen tonen, gebruiken ze microdata ook voor het tonen van rich snippets. Zoals deze van IMDb, waarin de filmrating al zichtbaar is in de zoekresultaten:

Google kan deze informatie tonen omdat IMDb de volgende microdata in zijn HTML opnam:

<div itemtype="http://schema.org/AggregateRating" itemscope itemprop="aggregateRating"> Ratings:
<strong><span itemprop="ratingValue">8,0</span></strong>/
<span itemprop="bestRating">10</span> from <span itemprop="ratingCount">661.580</span> users
</div>

En dat is nog maar een van mogelijkheden. Neem deze rich snippet van Trailer Addict:

Google kan deze tonen, omdat Trailer Addict de volgende microdata in zijn HTML zette:

<div class="content" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="thumbnailUrl" content="http://www.traileraddict.com/thumb-video.php?d=20th-century-fox&f=avatar"> <meta itemprop="duration" content="PT00H02M10S"> (...) </div>

E-mailmarketing

Schema.org lijkt nu misschien een SEO-ding, maar de mogelijkheden zijn eindeloos. In Gmail hebben e-mailmarketeers bijvoorbeeld de mogelijkheid om Schema.org te gebruiken om call-to-actions al in de onderwerpregel te tonen of om op te vallen in de map met promotiemails. En gezien het feit dat Google voor Schema.org samenwerkt met onder andere Yahoo! en Bing, kan het niet lang duren voor ook hun e-mailclients volgen.

Aan de slag

Overtuigd van het nut van Schema.org? Mooi, dan is het tijd om er zelf mee aan de slag te gaan. Geen zin om zelf in je HTML te harken? Gebruik dan de online Markup Helper van Google. Testen of je alles goed hebt ingesteld kan met de Rich Snippets Tester van de zoekgigant. Overigens geven zowel de zoekmachines als Gmail (nog) geen garanties dat het gebruiken van Schema.org-opmaak daadwerkelijk leidt tot het tonen van rich snippets of call-to-actions in de inbox.