Alt-tekst: de beschrijving die je afbeelding compleet maakt
Op de gemiddelde website staan tientallen afbeeldingen zonder beschrijving. In de code staat dan IMG_2049.jpg, of helemaal niets. Voor een ziende bezoeker maakt dat weinig uit. Voor een blinde bezoeker verdwijnt daarmee een deel van je verhaal. En Google weet niet waar je foto over gaat.
Het gekke is: dit is de goedkoopste manier van afbeeldingen optimaliseren die ik ken. Een goede alt-tekst kost je tien seconden per afbeelding.
Een groothandel in vloeren kwam bij mij met een concrete klacht. Hun productfoto’s kwamen nergens terug in Google Afbeeldingen. Ik keek in de mediabibliotheek en zag het meteen. Ruim vierhonderd afbeeldingen zonder alt-tekst. De bestandsnamen waren allemaal cameracodes.
We hebben de bibliotheek in twee dagdelen doorgewerkt. Elke productfoto kreeg een beschrijving met soort, kleur en toepassing. Decoratieve vormen kregen bewust een leeg alt-attribuut. Vier maanden later kwam bijna een tiende van hun bezoek uit afbeeldingszoekopdrachten. Dat kanaal bestond daarvoor domweg niet.
Wat is alt-tekst?
Alt-tekst is een korte beschrijving van een afbeelding. Je zet hem in het alt-attribuut van de img-tag. De tekst is normaal gesproken onzichtbaar op je pagina. Hij verschijnt wel als de afbeelding niet laadt. En hulpsoftware leest hem hardop voor.
De volledige naam is alternatieve tekst. In het Engels zie je ook alt attribute of alt tag voorbijkomen. Technisch is alt tag onjuist, maar iedereen gebruikt het.
Een goede alt-tekst beschrijft wat er echt te zien is.
Waarom alt-teksten zo belangrijk zijn
Reden 1: toegankelijkheid
Een blinde bezoeker gebruikt een screenreader. Die software leest de pagina voor. Bij een afbeelding leest hij de alt-tekst. Ontbreekt die, dan hoort de bezoeker de bestandsnaam of niets. Meer hierover lees je bij accessibility.
Reden 2: vindbaarheid
Google kan een foto niet echt zien. De alt-tekst geeft context over de inhoud. Dat helpt bij indexering in Google Afbeeldingen. Het versterkt ook het thema van je pagina. Zo draagt het bij aan je SEO.
Reden 3: robuustheid
Soms laadt een afbeelding gewoon niet. Denk aan een trage verbinding of een verkeerd pad. De browser toont dan de alt-tekst als vervanging. Je bezoeker snapt daardoor nog steeds wat er stond.
Zo schrijf je een goede alt-tekst
Ik houd mezelf aan een paar vaste regels. Ze werken voor vrijwel elke afbeelding.
Mijn zes regels
Beschrijf wat je ziet, niet wat je hoopt te ranken.
Houd het onder de 125 tekens.
Begin niet met afbeelding van of foto van.
Noem het onderwerp eerst en de context daarna.
Verwerk je zoekwoord alleen als het natuurlijk past.
Herhaal niet letterlijk het bijschrift eronder.
Twijfel je over de lengte? Stel jezelf een simpele vraag. Zou je dit door de telefoon zo omschrijven?
Decoratieve afbeeldingen
decoratieve afbeeldingen hebben geen beschrijving nodig. Denk aan een sierlijk lijntje of een achtergrondvorm. Zulke beelden voegen geen informatie toe. Geef ze dan een leeg alt-attribuut, dus alt is niets. De screenreader slaat de afbeelding dan netjes over.
Let op het verschil met helemaal weglaten. Zonder alt-attribuut leest de software de bestandsnaam voor. Dat is precies wat je wilt voorkomen.
Afbeeldingen die een link zijn
Is je afbeelding tegelijk een knop of link? Beschrijf dan de bestemming, niet het plaatje. Bijvoorbeeld: naar de contactpagina. De bezoeker weet dan waar hij terechtkomt.
Veelgemaakte fouten
Ik zie steeds dezelfde missers terugkomen bij bestaande sites.
Keyword stuffing, dus een rij zoekwoorden achter elkaar.
Dezelfde alt-tekst op elke afbeelding van de site.
Complete alinea’s in het alt-attribuut proppen.
Alt-teksten in het Engels op een Nederlandse site.
Tekst in een afbeelding zetten zonder die tekst te herhalen.
Die laatste is echt schadelijk. Een prijslijst als plaatje is voor niemand leesbaar. Zet zulke informatie altijd ook in echte tekst.
Alt-tekst invullen in WordPress
In de mediabibliotheek van WordPress staat een veld met de naam alternatieve tekst. Vul dat in bij het uploaden, niet later. Zo bouw je meteen een schone bibliotheek op. Let op: de titel van het bestand is iets anders. Die wordt niet als alt-tekst gebruikt.
Voeg je een afbeelding toe via een plugin of slider? Controleer dan of die het alt-veld daadwerkelijk meestuurt. Niet elke bouwsteen doet dat goed. In een webwinkel op WooCommerce let ik daar extra op. Productgalerijen slaan het veld nogal eens over.
Ik controleer lege alt-teksten standaard tijdens periodiek onderhoud. Zo blijft de bibliotheek schoon, ook als er anderen aan de site werken. Bekijk ook mijn uitleg over WebP voor lichtere bestanden.
Kort samengevat
Een alt-tekst beschrijft je afbeelding in gewone taal. Hij helpt bezoekers, zoekmachines en je eigen structuur. Vul hem altijd in, behalve bij pure decoratie. Begin vandaag bij je twintig belangrijkste pagina’s.
Meer vragen over Alt-tekst
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is alt-tekst en waarom heb je het nodig?
Hoe schrijf je een goede alt-tekst?
Hoe lang mag een alt-tekst zijn?
Hoe vul je alt-tekst in bij WordPress?
Welke alt-tekst gebruik je bij productfoto’s?
Helpt alt-tekst voor je positie in Google?
Hoe lang mag een alt-tekst zijn?
Alleen als het er natuurlijk in past. Dat is de hele regel. Een alt-tekst beschrijft wat er te zien is, niet wat je wilt scoren.
Staat er een timmerman op de foto en verkoop je timmerwerk? Dan komt dat woord er vanzelf in. Prima. Staat er een kantoorpand op en verkoop je timmerwerk? Dan hoort het woord er niet in. Zo simpel is het.
Keyword stuffing in alt-teksten is een klassieke fout uit 2010. Google herkent dat patroon inmiddels moeiteloos. Het levert je niets op en het schaadt je bezoeker. Iemand met een screenreader hoort dan een rij losse woorden.
De echte winst zit ergens anders. Een goede beschrijving geeft context aan de hele pagina. Dat versterkt je thema op een natuurlijke manier. Meer over de juiste omgang met zoektermen lees je bij zoekwoord.
Herhaal je zoekwoord al helemaal niet bij elke afbeelding. Twintig identieke alt-teksten op één pagina zijn een duidelijk signaal. En niet in positieve zin.
Moet ik mijn zoekwoord in de alt-tekst zetten?
Houd ongeveer 100 tot 125 tekens aan. Dat komt neer op één heldere zin. Sommige oudere screenreaders kappen langere teksten gewoon af. Je bezoeker mist dan het einde van je beschrijving.
Korter mag zeker. Een productfoto van een blauwe regenjas heeft weinig woorden nodig. Blauwe regenjas met capuchon van het merk X. Klaar. Meer toevoegen maakt het niet beter.
Soms heb je juist meer ruimte nodig. Denk aan een infographic of een schema met cijfers. Die informatie past niet in één zin. Zet de volledige uitleg dan in de gewone tekst onder de afbeelding. De alt-tekst verwijst daar kort naar.
Mijn eigen test is simpel. Zou je dit door de telefoon zo omschrijven aan iemand? Zo niet, dan is het te lang of te gekunsteld. Kijk voor de bredere context ook bij accessibility.
Schrijf er ook nooit een bestandsnaam in. Dat gebeurt vaker dan je denkt bij een import. Een screenreader spelt zoiets letterlijk voor, teken voor teken.
Wat doe ik met decoratieve afbeeldingen?
Geef ze een leeg alt-attribuut. Dus alt is aanwezig, maar zonder inhoud. De screenreader slaat de afbeelding dan netjes over. Dat is precies wat je wilt bij een sierlijntje of een achtergrondvorm.
Let goed op het verschil met weglaten. Ontbreekt het attribuut helemaal, dan gaat sommige software de bestandsnaam voorlezen. Je bezoeker hoort dan iets als I M G onderstreep twee nul vier negen. Dat is storend en volstrekt zinloos.
De vraag is dus: voegt dit beeld informatie toe? Zo ja, beschrijf het. Zo nee, laat het leeg. Twijfel je? Bedenk of je het beeld in een telefoongesprek zou noemen.
Veel decoratieve vormen horen eigenlijk niet eens in de HTML thuis. Zet ze als achtergrond in je stijlblad. Dan bestaat het probleem gewoon niet. Zo houd je je code schoon, wat ook je pagespeed helpt.
Bij een icoon naast een tekst geldt hetzelfde. Staat de betekenis al in die tekst? Laat de alt dan leeg en voorkom dubbele aankondiging.
Telt alt-tekst mee voor mijn positie in Google?
Het is geen zware rankingfactor op zichzelf. Wie beweert dat alt-teksten je naar plek één brengen, overdrijft. Toch laat ik ze nooit leeg, en daar heb ik drie redenen voor.
Ten eerste opent het een apart kanaal. Google Afbeeldingen levert bij sommige klanten flink wat bezoek op. Zonder beschrijving doe je daar niet aan mee.
Ten tweede geeft het context aan je pagina. Zoekmachines proberen te begrijpen waar je tekst over gaat. Beschrijvingen bij je beelden helpen daarbij mee.
Ten derde is het een signaal van kwaliteit. Een site met nette alt-teksten heeft meestal ook nette koppen en snelle code. Die dingen hangen in de praktijk samen.
Zie het dus als een klein onderdeel van een groter geheel. Combineer het met een goede metadescription en een logische structuur. Dan werkt het pas echt.
Kijk ook eens in je statistieken. Daarin zie je hoeveel bezoek uit afbeeldingszoekopdrachten komt. Bij webshops is dat aandeel vaak groter dan verwacht.
Hoe vul ik alt-tekst in bij WordPress en WooCommerce?
In de mediabibliotheek staat een veld met de naam alternatieve tekst. Klik een afbeelding aan en vul dat veld in. Vul het bij voorkeur direct bij het uploaden in. Achteraf een hele bibliotheek doorlopen is veel meer werk.
Let op een veelgemaakte vergissing. De titel van het bestand is iets anders dan de alt-tekst. WordPress vult die titel automatisch met de bestandsnaam. Die wordt niet als alt-tekst gebruikt.
Bij productfoto’s in een webwinkel let ik extra op. Sommige galerijen en sliders sturen het alt-veld helemaal niet mee. Controleer dat in de broncode van je productpagina. Zie je een lege alt staan, dan zit het probleem in de bouwsteen.
Importeer je producten via een bestand? Neem de alt-tekst dan mee als kolom. Anders sta je met duizend lege velden. Dat is een klus die je maar één keer wilt doen.
Plan er een vast moment voor in. Bijvoorbeeld tien afbeeldingen per week, tot je bij bent. Zo blijft het behapbaar naast je gewone werk.
Wil je weten hoeveel afbeeldingen op jouw site nog geen beschrijving hebben? Vraag het aan via het formulier hieronder. Ik tel ze voor je en stuur je een overzicht per pagina. Dan zie je meteen waar de grootste winst zit. Vermeld je plaats, dan houd ik daar rekening mee in mijn advies.
Waar kan ik je mee helpen?
Ook bekend als: Alternatieve tekst, alt-attribuut, alt tag
