SEO vriendelijke klikbare div's

Door joint_me op maandag 11 oktober 2010 21:21 - Reacties (21)
CategorieŽn: HTML, Optimalisatie, SEO, jQuery, Views: 4.344

Na het openen van mijn TweakBlog heb ik een tijdje nagedacht over een onderwerp voor mijn eerste bericht, om vervolgens mijn TweakBlog helemaal te vergeten. Totdat ik vandaag een stukje code tegenkwam wat voor mij een gewoonte is om te gebruiken.

Deze code is het directe gevolg van semantiek en het rekening houden met 3 soorten bezoekers.
  • Menselijke bezoeker, zonder visuele beperking
  • Menselijke bezoeker, met een visuele beperking
  • Crawlers, zoals de Google bot
Is een div klikbaar?
Nee, een div is niet klikbaar, maar je kunt hem wel klikbaar maken. En volgens mij is er maar 1 juiste manier.

Maar laten we eerst kijken hoe het niet moet:

HTML:
1
2
3
4
5
<div class="klikbare_div" onClick="top.location.href('http://www.tweakers.net/');">
  <h4>Title van het blok</h4>
  <p>Hier staat een stukje tekst, met interessante woorden en tekens.</p>
  <p>Lees meer ></p>
</div>



Waarom is dit geen optie? Er staat javascript direct in je code, dit gaat ten koste van tekst-code ratio beoordeling door een crawler. En een tekstreader zal in het beste geval de link lezen voordat de context behandeld is.

Een andere gebruikte optie is:

HTML:
1
2
3
4
5
<a href="http://www.tweakers.net/" id="klikbaar_blok" style="display: block;">
  <h4>Title van het blok</h4>
  <p>Hier staat een stukje tekst, met interessante woorden en tekens.</p>
  <p>Lees meer ></p>
</a>


Deze is niet veel beter, ten eerste staan er block elementen in een inline element. Dit is W3C niet toegestaan en levert je waarschijnlijk minpunten op van de crawler. Ook zal in dit geval een tekstreader de link voor de context behandelen.

Wat is dan wel een goede oplossing? Het antwoord is javascript en in mijn voorbeeld zal ik gebruik maken van jQuery. Waarom jQuery kun je jezelf afvragen? Nou daarom ;)

De oplossing die ik gebruik, bestaat uit 3 delen:

In het <body> van de pagina maak ik gebruik van de volgende semantische HTML:

HTML:
1
2
3
4
5
<div class="klikbare_div">
  <h4>Title van het blok</h4>
  <p>Hier staat een stukje tekst, met interessante woorden en tekens.</p>
  <a href="http://www.tweakers.net/">Lees meer ></a>
</div>


In de <head> include in een stukje Javascript.

HTML:
1
<script src="/javascripts/website.js" type="text/javascript"></script>


En in het javascript bestand heb ik ongeveer 6 regels code staan.

JavaScript:
1
2
3
4
5
6
$(document).ready(function(){
  $('div.klikbare_div').click(function() {
    div_link = $(this).find('div.klikbare_div a').attr('href');
    window.location = div_link;
  });
});


Het resultaat is
  • duidelijk en leesbare HTML. Een text-reader zal geen problemen hebben de tekst goed lezen, net zoals een crawler.
  • Er staat geen onnodige Javascript in de Content, de verhouding text-code wordt hierdoor beter.
  • De link staat onderaan de div, zodat de link goed in de context kan worden gezien. Ook krijgt tekst in een link punten mee van google, we herinneren ons vast nog wel 'raar kapsel' op google.
  • De Javascript is generiek en zal alle div's met class "klikbare_div" klikbaar maken.
  • Met een paar regels kun je een cross-browser hover toevoegen op de div.
Dit was mijn eerste bijdrage, ik hoop dat jullie er wat aan hebben. En nu ga ik nadenken over een volgend onderwerp.

p.s. Bedankt voor de feedback!