Semantisch HTML5, gebruik van Microdata
Image by rosefirerising via Flickr
Op het internet is steeds meer informatie aanwezig. De meeste mensen vinden deze informatie door middel van een zoekmachine. Om de zoekmachine een handje te helpen kan je de inhoud van je website beschrijven in de broncode. Een methode om dit te doen is door het gebruik van microdata.
Wat is microdata
Met microdata beschrijf je de inhoud van je website. Met HTML is dit standaard niet mogelijk. Zoekmachines proberen de teksten op de website te interpreteren. Door het gebruik van de semantische tags in HTML5 kunnen we de inhoud iets verder specificeren. Met gebruik van Microdata wordt precies aangegeven wat voor inhoud het gaat. Zo ‘label’ je de verschillende onderdelen van je website en geef je ze een betekenis
Schema’s gebruiken
Om de inhoud te kunnen interpreteren heeft je website een schema nodig. Dit schema verteld welke eigenschappen het object wat je probeert te beschrijven kan hebben. een website waar je veel schema’s kan vinden, en welke juist wordt gewaardeerd door de bekende grote zoekmachines is www.schema.org. Op deze site vind je een enorme collectie van beschrijvende schemas’s. deze gebruiken we dan ook in onze voorbeelden.
Voorbeeld, een film. Itemscope, Itemtype, itemprop
We nemen als voorbeeld een film, normaal gesproken zal je deze in je html opbouwen als volgend voorbeeld:
<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>
Een zoekmachine indexeert deze informatie wel, maar kan het niet geheel juist interpreteren. Allereerst moeten we aangeven dat deze div een object in zich heeft. Dit doen me met Itemscope.
...
Daarna moet het object worden gekoppeld met een schema. In dt voorbeeld gaat het om een film, dus kunnen we via schema’.org het juiste schema terugvinden op http://www.schema.org/Movie. Deze koppelen we aan de div met Itemtype.
...
Zoals we kunnen lezen in het schema heeft een film verschillende eigenschappen. enkele daarvan kunnen we gerbuiken in onze html. door middel van Itemprop kunnen we deze eigenschappen toevoegen. We gebruiken volgens bovenstaand voorbeeld de eigenschappen name, director, genre en trailer.
Testen van de microdata.
Google bied een grats tool om Microdata te testen. deze is te vinden op http://www.google.com/webmasters/tools/richsnippets. Hier zie je ook hoe enkele voorbeelden in de zoekresultaten worden weergegeven. Deze resultaten vallen meer op dan de standaard resultaten van Google.
Objecten in Objecten
Soms heb je een object binnen een object. In de voorgaande voorbeelden hebben wij James Cameron beschreven als de regisseur van de film, maar hij is ook een persoon. Persoon is weer een ander object binnen het object film.
Meer op Netsetters over dit onderwerp
[...] Binnenkort op netsetters, alles wat je wilde weten over microdata in HTML5 [...]