SEO tip: vergeet het alt attribuut bij een afbeelding met een link niet!
Een alt attribuut op een afbeelding omschrijft als het goed is tekstueel de inhoud van de afbeelding. Dit verhoogt de toegankelijkheid van een website door de afbeelding te voorzien van een omschrijving. Deze omschrijving vertelt aan zoekmachines wat deze afbeelding inhoudt en is nuttig voor ondermeer mensen met een visuele handicap die een screenreader gebruiken die deze omschrijving voorleest. Wanneer een afbeelding wordt gebruikt als link naar een andere pagina wordt er best extra aandacht geschonken aan het alt attribuut.
Iedereen die met zoekmachine optimalisatie bezig is weet ondertussen dat de ankertekst van een tekstlink door de zoekmachines wordt gebruikt om te analyseren waarover de pagina waar naar gelinkt wordt gaat. Wanneer er echter een afbeelding als link wordt gebruikt is er geen ankertekst. Hier speelt het alt attribuut een grote rol, het alt attribuut van de afbeelding vervangt als het ware de ankertekst en helpt zoekmachines bij het analyseren van de doelpagina.
Wanneer extra opletten?
Vaak wordt er bij een online productcatalogus waar afbeeldingen en titels gebruikt worden een link gelegd van zowel de afbeelding als de titel naar de detailpagina van het product. Zie voorbeeld hier:
In bovenstaand voorbeeld kan je een typisch voorbeeld zien van een online productoverzicht. Hier zijn zowel de afbeelding van het mes als de titel voorzien van een afzonderlijke link. Niets bijzonders denk je... Wel als het alt attribuut goed gebruikt wordt is dit ook niets bijzonders, wanneer het alt attribuut foutief of helemaal niet gebruikt wordt kan dit vrij grote gevolgen hebben voor de zoekmachine optimalisatie van de site in kwestie.
Het zit namelijk zo: Algemeen wordt er aangenomen dat voor een zoekmachine, wanneer er 2 links vanop 1 pagina linken naar één en dezelde pagina, enkel de ankertekst van de eerste link van belang is. Wanneer er in dit voorbeeld het alt attribuut vergeten wordt dreigt er een link zonder omschrijvende ankertekst als eerste te staan en kunnen de zoekmachines niet goed achterhalen over wat de doelpagina precies handelt. In dit geval is het dus belangrijk om een goede omschrijvende alt attribuut te voorzien op de afbeeldingen om aan de zoekmachines te laten weten over wat de detailpagina precies handelt.
Meer lezen over het belang van attribuut en seo? Op http://www.seobook.com/link-title-attribute-vs-image-alt-tags-which-better vind je een interessant artikel over het belang van het image alt attribuut in zoekmachine optimalisatie.
EDIT: Dit artikel had eerst als titel SEO tip: vergeet de alt tag bij een afbeelding met een link niet! Maar Roel Van Gils van Anysurfer wees er op dat "alt tag" eigenlijk een verkeerd woordgebruik is en dat het alt attribuut moet zijn. Correct is correct, bij deze is het artikel aangepast en hebben we weer wat bijgeleerd.
5 reacties tot nu toe
Wolf zei 3 jaar geleden:
Iemand die met een screenreader surft hoort dan 3 keer hetzelfde. Het zorgt voor code bloat en is absoluut onnodig. Een title attribuut dient om extra informatie te geven, niet om de informatie die al op de pagina staat te herhalen.
Zie ook de mening van de Roger.
Zijnoot: IE6 gebruikt de alt tekst op images foutief als "title".
Jente zei 3 jaar geleden:
Roel Van Gils zei 3 jaar geleden:
Een 'alt tag' bestaat uiteraard niet. Je zou kunnen argumenteren dat een 'tag' een generiek woord is voor een label/etiket dat je ergens aanhangt of dat de term 'alt tag' inmiddels ingeburgerd is. En toch stoort het me ;) In een HTML-context is het verwarrend om het over een 'tag' te hebben als je een 'attribuut' bedoelt. Als je per se een generek woord wilt gebruiken, zeg of schrijf dan liever 'alt-tekst'. Dat is veel duidelijker (zeker voor meelezende studenten en aspirant-webdesigners).
Zegt @Wolfr:
Iemand die met een screenreader surft hoort dan 3 keer hetzelfde
Dat is nu ook weer niet helemaal juist. Het standaardgedrag van de meeste screenreaders is dat title-attributen *niet* voorgelezen worden (en met behulp van een bep. toetsencombinatie kan het dan toch als de alt-tekst ontoereikend blijkt). Jaws for Windows zal standaard de *langste* van de twee voorlezen (niet ideaal in veel gevallen, maar bon).
Het is ook niet aangeraden om de alt-tekst van een gelinkte afbeelding leeg te laten, zelfs niet als eronder een link staat die naar dezelfde pagina leidt. Een screenreadergebruiker weet immers niet dat die twee links naar dezelfde pagina leiden en krijgt het gevoel iets te missen.
Mij lijkt het eigenlijk beter (in het geval van de messen) om zowel de afbeelding als de tekst eronder in één a-tag te steken. Waarom twee links maken als het ook met eentje kan? Ik geloof niet dat dat SEO-gewijs van enige invloed is. En in dat geval hoeft er zelfs geen alt-attribuut meer bij de foto van het mes; dat zou pas echt 'dubbel op' zijn (de linktekst is de optelsom van alle tekst en alt-attributen van afbeeldingen binnen eenzelfde a-tag).
En trouwens -- oh, dit wordt een stoute opmerking -- als je graag de mening van échte ervaringsdeskundige screenreadergebruikers wil lezen in deze comments, dan zal je toch eerst wat aan die ontoegankelijke captcha hieronder moeten doen :p
Voor de rest: goed bezig! ;)
Jente zei 3 jaar geleden:
Stephen zei 2 jaar geleden:
Voor mij was deze informatie zeer nuttig. Heb ondertussen aan mijn kaart van europa de alt tekst toegevoegd.
Ziet er ook heel wat beter uit als je er met de muis over gaat.
bedankt voor de tip.
Stephen