Wat zijn rich snippets

Met rich snippets wordt de organische SERP aangevuld (verrijkt) met extra informatie. Op basis van deze informatie wordt het voor de gebruikers van zoekmachines nog makkelijker om in te schatten of het getoonde resultaat past bij de zoekintentie. Dit heeft vaak een positieve invloed op de CTR. Voorbeelden van elementen die getoond kunnen worden in rich snippets zijn breadcrumbs, reviews, recepten, evenementen en auteurs.

Markeren van elementen

Door elementen in de broncode te markeren met tags (microdata) worden bepaalde elementen uitgelicht voor zoekmachines. Door het gebruik van deze microdata begrijpen de algoritmes van zoekmachines de structuur van een pagina beter en daarmee ook belangrijke elementen. Het taggen van html code geeft geen garantie dat rich snippets ook daadwerkelijk vertoond zullen worden.

Implementatie

Door HTML elementen aan te vullen met extra tags die omschrijven welke informatie elementen worden getoond help je de zoekmachine om pagina-inhoud beter te begrijpen. Op basis van extra tags kan de zoekmachine bijvoorbeeld interpreteren of de pagina informatie over een product, film, persoon of video betreft. Hierbij dient het informatie schema van schema.org te worden aangehouden om de meest relevante zoekmachines van dit moment te bedienen (Google, Yahoo, Bing).

Een voorbeeld:

Aan de hand van onderstaande fictieve webpagina over de film Avatar van regisseur James Cameron lichten we het gebruik verder toe. De HTML broncode van de pagina ziet er als volgt uit:

<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>

We beginnen met het type van informatie toe te voegen: itemscope en itemtype. In dit voorbeeld betreft het informatie type Movie

<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>

Nu de zoekmachine begrijpt dat de pagina informatie over een film (movie) betreft kunnen er specifieke elementen aan het informatie object worden toegevoegd: itemprop.

In het code voorbeeld op de volgende pagina worden de naam van de film (name), het genre en de locatie van de trailer toegevoegd als informatie elementen die bij de itemscope Movie horen.

<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>

Let op: Rich snippet informatie elementen moeten altijd omsloten zijn door HTML elementen. In bovenstaand voorbeeld zijn hierom rond de naam van de regisseur de <span> </span> elementen toegevoegd.

Informatie in geneste structuur:

Het kan voorkomen dat aan een informatie element (itemprop) op zichzelf ook nieuwe kenmerken worden toegedicht. In onderstaand voorbeeld worden de extra elementen verder uitgebreid zodat er ook aan de regisseur (director) van de film specifieke informatie kan worden verbonden door itemscope opnieuw toe te passen:

<div itemscope itemtype =”http://schema.org/Movie”>  <h1 itemprop=”name”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>

Het resultaat: een geneste structuur waarin een Movie en een Person  worden gedefinieerd die ieder op zichzelf specifieke informatie elementen bevatten.

Na toepassing van de extra code weet de zoekmachine dat de pagina informatie bevat over een Movie met een Director (die op zichzelf een Person is).

|—       met een Name = Avatar

|—       met een Genre = Science Fiction

|—       met een Trailer = ../movies/avatar-theatrical-trailer.html

|—       met een Director (= Person)

|— met een Name = James Cameron

|— met een Birthdate = August 16, 1954