Rich Snippets: Verrijk je pagina's met Microdata!

Rich snippets, microdata, waar heb je het over? Om dit intuïtieve vraagstuk gelijk op te lossen zal ik je enkele voorbeelden presenteren. Zo zie je tegenwoordig steeds vaker (blije) hoofden verschijnen in de zoekresultaten, misschien ook wel bij concurrenten? Hieronder in ieder geval die van mijzelf:

rich snippet

Wanneer je in een culinaire bui bent, word je de laatste tijd ook regelmatig verrast met allerlei voorbeelden van lekkernijen. Je hoeft niet langer te wachten totdat je op de website bent voor een voorproefje, maar krijgt het gelijk te zien in de zoekresultaten:

microdata voorbeeld

Daarnaast krijg je gelijk een indruk van allemaal andere handige informatie zoals de bereidingstijd en het aantal calorieën. Op deze manier kun je als diëter direct maaltijden afkeuren of juist gelijk doorklikken op de smakelijke preview.

Rich snippets verrijken de potentiële bezoeker met extra informatie bij het maken van de juiste keuze. Deze snippets komen tot stand met behulp van microdata. In dit artikel zal ik ingaan op zowel de theorie als de praktijk, zodat je na het lezen ervan zelf aan de slag kunt!

Ook aan de slag met het verbeteren van je website en kun je wel hulp van een SEO specialist gebruiken?

Vraag dan hier een offerte aan

De W’s van Microdata

5-ws

Wat: Microdata is simpel gezegd een speciale set HTML5 tags voor het optimaliseren van de communicatie tussen zoekmachine en website. Door deze te integreren in de pagina’s van een website, kan je meer relevante informatie doorgeven aan de zoekmachines, zodat deze mooie rich snippets (rijk vormgegeven previews) kunnen tonen. Een ideaal onderdeel van SEO dus!

Waarom: Ten eerste levert het toepassen van microdata een significante stijging op van de doorklikratio(Click Through Rate) en ten tweede helpt het de zoekmachines bij het begrijpen van de verschillende onderdelen van jouw website.

Waar: Door microdata te gebruiken in de opmaak van de HTML code, kan er een interessante rich snippet ontstaan op de zoekresultatenpagina.

Wie: Deze data wordt gebruikt door de drie grootste zoekmachines: Google, Bing en Yahoo!. Hierbij is natuurlijk vooral Google belangrijk, gezien het feit dat vrijwel iedereen in Nederland kiest voor deze zoekgigant.

Wanneer: Afhankelijk van het soort organisatie en de type content die je aanbiedt, kun je microdata tot op bepaalde hoogte toepassen. Er is echter een bepaalde basis aan microdata die voor iedere onderneming relevant is dus is het belangrijk om je verder te verdiepen in de mogelijkheden.

Wat kan ik allemaal met rich snippets?

In het begin heb ik je al een aantal voorbeelden gegeven van rich snippets, maar dit is natuurlijk nog lang niet alles. Zo kun je een mooie afbeelding van jezelf toevoegen aan de zoekresultaten, om zo een persoonlijke tintje mee te geven en meer vertrouwen te wekken.

Ook kun je de andere data op je website benoemen met behulp van microdata om zo de snippets te verrijken. Een goed overzicht hiervan is te vinden op de homepage van de belangrijkste set microdata; schema.org. Hier wordt een onderscheid gemaakt tussen de soorten thema’s en organisaties, zodat je voor jouw website de meest geschikte set microdata kan selecteren. Enkele voorbeelden hiervan zijn:

  • Producten
  • Bedrijven
  • Evenementen
  • Recepten
  • Etc..

Het overzicht met alle mogelijke toepassingen is hier te vinden.

De details van deze toepassingen kun je invullen met behulp van de microdata die aangegeven staat op schema.org. Om dit te illustreren zal ik enkele mogelijkheden noemen voor het thema ‘Producten’:

  • Naam van het product
  • Bijbehorende plaatje
  • Prijs
  • Rating/Reviewscore van het product(weergegeven in sterren in Google)

rich snippet voorbeeld

 

 

Indien je alles goed implementeert, zou de uitkomst van de rich snippet zomaar iets in de trant van bovenstaand plaatje kunnen worden. Wie wil dat nou niet?

Een opsomming van alle verschillende definities zou te uitgebreid worden, dus voor een overzicht van de kansen op het gebied van microdata verwijs ik je naar schema.org.

Vind je de techniek en de zichtbaarheid van je website belangrijk, maar weet je niet precies hoe je dit voor elkaar kunt krijgen? Neem dan eens contact met ons op voor meer informatie via daan@insyde.nl of 015 256 82 62.

Implementatie van microdata

Om de implementatie van microdata uit te leggen zal het verhaal iets technischer moeten worden, aangezien het noodzakelijk is om bepaalde HTML5 elementen uit te leggen. Ik zal proberen om het zo duidelijk mogelijk te vertellen, maar waarschijnlijk zal uiteindelijk de webmaster de veranderingen door moeten voeren in de code van de website om zo de gewenste rich snippets te realiseren. Maar als ondernemer is het natuurlijk altijd fijn om op de hoogte te zijn van de mogelijkheden en kennis te hebben van wat er onder de digitale motorkap gebeurt.

Verschillende HTML5 elementen

Allereerst is het van belang om de hiërarchie bij het gebruik van microdata te kennen. Deze is verdeeld in drie verschillende HTML5 elementen:

  • itemscope - Het meest overkoepelende element. Deze geeft aan dat de elementen die gaan volgen, allemaal betrekking hebben op het aangegeven thema. Het thema wordt aangegeven door middel van het volgende HTML5 element: itemtype.
  • itemtype - Dit element wordt altijd gekoppeld aan een URL van een bepaald schema, bijvoorbeeld: itemtype=“http://schema.org/Product”. Hierdoor weten de zoekmachines precies met welke dataset ze te maken gaan krijgen. Itemtype wordt altijd gebruikt in combinatie met itemscope.
  • itemprop - Itemprop geeft aan waar de details op de pagina over gaan met betrekking tot het overkoepelende thema wat gedefinieerd is met behulp van itemtype. Itemprop wordt bijvoorbeeld gebruikt voor het communiceren van een specifieke prijs van een product aan Google, in dat geval zet je voor de prijs neer:. Bereikt resultaat in een voorbeeld van een rich snippet:

itemprop price

 

 

De volgorde van groot naar klein (hiërarchie) is dus itemscope - itemtype - itemprop. Dit komt erop neer dat itemprop-elementen alleen gebruikt kunnen worden binnen het ‘domein’ van een itemscope/itemtype. Dit kan eenvoudig worden gedaan door de itemscope/itemtype te definiëren in een  element.

Een element is namelijk een overkoepelende tag waarin andere elementen kunnen worden opgenomen.

Voorbeelden van het implementeren van microdata

Nu denk je misschien, elementen, nog nooit van gehoord! Deze gedachte is ook geheel logisch en vandaar dat het ook handig kan zijn om de webmaster hierbij in te schakelen. Om de theorie nog meer te verduidelijken, volgt hieronder een voorbeeld van microdata implementatie uit de praktijk.

Voorbeeld: Productbeschrijving

Stel je hebt een webshop voor skippyballen en je biedt een product aan met de beschrijving: 

microdata implementatie

Nu heb je dit weblogartikel net gelezen en zou je graag microdata willen toepassen op dit specifieke product. Gebaseerd op het bovenstaande voorbeeld, ziet de code voor een leuke rich snippet er als volgt uit:

itemscope, itemprop en itemtype

Een flinke kluif om zo in een oogopslag te bevatten en daarom raad ik je ook aan om hier nog eens rustig naar te kijken. Ik zal hierbij een korte toelichting geven om zo enkele mogelijke onduidelijkheden toe te lichten.

Toelichting voorbeeld: Zoals je kunt zien in het voorbeeld, worden er meerdere itemtypes door elkaar heen gebruikt. Dit kan echter alleen zolang deze specifieke itemtypes onder de algemene itemscope vallen, in dit geval: http://schema.org/Product. Wanneer je op deze pagina kijkt, zul je zien dat zowel http://schema.org/Offer als http://schema.org/AggregateRating, onderdeel zijn van http://schema.org/Product. Hierdoor kun je gebruikmaken van deze datasets wanneer je een product aan het beschrijven bent. Het is dus niet mogelijk om zomaar willekeurige datasets te integreren. Kijk daarom ook voor de details altijd op schema.org.

De itemprop-elementen spreken denk ik redelijk voor zich qua benaming en betekenis (price, priceCurrency etc..). Het is vooral zaak om deze op de juiste plek neer te zetten. Schema.org biedt hiervoor aan de hand van voorbeelden vaak ook goede handvatten en anders kun je altijd je vraag hieronder in de reacties stellen en dan help ik je met plezier op weg!

Auteur toevoegen aan de zoekresultaten

Onderstaande informatie is verouderd en niet meer van toepassing. Authorship middels foto wordt niet meer ondersteund in de zoekresultaten van Google.

Met de opkomst van microdata en rich snippets is ook een ander groot voordeel ontwikkeld, namelijk de optie om jouw profielfoto te koppelen aan je website. Hiervoor is echter wel een Google+ account vereist, aangezien andere social media niet werken in combinatie met de verrijkte zoekresultaten. Google gebruikt hiervoor zijn dominante positie om dit af te dwingen.

Maar hoe doe je dat nou, dat toevoegen van jouw gezicht aan de pagina’s van je website? Gelukkig is dit relatief eenvoudig.

  1. Maak een Google+ account aan als je dit nog niet gedaan hebt en upload een profielfoto.
  2. Bewerk je profiel en voeg bij “Bijdrager aan:” de link van je website/artikel toe. Op deze manier geef je vanuit Google+ aan dat jij het gezicht bent wat bij de website hoort. Echter zou iedereen dit kunnen doen en dus is het belangrijk dat Google ook het signaal vanuit de website krijgt dat jij de auteur bent.

rel author google plus

 

 

Dit signaal kun je op meerdere manieren realiseren.

  1. Allereerst zou je op iedere pagina, bijvoorbeeld in een sidebar of onderaan, een link kunnen maken naar je Google+ account. Dit interpreteert Google namelijk als een teken van auteurschap en zal dus jouw gezicht in de rich snippets tonen.
  2. Daarnaast kun je er ook voor kiezen om een HTML-tag te integreren in je website die aangeeft wie de auteur is (onzichtbaar voor bezoekers). Deze voeg je toe in het gedeelte. De tag luidt als volgt:

 

In dit voorbeeld heb ik mijn Google+ ID gebruikt, maar deze moet je natuurlijk vervangen door je eigen profiel.

Zie voor meer informatie ook de documentatie van Google zelf.

De proef op de som nemen

Nadat je de bovenstaande voorbeelden (of variaties erop) hebt uitgeprobeerd op je eigen website, wil je natuurlijk gelijk weten of dit ook daadwerkelijk werkt. Aangezien Google er soms wel een tijdje over kan doen voordat die al je pagina's opnieuw geïndexeerd heeft, zou het mooi zijn als je direct zelf kan testen of de geïmplementeerde code zijn rich snippet effect heeft.

Gelukkig kan dit! Google heeft hier namelijk de ideale microdata test tool voor ontwikkeld. Hier vul je de URL in van je geoptimaliseerde pagina en vervolgens zie je precies welke microdata opgepakt wordt door de zoekmachine en welke niet. 

rich snippet test tool

Kortom

Microdata is cool en veelzijdig. Je kan er veel informatie mee verstrekken aan zowel zoekmachines als gebruikers en zo de kans vergroten dat potentiële bezoekers op jouw pagina terecht komen. Een leuke profielfoto of handige informatie is van veel toegevoegde waarde omdat iedereen dan precies weet waar die aan toe is. Deze vergrote duidelijkheid zal vooral het percentage relevante klanten vergroten, aangezien de kans dat deze afhaken op basis van bijvoorbeeld prijs of reviews al een stuk kleiner is.

Relevantie is het sleutelbegrip voor nu en de komende jaren, en dus is het belangrijk om als ondernemer hier in mee te gaan. Microdata klinkt misschien kleinschalig, maar het voorspelt een grootste toekomst. Treed toe tot de nieuwe orde van de rich snippets en onderscheid jezelf als koren tussen al het kaf!

Heb je vragen met betrekking tot de implementatie van microdata of heb je andere op- of aanmerkingen? Reageer dan op dit artikel in de comments en ik help je graag op weg! Ook kun je voor meer informatie over de SEO diensten van Insyde natuurlijk bij mij terecht via daan@insyde.nl of 015 256 82 62.

Vraag hier een SEO offerte aan

Geschreven door Daan Weustenraad

SEO/SEA consultant

SEO is een prachtig vakgebied. Het ontdekken, analyseren en uitwerken van de informatiebehoefte van een doelgroep is een mooie uitdaging die ik graag iedere dag weer aanga. De combinatie van Adwords, Analytics, SEO en Conversieoptimalisatie zorgt voor de optimale bezoekerservaring en maakt dat er steeds meer bezoekers naar je website willen en kunnen komen.

Blijf up-to-date en ontvang updates in je mailbox

Lees ook deze interessante blogs

Totaalpakket: grondig renoveren website, inclusief teksten en beelden

Het besluit is genomen: je wilt een nieuwe website voor je bedrijf. Dit besluit is meteen de startpunt van een reeks volgende beslissingen. Wat te doen met de content – foto’s en teksten – op de huidige site? Passen deze nog bij de nieuwe weg die je in wilt slaan? Of doen deze juist afbreuk aan de nieuwe website en de communicatieboodschap die je wilt uitdragen? En wat als nieuwe teksten nodig zijn: zelf schrijven of iemand anders? En zo ja, wie dan? Oftewel: keuzes,...

SEO mythes

SEO mythes: wat is waarheid en wat is fictie?

SEO is een vakgebied waarin veel verhalen rondgaan over wat wel en niet werkt. SEO is dan ook een vakgebied met een continu veranderend landschap. De technologie achter websites wordt continue verbeterd, zoekmachines worden steeds slimmer en zoekmachinegebruikers worden steeds beter bediend. In dit artikel zullen we een aantal SEO-misverstanden behandelen.

Long tail SEO

Long Tail SEO: proces van de lange adem

Long Tail, een SEO-strategie die vaak wordt vergeten of niet wordt toegepast. Een gemiste kans! Long Tail is perfect ter aanvulling van je huidige Short Tail SEO-strategie. In dit artikel leg ik uit wat Long Tail zoekwoorden zijn, wat het je kan opleveren en beschrijf ik het proces van een Long Tail SEO-strategie.