Alt-tekst is een korte omschrijving van een afbeelding die in de code van je pagina staat. Een schermlezer leest hem voor aan mensen die slecht of niet zien en Google gebruikt hem om te begrijpen wat er op de afbeelding staat. Een goede alt tekst beschrijft in één korte zin wat er te zien is en waarom de afbeelding op die pagina staat, zonder een rij zoekwoorden.
Het is een van die klusjes die bijna iedereen overslaat. Als ik een website van een installateur of een accountantskantoor doorloop, hebben veel afbeeldingen geen alt-tekst of alleen een bestandsnaam als "IMG_4032". Zonde, want het is een van de makkelijkste dingen om goed te zetten.
Wat is alt-tekst precies?
In de code van je website ziet een afbeelding er ongeveer zo uit:
<img src="warmtepomp-buitenunit.jpg" alt="Buitenunit van een warmtepomp tegen de zijgevel van een rijtjeshuis">
Het stukje achter alt= is de alternatieve tekst, kortweg alt-tekst. Bezoekers zien hem normaal niet. Hij verschijnt als de afbeelding niet laadt en hij wordt voorgelezen door een schermlezer.
Je hoeft die code nooit zelf te typen. Elk websitesysteem heeft een veld waarin je de alt-tekst invult, verderop lees je waar dat zit.
Waarom gebruiken Google en schermlezers alt-tekst?
Voor iemand die een schermlezer gebruikt, is de alt-tekst de afbeelding. Staat er niets, dan hoort hij hooguit de bestandsnaam of helemaal niets. Staat er "afbeelding", dan weet hij nog steeds niet wat er te zien is.
Google kijkt ook naar afbeeldingen, maar leest ze anders dan wij. In de richtlijnen voor Google Afbeeldingen staat dat Google alt-tekst gebruikt samen met beeldherkenning en de inhoud van de pagina om te begrijpen waar een afbeelding over gaat. Dat helpt je afbeeldingen gevonden te worden in Google Afbeeldingen en het geeft je pagina als geheel meer samenhang.
Er is ook een praktische kant. Een webshop of dienstverlener die toegankelijk wil zijn voor iedereen, kan niet zonder.
Hoe schrijf je een goede alt-tekst?
Stel je voor dat je iemand aan de telefoon hebt en in één zin moet vertellen wat er op de foto staat. Dat is ongeveer de alt-tekst die je zoekt.
Een paar vuistregels die ik aanhoud:
- Beschrijf wat er echt te zien is. Wie, wat en waar, voor zover het ertoe doet.
- Houd het kort. Eén zin is meestal genoeg.
- Laat "afbeelding van" en "foto van" weg. Een schermlezer meldt al dat het een afbeelding is.
- Gebruik een zoekwoord alleen als het past. Staat er echt een warmtepomp op de foto, dan mag het woord warmtepomp erin.
- Denk aan de functie. Is de afbeelding een knop of een link, beschrijf dan waar hij naartoe gaat.
Google waarschuwt zelf tegen het volproppen van alt-teksten met zoekwoorden. Dat geeft een slechte ervaring voor bezoekers en je site kan er als spam door worden gezien.
Wat zijn goede en slechte voorbeelden?
Een paar voorbeelden uit verschillende branches maken het verschil duidelijk:
| Afbeelding | Slecht | Beter |
|---|---|---|
| Monteur bij een cv-ketel | IMG_4032 | Monteur vervangt de brander van een cv-ketel in een bijkeuken |
| Team van een adviesbureau | team | Vijf adviseurs van het kantoor rond een vergadertafel |
| Schermafbeelding van software | software software planning tool beste | Weekplanning met werkbonnen per monteur in de planningsapp |
| Geschilderd kozijn | schilder Zwolle schilderwerk goedkoop | Pas geschilderd houten kozijn in donkergroen aan een jaren dertig woning |
| Behandelkamer fysiotherapie | foto van praktijk | Behandelkamer met behandelbank en oefenmateriaal |
In de slechte kolom zie je de drie klassiekers: een bestandsnaam, een woord dat niets zegt en een rij zoekwoorden. In de betere kolom kan iemand die de foto niet ziet zich er iets bij voorstellen.
Wanneer laat je de alt-tekst leeg?
Niet elke afbeelding heeft een omschrijving nodig. Een decoratief lijntje, een achtergrondpatroon of een icoon naast tekst die hetzelfde zegt, voegt niets toe voor iemand die niet kan zien.
Voor zulke afbeeldingen adviseert de beslisboom van W3C een lege alt-tekst. De schermlezer slaat de afbeelding dan over, wat prettiger is dan een lijst "decoratie, decoratie, decoratie" aan te horen.
Leeg betekent dan echt leeg, dus alt="". Een ontbrekend alt-attribuut is iets anders, want dan gaan sommige schermlezers de bestandsnaam voorlezen.
Waar vul je alt tekst in bij WordPress, Wix en Shopify?
Het veld heet overal net iets anders, maar het zit altijd dicht bij de afbeelding zelf.
WordPress
Ga naar Media en dan Bibliotheek en klik op een afbeelding. Rechts zie je het veld Alternatieve tekst. Wat je daar invult, wordt meegenomen als je de afbeelding later in een pagina plaatst.
Staat de afbeelding al in een pagina, klik dan in de blokeditor op het afbeeldingsblok. In de zijbalk rechts staat hetzelfde veld. Gebruik je een SEO-plugin, dan meldt die vaak ook welke afbeeldingen nog geen alt-tekst hebben.
Wix
Klik in de editor op de afbeelding en daarna op het pictogram voor de instellingen. Daar vraagt Wix wat er op de afbeelding staat en dat veld is je alt-tekst. Voor afbeeldingen in een galerij gebruik je het Mediabeheer. Vergeet niet op publiceren te klikken. Wix heeft er een eigen uitleg over.
Shopify
Ga naar Producten, open een product en klik op een productafbeelding. Daar vind je een veld voor de alt-tekst. Voor afbeeldingen in je thema, zoals een banner op de homepage, stel je het in via de thema-editor. Shopify beschrijft dat in het Helpcentrum.
Werk je met een ander systeem, zoek dan in de instellingen van de afbeelding naar "alt", "alternatieve tekst" of "beschrijving". Het zit er vrijwel altijd.
Hoe pak je een hele website aan?
Bij een site met twintig afbeeldingen doe je het in een uurtje. Bij een webshop met honderden productfoto's wordt het een ander verhaal. Dan helpt het om slim te kiezen.
Begin bij de pagina's die er het meest toe doen: je homepage, je belangrijkste dienstpagina's en je best verkopende producten. Daarna de rest, een paar per week.
Een scan van je website laat zien welke afbeeldingen nog geen alt-tekst hebben. Findori SEO neemt afbeeldingen mee in de technische controle en zet onder Klaar voor jou omschrijvingen voor afbeeldingen klaar, met de huidige tekst ernaast. Findori herkent op welk systeem je site draait en geeft per platform een uitleg waar je klikt, met een kopieerknop voor de tekst. Welke systemen dat zijn, staat bij de integraties.
Alt-tekst is één onderdeel van een pagina die Google goed kan lezen. De titel en de beschrijving in de zoekresultaten horen daar ook bij, zie een goede meta description schrijven. En blijft je site ondanks alles slecht vindbaar, kijk dan eens naar waarom je website niet vindbaar is in Google.
Mijn tip voor vandaag: open je homepage, klik met de rechtermuisknop op de grootste foto, kies Inspecteren en kijk wat er achter alt= staat. Grote kans dat het tijd is voor een betere zin.