Als je het artikel wat is search engine optimization (zoekmachineoptimalisatie) hebt gelezen, dan weet je inmiddels een beetje wat SEO inhoudt. In dit tweede artikel duiken we iets dieper in op – mijns inziens – enkele belangrijke zaken: microformats en click-to-call telefoonnummers.

Microformats gebruiken voor zoekmachineoptimalisatie (SEO)

Waarom is zijn microformats en click-to-call telefoonnummers belangrijk?, hoor ik je denken. Eenvoudig: beleving.

Microformats is een HTML markup formaat voor het definiëren en publiceren van informatie. Microformats zijn de eenvoudigste methode om openlijk contacten, evenementen, reviews, recepten en andere gestructureerde informatie te publiceren. Door goed gebruik te maken van Microformats laat je een zoekmachine, én de websitebezoeker, weten waarmee het/hij/zij te maken heeft. Klinkt vaag he? Het Microformats diagram ziet er als volgt uit:

Microformats diagram
Microformats diagram

Laten we een voorbeeld geven.

hCard microformat voor personen en organisaties

Stel je voor dat je een contactpagina hebt op jouw website, met daarop jouw adresgegevens. In HTML ziet dat er vaak zo uit:

<p>bedrijfsnaam
Straat 1<br />
AABB CC Plaats<br />
Tel: 0598 111 111<br />
F: 0598 111 112<br />
E: <a href="mailto:info@example.com">info@example.com</a></p>

Ziet er duidelijk uit toch? Optisch ziet het er oké uit, maar het kan beter! Een zoekmachine zoals Google of Bing heeft geen idee dat het wat met deze gegevens zou kunnen. Ook voor een bezoeker van jouw website kan dit beter, om voor een betere website beleving te zorgen. Maar daarover straks meer.

Wist je dat Google en Bing deze informatie kunnen gebruiken door contactgegevens in een klein beetje extra code te verpakken? Hiervoor gebruiken we het microformat hCard, oftewel een visitekaartje.

Hiervoor definiëren we eerst een <div> met class="vcard", om aan te geven dat het om een visitekaartje gaat:

<div class="vcard">
</div>

Daartussen plaatsen we straks de adresgegevens. Dit mag overigens ook een <p class="vcard"> of <span class="vcard"> zijn. Wat maar het beste bij jouw website-layout past.

De verdere informatie moet ook gestructureerd worden, want daar draait het nou eenmaal om: gestructureerde data. Want zonder structuur heerst de chaos. Laten we de contactgegevens herschrijven, de uitleg volgt daaronder:

  <p>U wilt graag meer informatie?
Bel <a class="tel" href="tel:+31598111111">0598 111 111</a>
of stuur een e-mail naar
<a class="email" href="mailto:info@example.com">info@example.com</a>.</p>
<p class="adr"><span class="fn org"><strong>bedrijfsnaam</strong></span>
is gevestigd te AABB CC
<span class="locality"><strong>Plaatsnaam</strong></span></p>
</div>

Let wel dat we hier gebruikmaken van hcard versie 1.0, niet 2.0 wat eigenlijk beter is.

True, met al die class="" en <span>’s ziet dit er wat ingewikkelder uit. Maar dat is code, geen bezoeker die dat normaal gesproken ziet!

De uitleg: je vindt hCard 1.0 informatie op de microformats-website. De volgende properties worden hierboven gebruikt om data (informatie) te structureren:

  • vcard: het begin van onze hCard markup (visitekaartje)
  • tel: geeft aan dat het om een telefoonnummer gaat
  • email: geeft aan dat het om een e-mailadres gaat
  • adr: geeft aan dat het om een adres gaat
  • fn org: full name, in dit geval van een organisatie
  • postal-code: geeft aan dat het een postcode betreft
  • locality: geeft aan dat het de plaatsnaam betreft

Best wel logisch eigenlijk, of niet?

hcard-informatie en -markup valideren

Voordat je de informatie op je website plaatst moet je de markup valideren. Zoekmachines als Google en Bing kunnen hier belangrijke informatie uit extraheren, dus het moet wel kloppen. Met de Google tool voor gestructureerde gegevenstests kun je de HTML markup valideren. Je ziet dan ook nog eens exact welke gegevens Google hierin vindt!

Ook de hCard microformat Validator op geekhood.net kan je gebruiken voor het valideren van jouw hCard microformat informatie. Voor de grap kun je de bovenstaande vcard eerst proberen.

Click-to-call telefoonnummers

Click-to-call telefoonnummers?, ja, click-to-call! Wat is er nou vervelender dan het bezoeken van een website op je smartphone en niet het weergegeven telefoonnummer direct te kunnen bellen? Dat is niet goed voor de beleving van de bezoeker. Die moet eerst het telefoonnummer opschrijven, om het daarna te kunnen bellen.

Met click-to-call nummers lossen we dit euvel op. We gaan weer even terug naar onze contactpagina van hierboven, en pakken daar een stukje uit:

<p>[...]
Tel: 0598 111 111<br />
[...]
E: <a href="mailto:info@example.com">info@example.com</a></p>

Het e-mailadres is een zogenoemde hyperlink; als je erop klikt kan je een e-mail sturen omdat je e-mailprogramma wordt geopend. Het e-mailadres staat zelfs al in de geadresseerde regel. Hoe makkelijk!

Wist je dat dit met een telefoonnummer ook kan? De tijd van het eerst opschrijven van een telefoonnummer is nu toch echt wel voorbij. Heb jij nog geen click-to-call nummer op jouw website? Vraag je websitemaker dan om dit zo snel mogelijk aan te passen (wijs ze op dit artikel voor meer informatie).

Maar hoe doe je dat? Het in HTML maken van een click-to-call nummer is vrij eenvoudig, en werkt net als een gewone hyperlink. Je ziet het eigenlijk al in mijn hCard-voorbeeld:

[...]
<a class="tel" href="tel:+31598111111">0598 111 111</a>
[...]

That’s it! Plaats een telefoonnummer in een hyperlink, met tel: en het werkt.

Conclusie Search Engine Optimization (SEO) – microformats en click-to-call

In dit tweede zoekmachineoptimalisatie artikel heb je geleerd dat je, relatief, eenvoudig structuur kan aanbrengen in informatie. Dit kun je in jouw voordeel gebruiken om het makkelijker te laten oppikken door zoekmachines als Google en Bing.

Als er een app bestaat om hCard – of visitekaartje – informatie rechtstreeks op te slaan als contact op de smartphone, dan vergroot dit de gebruikersbeleving enorm.

Dit gaat niet alleen op voor contactgegevens, maar ook voor bijvoorbeeld evenementen, reviews en recepten. Het aantal sterretjes dat je hieronder aan dit artikel geeft is een review, en wordt in Google’s zoekresultaten getoond.

Een nóg betere beleving voor bezoekers bereik je ook door gebruik te maken van click-to-call telefoonnummers. Tenminste, als je telefonisch contact met (potentiële) klanten wilt… :) Een bezoeker hoeft een telefoonnummer niet meer eerst op te schrijven, maar tapt direct op het telefoonnummer op zijn smartphone. Het nummer wordt direct gebeld.

Show 2 Comments

2 Comments

  1. Indra

    Waarom heb je de uitleg niet gemaakt voor h-card (2.0) versie? Aangezien zij op hun eigen website ook daar naartoe refereren. Nu lijkt het achterhaalde informatie. Ook bevelen Google, Microsoft en Yahoo het gebruik van Schema.org (een samenwerkingsverband tussen de 3 zoekmachines).
    Het voordeel van Microformats is wel dat het meteen gestyled kan worden (met css) omdat het de class atrtribute gebruikt. Verder is het een prima uitleg! De click-to-call is een toevoeging.

    • Hoi Indra,
      Dank je voor je uitvoerige reactie.
      Je vraagt waarom ik de uitleg niet voor h-card (versie 2.0) heb gemaakt. Dat leek mij juist een leuk item om in een volgend blogpost te maken. Idem eigenlijk voor Schema.org Microdata, omdat – naar mijn mening – te weinig sites hiervan gebruikmaken; ik ken bijvoorbeeld niet veel WordPress thema’s die dit standaard gebruiken, terwijl dat wel zou moeten. Het worden er overigens wel steeds meer.
      In het kort dus: to be continued :)

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *