Alt tekst

Wat is een alt tekst

De alt tekst (alternatieve tekst) is de tekst die wordt weergegeven wanneer een afbeelding niet kan worden geladen op een webpagina. De alt tekst wordt weergegeven met behulp van het alt attribuut.

Alt tekst in de HTML-code

In de HTML-code van je website ziet de alt tekst er als volgt uit:

<img src=“puppy.png” alt="golden retriever puppy">

In plaats van het begrip ‘alt attribuut’ gebruikt men regelmatig het begrip ‘alt tag’. Dit is technisch gezien onjuist.

Een tag is namelijk een opdracht die je de webbrowser laat uitvoeren, terwijl een attribuut een specificatie van een tag is. Het alt attribuut is een specificatie van de <img> tag.

In dit artikel lees je alles over de alt tekst.

Waarom wordt de alt tekst gebruikt

De alt tekst wordt om verschillende redenen gebruikt

Een error in het src attribuut of een trage internetverbinding

Dit betekent simpelweg dat de afbeelding om wat voor reden dan ook niet geladen kan worden. Het kan bijvoorbeeld dat de afbeelding niet meer bestaat, dat de verbinding te traag is om de afbeelding te downloaden, of dat een applicatie de afbeelding blokkeert.

Dat laatste gebeurt bijvoorbeeld bij Outlook. Outlook download standaard geen afbeeldingen zonder dat je hier toestemming voor geeft.

Mail waarbij afbeeldingen niet worden gedownload en dus de alt tekst wordt vertoont.
De afbeeldingen zijn niet gedownload en tonen daarom de alt tekst.

Zodra je de afbeeldingen download verdwijnt de alt tekst.

Nadat de afbeeldingen gedownload zijn maken de alt teksten plaats voor de afbeeldingen.
De alt tekst heeft plaatsgemaakt voor de afbeelding.

Een bezoeker gebruikt een schermlezer

Mensen met een visuele beperking maken gebruik van een zogenaamde schermlezer. Dit is een softwareprogramma dat tekst van een beeldscherm voorleest. Om een afbeelding te omschrijven leest de schermlezer de alt tekst voor.

Zoekmachines gebruiken de alt tekst om de afbeelding beter te begrijpen

Ondanks dat zoekmachines de laatste jaren steeds beter begrijpen waar een afbeelding over gaat, zien de website crawlers afbeeldingen nog niet op dezelfde manier als dat wij dat doen.

Hieronder zie je een voorbeeld van een afbeelding van Mario, Luigi en Yoshi speelgoedpoppetjes.

Een afbeelding van Mario en Luigi omschrijft Google als 'histrionic peronality disorder characters'.
Google kan nog niet goed achterhalen wie er op deze foto staan.

Google kan nog steeds niet helemaal inschatten wat er op de foto te zien is.

Om deze reden kijken ze (onder andere) naar de alt tekst van de afbeeldingen. John Mueller beaamt dit ook in een van zijn tweets.

Alt tekst en SEO

De alt tekst kan op twee manieren voordelig zijn voor jouw positie in de zoekmachines.

  • Als Google je webpagina beter begrijpt kan het deze ook beter beoordelen. Gebruik je de alt tekst goed, dan kan dat leiden tot een hogere positie in Google.
  • SEO geoptimaliseerde afbeeldingen hebben een goede kans om in de SERP van Google Afbeeldingen te komen. Dit is een relatief makkelijke manier om te scoren en dus extra bezoekers te krijgen.

Tip! Wil je weten hoeveel bezoekers er maandelijks op je website komen via Google Afbeeldingen? Ga dan in in Google Search Console naar ‘Prestaties’ en verander het zoektype in ‘Afbeelding’.

Hoe schrijf je een goede alt tekst?

Hoe schrijf je dan een goede alt tekst? En wat moet je juist niet doen?

  • Geef een duidelijke omschrijving van de afbeelding. Vergeet niet dat een alt tekst in de eerste plaats is gemaakt om de gebruikservaring van de websitebezoeker te optimaliseren.
  • Gebruik je focus keywords. De alt tekst is een extra mogelijkheid om aan de zoekmachine te laten zien waar je pagina over gaat. Verwerk dus in minimaal twee afbeeldingen je focus zoekwoorden.
  • Houd het (relatief) kort en bondig. Probeer niet meer dan 125 tekens te gebruiken. Voor complexe omschrijvingen kun je eventueel gebruik maken van het longdesc attribuut.
  • Vermijd keyword stuffing. Dus niet: <img src="pannenkoek.jpg" alt="pannenkoek pannenkoeken pancackes pan cakes crêpe" />.
  • Zeg niet dat het een afbeelding is. Voeg niet “Afbeelding van…” of “Foto van …” toe aan de beschrijvingen. Google weet dat het om een afbeelding gaat.
  • Gebruik de alt tekst alleen als dat toegevoegde waarde heeft. Als de afbeelding puur decoratief is, hoef je geen alt tekst toe te voegen. Het voegt dan namelijk geen waarde toe voor de bezoeker.

Voorbeelden van een alt tekst

Laten we eens kijken naar een aantal verschillende voorbeelden hoe je een afbeelding kunt beschrijven.

Luigi Yoshi en Mario alt tekst voorbeeld
  • Slecht: <img src=“luigi-yoshi-mario.jpg” alt=""> (missende alt tekst)
  • Slecht: <img src=“luigi-yoshi-mario.jpg” alt="luigi yoshi mario wario super mario mario kart"> (keyword stuffing)
  • Beter: <img src=“luigi-yoshi-mario.jpg” alt="Luigi, Yoshi en Mario">
  • Beste: <img src=“luigi-yoshi-mario.jpg” alt="Super Mario speelgoedpoppetjes Luigi, Yoshi en Mario geposeerd op asfalt">
golden retriever alt tekst voorbeeld
  • Oké: <img src=“golden-retriever.jpg” alt="Golden retriever">
  • Beter: <img src=“golden-retriever.jpg” alt="Golden retriever liggend">
  • Beste: <img src=“golden-retriever.jpg” alt="Bruinharige Golden retriever liggend in het gras met tennisbal tussen ze poten">

De alt tekst hoeft niet altijd letterlijk de inhoud van een afbeelding te omschrijven.

Houd bij het schrijven van een alt tekst altijd in je achterhoofd dat het nuttig moet zijn voor iemand die de afbeelding niet goed kan zien. Het is namelijk de alternatieve tekst van de afbeelding.

Denk dus altijd goed na over het doel en de context van de afbeelding.

waarschuwingsbord voorbeeld alt tekst

De bovenstaande afbeelding kun je bijvoorbeeld omschrijven als “Een driehoek met een gele achtergrond, zwarte rand en zwart uitroepteken”, maar waarschijnlijk gebruik je de afbeelding om iemand daadwerkelijk te waarschuwen. De alt tekst “Waarschuwing!” zal in dit geval veel treffender zijn.

Alt tekst toevoegen aan afbeeldingen

Je kunt op verschillende manieren alt teksten toevoegen aan je afbeeldingen. Dit hangt ook af van het CMS waar je gebruik van maakt.

Toevoegen via WordPress

Werk je met WordPress? Dan kun je de alt tekst op twee verschillende manieren toevoegen. Namelijk via de mediabibliotheek en de Gutenberg Editor.

Optie 1. Via de mediabibliotheek

Zodra je een afbeelding aan je webpagina wilt toevoegen vanaf de mediabibliotheek kun je aan de rechterkant de alt tekst invoeren.

Alt tekst toevoegen via de WordPress Mediabibliotheek
Aan de rechterkant kun je de alt tekst invoeren

Voer je de alt tekst in via de mediabibliotheek? Dan wordt deze op iedere pagina waar je de afbeelding toevoegt direct ingevoerd.

Dit kan handig zijn, maar het kan natuurlijk dat de context van de afbeelding per pagina anders is. In dat geval kun je de alt tekst ook in via de Gutenberg Editor aanpassen.

Optie 2. Vanuit de Gutenberg Editor

Selecteer een afbeelding en ga aan de rechterkant naar Blokinstellingen.

alt tekst invoeren in de Gutenberg Editor
Voer onder Afbeelding-instellingen de alternatieve tekst in.

Toevoegen via een ander CMS

Hier vind je de instructies om de alt tekst toe te voegen via Shopify of Squarspace.

Alt tekst FAQ

Wat is een alt tekst?

Een alt tekst is de alternatieve tekst die wordt weergegeven als een afbeelding niet kan worden geladen. Ook schermlezers maken gebruik van de alt tekst om de afbeelding (en het doel en de context ervan) te omschrijven.

Wat is het verschil tussen de alt tekst, het alt attribuut en een alt tag?

De alt tekst is de tekst die wordt gespecificeerd door het alt attribuut.

Vaak wordt in plaats van ‘alt attribuut’ de term ‘alt tag’ gebruikt. Dit is technisch gezien onjuist. In de HTML is er namelijk een duidelijk verschil tussen tags (elementen) en attributen.

Een tag is een opdracht die je de webbrowser laat uitvoeren, terwijl een attribuut een specificatie van een tag is.

Een alt tekst vertelt iets over de afbeelding. Het is dus een attribuut.

Wat is het verschil tussen een alt tekst en een title attribuut?

Een title attribuut geeft extra informatie over de afbeelding. Je kunt hier bijvoorbeeld de copyright aangeven. Daarnaast wordt het title attribuut gebruikt voor het vullen van de tooltip.

Het title attribuut voor afbeeldingen is geen rankingsfactor volgens Google. Het alt attribuut is dat wel.