Alt-tekst en bestandsnamen: een praktische gids voor afbeeldings-SEO

Alt-tekst, bestandsnamen en bijschriften hebben verschillende taken

Bij het voorbereiden van een afbeelding zie je misschien meerdere velden die om hetzelfde lijken te vragen. Elk heeft een eigen doel: de naam identificeert het bestand, alt-tekst beschrijft het beeld voor wie het niet ziet en een bijschrift staat zichtbaar naast de afbeelding.

Alt-tekst wordt op de webpagina opgeslagen, meestal in het attribuut alt. Hij zit niet in het JPG- of PNG-bestand. Een schermlezer, die inhoud voorleest of in braille weergeeft, kan de beschrijving gebruiken. Zie MDN’s uitleg over het alt-attribuut.

Dezelfde foto kan op verschillende plekken andere alt-tekst nodig hebben. Op een productpagina zijn het oor en de afwerking misschien belangrijk. In een artikel over reflecterende oppervlakken fotograferen kan het licht in het glazuur centraal staan. Beschrijf wat voor de lezer van die pagina telt.

Bepaal wat de lezer uit de afbeelding moet halen

Vraag je eerst af wat zonder de afbeelding zou ontbreken. Toont hij een productdetail, een stap, belangrijke woorden of het enige label van een link? Of maakt hij de pagina alleen mooier? De W3C-beslisboom voor alt-tekst helpt een aanpak te kiezen op basis van de functie van de afbeelding.

• Een afbeelding die informatie toevoegt: beschrijf het detail dat de lezer nodig heeft.
• Een link of knop zonder ander label: leg de bestemming of actie uit.
• Decoratie: laat alt-tekst leeg als de afbeelding geen noodzakelijke informatie toevoegt en geen link of bedieningselement is.
• Een grafiek of gedetailleerd diagram: leg kort uit wat het toont en geef de details in tekst of een tabel ernaast.

Denk aan een foto van een mok op een bureau. Op de verkooppagina zijn vorm en uiterlijk nuttig. Achter een nieuwsbriefaanmelding kan dezelfde foto decoratie zijn. Het gaat om de reden waarom hij daar staat.

Schrijf een nuttige beschrijving in gewone taal

Begin met het onderwerp en voeg het benodigde detail toe. Een zijaanzicht van een rugzak kan een fles in een gaasvak tonen. Op een productpagina is dat nuttiger dan een opsomming van alle kleuren.

Blijf bij de kern. Achtergrond, camerahoek en licht hoef je alleen te noemen als ze het beeld helpen verklaren. De W3C-richtlijnen voor informatieve afbeeldingen leggen uit hoe je nuttige informatie beschrijft zonder elk detail op te sommen.

Dit zijn voorbeeldbeschrijvingen, niet de beschrijvingen van afbeeldingen in dit artikel. Controleer bij je eigen foto of ieder detail zichtbaar is. Verzin geen materiaal, modelnaam, plaats of eigenschap om vollediger te klinken. Een foto van een bruine stoel bewijst niet dat hij van leer is.

Lees de beschrijving met de zinnen voor en na de afbeelding. Voegt hij iets toe of herhaalt hij onnodig dezelfde zin? Pas hem aan de hele pagina aan. Verklaart het bijschrift al alles wat de afbeelding toevoegt, overweeg dan of een aparte beschrijving nodig is. Gebruik alt-tekst voor nuttige details die het bijschrift niet noemt.

Gebruik lege alt-tekst voor decoratieve afbeeldingen

Een versiering naast een kop of een achtergrondillustratie kan alleen voor het uiterlijk dienen. Voeg dan een leeg alt-attribuut toe: alt="". Een schermlezer kan de afbeelding overslaan. Laat het attribuut niet helemaal weg: sommige schermlezers lezen dan de bestandsnaam. Zie de W3C-richtlijnen voor decoratieve afbeeldingen.

<img src="/images/gele-versiering.svg" alt="">

Schrijf niet “decoratieve afbeelding” als beschrijving. Dat voegt een aankondiging toe zonder nuttige uitleg. Leeg betekent dat er geen beschrijving wordt aangekondigd.

Let op afbeeldingen die decoratief lijken maar als enige belangrijke informatie bevatten. Een banner met korting en einddatum is geen pure decoratie als die gegevens niet in de tekst staan. Schrijf het aanbod op de pagina of neem de boodschap op in de alt-tekst. Ook een foutpictogram heeft schriftelijke uitleg nodig als het de enige melding van een probleem is.

Beschrijf het doel van links en knoppen die alleen uit een afbeelding bestaan

Is een afbeelding de enige inhoud van een link, dan moet de alt-tekst de bestemming uitleggen. Bij een afbeeldingsknop beschrijf je de actie. “Zoeken” vertelt wat een zoekknop doet; “Vergrootglas” beschrijft alleen de vorm. De W3C-richtlijnen voor functionele afbeeldingen leggen deze gevallen uit.

Stel dat het winkellogo de enige inhoud van een link naar de homepage is. “North Shore winkelhomepage” geeft een bruikbaar label. Een gedetailleerde beschrijving van de golfvorm in het logo vertelt niet waar de link heen gaat.

Heeft dezelfde link al duidelijke zichtbare tekst, dan kan de bijbehorende afbeelding vaak lege alt-tekst krijgen om herhaling te voorkomen. Dat hangt af van de extra informatie in het beeld. Beoordeel de afbeelding en linktekst samen.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="North Shore winkelhomepage">
</a>

Denk in een productgalerij na over wat het kiezen van een miniatuur doet. “Bekijk het zijvak van de rugzak” kan nuttiger zijn dan steeds dezelfde productnaam. Een galerij kan aparte velden hebben voor knoplabels en beeldbeschrijvingen. Controleer of elk bedieningselement in de gepubliceerde galerij een duidelijk label heeft.

Behandel grafieken, schermafbeeldingen en tekst in afbeeldingen

Een grafiek kan te veel informatie bevatten voor één korte beschrijving. Benoem het onderwerp en zet de belangrijkste resultaten en waarden in nabijgelegen tekst of een tabel die zonder de grafiek leesbaar is. De W3C-richtlijnen voor complexe afbeeldingen beschrijven deze mogelijkheden.

Stel je een grafiek voor die de bestandsgrootte van drie exports van één foto vergelijkt. De alt-tekst kan de vergelijking noemen; een tabel geeft formaat en grootte. Lezers moeten het resultaat begrijpen zonder staafhoogtes te interpreteren. Gebruik echte metingen en maak duidelijk dat ze voor deze foto gelden.

Beschrijf bij een tutorialscreenshot de instelling of stap die wordt uitgelegd. Een zin over de plek van de kwaliteitsinstelling kan helpen, maar schrijf de instructie ook als gewone tekst op de pagina. Zijn meerdere labels nodig, zet die dan in de uitleg in plaats van een lange procedure in alt-tekst te verstoppen.

Bevat een afbeelding een korte belangrijke tekst die nergens anders staat, neem die woorden dan op in de alt-tekst. Lange passages horen op de pagina zelf. Onze gids voor Canva-exports legt uit waarom belangrijke koppen en knoppen meestal beter als paginainhoud werken.

Kies korte, beschrijvende bestandsnamen

Google raadt korte beschrijvende namen aan als kleine aanwijzing over het onderwerp. Ook alt-tekst en de omringende pagina helpen afbeeldingen te begrijpen. Dat is geen reden om de naam vol zoekzinnen te zetten. Zie Googles richtlijnen voor afbeeldings-SEO.

Noem eerst het onderwerp en daarna een nuttig detail of de aanblik. In een productgalerij is groene-rugzak-zijvak.webp duidelijker herkenbaar dan IMG_4821.webp. Voeg een productcode toe als die helpt vergelijkbare artikelen te onderscheiden. Voeg alleen een jaartal toe als het werkelijk bij de identificatie van de afbeelding hoort.

Gebruik voor een eenvoudig systeem kleine letters en koppeltekens tussen woorden. Dat helpt de organisatie, maar garandeert geen hogere posities. Houd de extensie correct: het veranderen van .png naar .jpg in de naam converteert de afbeelding niet. Gebruik daarvoor een converter.

Hernoem bestanden zo mogelijk vóór het uploaden. Verandert de naam van een gepubliceerd beeld zijn webadres, dan kunnen pagina’s met het oude adres de afbeelding verliezen. Werk ze bij en stuur het oude adres waar nodig door. Hernoem een werkende bibliotheek niet alleen om zoekwoorden toe te voegen.

Voeg de beschrijving toe aan de afbeelding op de pagina

Zoek in de editor naar “alternatieve tekst” of “alt-tekst”. Sla de beschrijving op en controleer de gepubliceerde pagina. Titel, bijschrift of bestandsnaam in de mediabibliotheek wijzigen verandert niet noodzakelijk de alt-tekst op de pagina. Editors en sjablonen behandelen die velden verschillend.

Met het juiste editorveld hoef je geen HTML te schrijven. Voor directe codebewerking ziet een eenvoudige informatieve afbeelding er zo uit:

<img src="/images/groene-rugzak-zijvak.webp"
     alt="Groene rugzak met een waterfles in het gaasvak aan de zijkant">

Controleer de echte pagina na het opslaan. Op een computer kun je het afbeeldingselement inspecteren en de waarde van alt bekijken. Een toegankelijkheidscontrole vindt ontbrekende attributen, maar kan niet betrouwbaar beoordelen of een beschrijving nuttig is. Lees hem zelf naast de pagina-inhoud.

Schrijf bij meertalige sites de beschrijving in de taal van de pagina. Vertaal de betekenis natuurlijk, niet een Engelse zoekwoordenlijst. Hetzelfde bestand kan op elke pagina andere alt-tekst hebben omdat elke pagina zijn eigen beschrijving opslaat.

Voorbeeld: een productfoto bruikbaar beschrijven

Je voegt een foto van het zijvak toe aan de productpagina van een groene rugzak. Je wilt laten zien hoe een waterfles erin past, niet alle productspecificaties herhalen.

1. Kies de nuttige aanblik. Gebruik een foto waarop fles en vak duidelijk zijn. Beschrijf geen verborgen detail.
2. Bereid het bestand voor. Snijd onnodige ruimte weg en kies afmetingen die het vak zichtbaar houden. De volledige werkwijze staat in onze gids voor productafbeeldingen.
3. Geef het uiteindelijke bestand een naam. Gebruik bijvoorbeeld groene-rugzak-zijvak.jpg met de extensie die bij het opgeslagen formaat hoort.
4. Voeg alt-tekst voor deze pagina toe. Beschrijf de fles in het gaasvak. Prijzen, verzendbeloften en ongerelateerde zoekzinnen horen in de paginainhoud.
5. Controleer de gepubliceerde galerij. Controleer de opgeslagen beschrijving en duidelijke labels voor alle bedieningselementen, op telefoon én computer.

Zo scheid je het voorbereiden van het bestand van het schrijven van alt-tekst. Beide zijn belangrijk, maar lossen andere problemen op. Gebruik dezelfde aanpak voor screenshots en grafieken en pas de beschrijving aan de informatie aan.

Vermijd deze veelvoorkomende fouten

• Zoekzinnen herhalen. “Rugzak beste rugzak goedkope rugzak wandelrugzak” beschrijft het vak niet en helpt niet om de foto te begrijpen.
• De bestandsnaam als beschrijving gebruiken. Hij helpt een bestand te vinden, maar legt niet altijd uit wat de lezer moet weten.
• Alle galerijbeelden dezelfde tekst geven. Beschrijf verschillende aanblikken als ze andere informatie tonen.
• Details raden. Controleer materialen, labels en eigenschappen in plaats van ze uit het uiterlijk af te leiden.
• Decoraties uitgebreid beschrijven. Extra aankondigingen kunnen de nuttige inhoud lastiger te volgen maken.
• Alleen de mediabibliotheek controleren. Het sjabloon gebruikt mogelijk niet het gewijzigde veld. Controleer het gepubliceerde beeld.

Veelgestelde vragen

Hoe lang moet alt-tekst zijn?

Zo kort mogelijk zonder nuttige informatie weg te laten. Voor een eenvoudige foto kan één korte zin genoeg zijn. Er is geen vaste tekenlimiet die een beschrijving nuttig maakt. Zet lange uitleg over grafieken in de gewone paginainhoud.

Heeft elke afbeelding beschrijvende alt-tekst nodig?

Nee. Beschrijf beelden met nuttige informatie en laat alt-tekst voor decoratie leeg. Is het beeld het enige label van een link of knop, leg dan de bestemming of actie uit.

Kan AI een beschrijving opstellen?

Een concept kan helpen, maar vergelijk het met de echte afbeelding en pagina. Verwijder aannames, overbodige details en herhaalde zoekwoorden. Een gegenereerde tekst kan overtuigend klinken en toch een onzichtbaar kenmerk beschrijven.

Verwijdert compressie de alt-tekst?

Alt-tekst staat op de webpagina, niet in het afbeeldingsbestand. Een lokaal JPG of PNG comprimeren verandert die pagina niet. Een vervanging in de editor kan velden wel wijzigen of resetten. Controleer daarna de gepubliceerde beschrijving.

Garanderen betere namen meer zoekverkeer?

Nee. Duidelijke namen en nuttige beschrijvingen ondersteunen een goede pagina, maar garanderen geen indexering, posities of klikken. Google behandelt ook omliggende tekst, vindbaarheid voor crawlers en laadtijden. Onze gids voor afbeeldingsprestaties bespreekt dat afzonderlijke onderdeel.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)