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.

Ook interessant voor jou:  Protocol onafhankelijke bronnen in webpagina's

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:

<div class="vcard">
  <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 interessant voor jou:  MySQL-database normaliseren

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.

Ook interessant voor jou:  Epoch

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.


“Want to say thanks?”

Heeft dit artikel je geholpen met het oplossen van een probleem? Vond je deze post interessant? Waarom doneer je dan geen kopje koffie? 🙂

Een kleine donatie van slechts €5 helpt mij enorm in de ontwikkeling en onderzoek van posts, en hosting van dit blog.

Koop een kop koffie

Bedankt voor je support.