Wat zijn alt-attributen en titelattributen?
De term alt-tag is een veelgebruikte afkorting van wat eigenlijk een alt-kenmerk is op een img-tag. De alt-tag van elke afbeelding op je site moet beschrijven wat erop staat. Schermlezers voor blinden en slechtzienden lezen deze tekst voor en maken je afbeelding daarom toegankelijk.
Dit is een complete HTML-afbeeldingstag:
<img src=“afbeelding.jpg” alt=“omschrijving afbeelding” title=“afbeelding tooltip”>
De alt- en titelattributen van een afbeelding worden meestal alt-tag (of alt-tekst) en title-tag genoemd, ook al zijn het technisch geen tags. De alt-tekst beschrijft wat er op de afbeelding staat en de functie van de afbeelding op de pagina. Dus als je een afbeelding als knop gebruikt om product X te kopen, zou de alt-tekst moeten zeggen: “knop om product X te kopen.” Zo eenvoudig is het.
De alt-tag wordt gebruikt door schermlezers. Dit zijn browsers die worden gebruikt door blinden en slechtzienden om hen te vertellen wat er op de afbeelding staat. Het titelkenmerk wordt weergegeven als een tooltip wanneer je over het element zweeft, dus in het geval van een afbeeldingsknop kan de afbeeldingstitel een extra call-to-action bevatten, zoals “Koop product X nu voor € 19!”. Dit wordt echter niet vaak toegepast.
Elke afbeelding moet een alt-tekst hebben, niet alleen voor SEO-doeleinden, maar ook omdat blinden en slechtzienden anders niet weten waar de afbeelding over gaat, maar een titelkenmerk is niet vereist. Bovendien is het meestal niet logisch om het toe te voegen. Ze zijn alleen beschikbaar voor gebruikers die een muis gebruiken (of andere aanwijsapparaten) en kunnen ‘hoveren’ of ‘zweven’ over een pagina-onderdeel.
Als de informatie die wordt overgebracht door het titelkenmerk relevant is, overweeg dan om het ergens anders beschikbaar te maken, zoals bijvoorbeeld in platte tekst. En als het niet relevant is, overweeg dan het titelkenmerk volledig te verwijderen.
Maar wat als een afbeelding geen doel heeft?
Als je afbeeldingen in je ontwerp hebt die er puur zijn om ontwerpredenen, doe je het verkeerd. Die afbeeldingen moeten namelijk in je CSS staan en niet in je HTML. Als je deze afbeeldingen echt niet kunt wijzigen, geef ze dan een leeg alt-kenmerk:
<img src="afbeelding.png" alt="">
Het lege alt-kenmerk zorgt ervoor dat schermlezers de afbeelding overslaan.
Alt-tekst en SEO
Google hecht relatief veel waarde aan alt-tekst. Niet alleen om te bepalen wat er op de afbeelding staat maar ook hoe deze zich verhoudt tot de omliggende tekst. Controleer dus altijd of de alt-tekst aansluit bij wat de pagina of het artikel wil zeggen. Het is geen must dat je je focus-sleutelzin -daar waar je pagina over gaat, in 1 zin- in elke alt-tag moet spammen. Je hebt goede, hoogwaardige, gerelateerde afbeeldingen nodig voor je berichten, waarbij het zinvol is om het focuszoekwoord in de alt-tekst te hebben. Het advies van Google over het kiezen van een goede alt-tekst is:
Wanneer je alt-tekst kiest, concentreer je dan op het maken van nuttige, informatierijke inhoud die trefwoorden correct gebruikt en in de context van de inhoud van de pagina staat. Vul geen alt-attributen met trefwoorden (keyword stuffing), omdat dit een negatieve gebruikerservaring oplevert en uw site als spam kan worden gezien.
Als jouw afbeelding van een specifiek product is, neem dan zowel de volledige productnaam als de product-ID op in de alt-tag, zodat deze gemakkelijker kan worden gevonden. Over het algemeen: als een sleutelzin nuttig kan zijn om iets te vinden dat op de afbeelding staat, neem het dan (indien mogelijk) op in de alt-tag.
Vergeet ook niet de naam van het afbeeldingsbestand te wijzigen om iets te beschrijven dat erop staat.
Alt- en titelattributen in WordPress
Wanneer je een afbeelding naar jouw WordPress website uploadt, kun je een titel en een alt-kenmerk instellen. Standaard gebruikt het de afbeeldingsbestandsnaam in het titelkenmerk. Waneer je vervolgens geen alt-kenmerk invoert, wordt de alt-titel gekopieerd naar het alt-kenmerk. Hoewel dit beter is dan niets schrijven, is dit een slechts gewoonte. Je moet echt de tijd nemen om een goede alt-tekst te maken voor elke afbeelding die je toevoegt aan een bericht: gebruikers en zoekmachines zullen je daarvoor bedanken. De interface maakt het eenvoudig: klik op een afbeelding, klik op de Bewerken-knop en je pas het snel een eenvoudig aan.
Er is geen excuus om dit niet goed te doen, behalve luiheid. Jouw (afbeelding-)SEO zal echt profiteren als je deze kleine details goed hebt. Visueel uitgedaagde gebruikers zullen je daar ook des te meer voor waarderen.