Een logo is een afbeelding, geen h1

Posted By | 0 comments


Een paar dagen geleden had ik een discussie met de bouwer van een site waarvan ik het tekstuele component moest optimaliseren voor zoekmachines.

Hij had het logo (afbeelding bovenaan zijn pagina) bestempeld als h1 in zijn html, onder het motto: “dit is de titel van je site, dus het allerbelangrijkste op je pagina”.

Dit is een gedachtegang die ik weliswaar kan volgen, en één die veel wordt toegepast op diverse websites, maar toch is het fout.

Dit is zoals het er in code uitziet:

<div class="logo-placeholder">
<h1><a href="http://www.fakewebsite.com/">
<img title="Logo" alt="Logo" src="http://www.fakewebsite.com/images/Logo.jpg"></img></a></h1>
</div>

Wat je hiermee aangeeft is dat je logo een belangrijke heading is.

Om er nog verder in te duiken, dit is wat je ook wel eens ziet. een logo-afbeelding als achtergrond opgemaakt in html.

<h1><a href="/" title="Logo">Bedrijfsnaam</a></h1>

Met bijbehorende CSS:

h1 a{
width:;
height:;
display:block;
text-indent:-9999px; (zodat 'bedrijfsnaam' niet zichtbaar is door je logo heen)
background:url(/images/logo.gif); }

Het probleem met bovenstaande code is:

De belangrijkste paginaheader is nu een afbeelding, en zoekrobots kunnen afbeeldingen niet lezen… Zoekbots kunnen wel iets met de img title en alt tags, maar die worden niet belangrijker omdat die in een h1 element zitten.

In het geval dat je je logo als achtergrondafbeelding hebt verwerkt, heb je geen alt element voor je afbeelding. Daarmee wordt het lastiger voor mensen die een screenreader gebruiken om je site te bezoeken, screenreaders maken gebruik van die alt tag om kenbaar te maken waar de afbeelding over gaat. En ook Google gebruikt die alt tag, voor hetzelfde doel…

Volgens W3schools:
“Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.”

Het logo komt doorgaans op alle pagina’s van een site voor. Dus hebben alle pagina’s nu hetzelfde, onleesbare, h1 element. Dus een onbegrijpelijke structuur.

Google geeft weliswaar toe dat het geen probleem is om meer dan één h1 per pagina te gebruiken (zie hier de video van Matt Cutts), dus je zou kunnen overwegen je tekstuele inhoud te structureren met een tweede h1 element…
Alleen heb je dan dat probleem van het onleesbare logo nog niet opgelost, en het probleem van de h1 die op iedere pagina hetzelfde is.

Hoe het wel moet:

<a href="/" title="Logo" id="logo"> <img src="/images/Logo.jpg" alt="Logo" /> </a>

Vervolgens heb je je h1 vrij om te gebruiken waar ‘ie voor bedoeld is, het laten weten wat de belangrijkste paginaheader is. Voor SEO kan dit voordelen hebben.

Ik hoor je denken: ‘hoeveel invloed heeft dit nou helemaal’? Het antwoord daarop kan ik niet onderbouwen met keiharde cijfers, omdat zoekmachines geen inzicht geven in de formule waarmee ze de ranking van een site bepalen.

Wat ik wel met zekerheid kan zeggen is dat als je hoger wilt scoren dan een concurrent met dezelfde zoekwoorden, en die concurrent heeft zijn structuur wèl goed geregeld, is het des te moeilijker om die concurrent te evenaren…