Rich snippets en/of Microdata

Onderwerp(en:) Zoekmachineoptimalisatie (SEO)

In de zoekresultaten van diverse zoekmachines worden normaal gesproken drie elementen getoond: een titel, URL en omschrijving. Rich snippets zijn extra attributen of elementen die worden toegevoegd aan de HTML van een pagina. Met deze data kan er invloed worden uitgeoefend op zoekresultaten, dit uit zich vaak in de vorm van extra afbeeldingen en/of tekst. Zoekresultaten met een afbeelding of extra links springen uiteraard veel meer in het oog en genereren dus meer verkeer.

Er zijn meerdere formaten en technieken voor rich snippets zoals bijvoorbeeld RDFa en Microformats. Google raadt echter aan Microdata te gebruiken en gezien het feit dat 80% van het zoekverkeer via Google komt doet men er wijs aan naar Google te luisteren:

De praktijk

Normaal gesproken ziet een stuk HTML van bijvoorbeeld een artikel op een blog er ongeveer als volgt uit:

...
<div class="blogpost">
    <div class="blogpost-header">
        <p class="right">Gepubliceerd op: 11-22-33<br>door: A. De Schrijver</p>
        <h3>Post titel</h3>
    </div>
    <div class="blogpost-content"">
        <p>Een paragraaf ...</p>
    </div>
</div>
...

Als we dit blokje HTML analyseren is er voor ons als mens de volgende informatie uit af te leiden:

  • Het geheel betreft een post op een blog
  • De post is gescheven op een datum
  • De post is geschreven door een persoon
    • Deze persoon heeft een naam
  • De post heeft een titel
  • De post heeft een inhoud/tekst

Als we deze informatie met Microdata in de HTML willen implementeren doen we dat als volgt:

...
<div class="blogpost" itemscope itemtype="http://schema.org/BlogPosting">
    <div class="blogpost-header">
        <p class="right">
            Gepubliceerd op: <span itemprop="datePublished">11-22-33</span><br>door:
            <span itemprop="author" itemscope itemptype="http://schema.org/Person">
                <span itemprop="name">A. De Schrijver</span>
            </span>
        </p>
        <h3 itemprop="name">Post titel</h3>
    </div>
    <div class="blogpost-content" itemprop="text">
        <p>Een paragraaf ...</p>
    </div>
</div>
....

Er is nog veel meer mogelijk qua beschrijving van de informatie in je webpagina, van product tot recept en van evenement tot een plaats, zie Schema.org voor alle mogelijkheden.

Lees meer over Microdata op ikipedia (alleen beschikbaar in het Engels)