WordPress alt tekst: goede en slechte voorbeelden
Alt tekst in WordPress is een korte beschrijving van een afbeelding die een schermlezer voorleest en die Google helpt de afbeelding te begrijpen. Je vult hem in de Mediabibliotheek of in het blok Afbeelding in. Een goede alt beschrijft in een paar tot een tiental woorden wat je ziet. Een alt die je in de bibliotheek wijzigt, verbetert geen afbeeldingen die al in berichten staan.
Auteur: Het TellMyShop-team. Een gids voor eigenaren van WordPress-websites en WooCommerce-winkels: de oorzaak, de oplossing met de hand en hetzelfde werk in een gesprek met de chat.
Laatst bijgewerkt: · 6 min lezen
Wie de alt leest en waarom
De alt heeft twee lezers. De eerste is iemand die de afbeelding niet kan zien: iemand die blind of slechtziend is, of een trage verbinding heeft waardoor de afbeelding niet laadde. De schermlezer leest dan de alt voor in plaats van de afbeelding. Zonder alt horen ze vaak de bestandsnaam, zoals “IMG_4471”, of niets.
De tweede lezer is Google. Volgens de richtlijnen van Google voor afbeeldingen is de alt een van de belangrijke bronnen van informatie over wat een afbeelding toont, en helpt hij Google Afbeeldingen om haar bij de juiste zoekopdrachten te tonen. Google merkt ook op dat een alt vol zoekwoorden schaadt.
Die twee behoeften botsen niet. Een alt die voor een mens is geschreven, is meestal ook goed voor Google.
Goede en slechte alts, met voorbeelden
De voorbeelden komen uit een webshop met tuinverlichting. Elke slechte alt heeft een typische fout die je op WordPress-sites tegenkomt.
| Afbeelding | Slechte alt | Waarom slecht | Goede alt |
|---|---|---|---|
| Lantaarn op een terras ’s avonds | IMG_4471 | de bestandsnaam zegt niets | Smeedijzeren lantaarn die ’s avonds brandt op een houten terras |
| Dezelfde afbeelding | tuinlantaarns lantaarns goedkoop winkel lantaarns | volgepropt met zoekwoorden | zoals hierboven |
| Eigenaar aan een tafel met stalen | afbeelding toont een vrouw | “afbeelding toont” is overbodig, geen inhoud | De eigenaar van de winkel legt stalen van lampenkappen op een werkbank |
| Product op een witte achtergrond | product | te algemeen | Grafietkleurige led-wandlamp voor de tuin, zijaanzicht |
| Sierlijn tussen onderdelen | lijn | decoratieve afbeelding | lege alt |
| Grafiek in een handleiding | grafiek | verbergt de informatie | Grafiek: jaarlijks stroomverbruik van led- en halogeenlampen, led verbruikt minder |
Vaker dan slechte alts vind je helemaal geen alts. Heeft de site honderden afbeeldingen zonder beschrijving, begin dan met die op pagina’s met bezoekers: producten, de pagina met diensten, de populairste berichten.
Wanneer de alt leeg blijft
Het advies “elke afbeelding moet een alt hebben” is een vereenvoudiging. Afbeeldingen die alleen versieren, zoals ornamenten, achtergronden of een pictogram naast tekst die hetzelfde zegt, horen een lege alt te hebben. De schermlezer slaat ze dan over en vermoeit de luisteraar niet met de beschrijving van een sierlijn. Dat raadt de handleiding van W3C over afbeeldingen aan.
Een lege alt is iets anders dan een ontbrekende alt. Een lege zegt “dit is alleen versiering”. Bij een ontbrekende moet de lezer gokken, vaak doordat de bestandsnaam wordt voorgelezen.
Waar je alt tekst in WordPress invult
Je hebt drie plekken. Elk werkt een beetje anders.
- Mediabibliotheek. Media → Bibliotheek, klik op de afbeelding en typ de beschrijving in het veld Alternatieve tekst. WordPress slaat de wijziging zelf op. Deze alt wordt voorgesteld telkens als je de afbeelding invoegt en wordt meestal gebruikt voor de uitgelichte afbeelding (meer daarover in de handleiding over de uitgelichte afbeelding in WordPress).
- Het blok Afbeelding in de editor. Selecteer de afbeelding in het bericht en vul de Alternatieve tekst in het paneel met blokinstellingen in. Deze wijziging geldt alleen voor dat ene bericht. Een beschrijving van het blok vind je in de documentatie over het blok Afbeelding.
- Productafbeeldingen in WooCommerce. De hoofdafbeelding en de productgalerij komen uit de Mediabibliotheek, dus daar vul je de alt in. In een gewoon thema haalt de productpagina hem rechtstreeks uit de bibliotheek.
Het veld Titel in de bibliotheek is iets anders dan de alt. De titel helpt vooral jou om bestanden te vinden en vervangt de beschrijving voor een schermlezer niet.
De valkuil: oudere berichten zien de nieuwe alt niet
Hier verliezen veel mensen tijd. Je vult de alts in de Mediabibliotheek in, controleert een ouder bericht, en de broncode van de pagina heeft nog steeds een lege alt.
De reden is technisch, maar eenvoudig. Voeg je in de blokeditor een afbeelding in een bericht in, dan kopieert WordPress de alt naar de inhoud van het bericht. Vanaf dat moment heeft het bericht een eigen kopie. Een latere wijziging in de bibliotheek verbetert uitgelichte afbeeldingen en nieuwe invoegingen, maar wijzigt de kopie in oudere berichten niet.
Bij een paar berichten open je ze een voor een, selecteer je de afbeelding en verbeter je de alt in het blok. Bij veel berichten begin je met die met de meeste bezoekers.
Zo vult de chat alts in batches in
De taak “Alt-teksten van afbeeldingen” in de TellMyShop-plugin voor WordPress en WooCommerce begint bij de Mediabibliotheek. Je chat (Claude of ChatGPT) zoekt daar afbeeldingen zonder alt en stelt voor elk een beschrijving voor op basis van de bestandsnaam, de titel en de pagina waaraan de afbeelding gekoppeld is. Bij productafbeeldingen houdt hij rekening met de productgegevens. Kan hij niet zien wat er op de afbeelding staat, dan gokt hij niet en zet hij het bestand op een lijst voor jou.
Jij: Vul de ontbrekende alts van afbeeldingen in.
Je chat: De Mediabibliotheek heeft 37 afbeeldingen zonder alt. De eerste drie, zodat je de stijl kunt goedkeuren:
Twee bestanden kan ik niet beschrijven op basis van hun naam en context, die laat ik voor jou. Werkt deze stijl?
Jij: Ja, doe de rest.
Je chat: Voorbeeld van de batch: 35 alts. Ik sla het op na jouw ‘ja’, en je kunt de hele batch ongedaan maken vanuit de wijzigingsgeschiedenis.
Status van de kaart: wacht op jouw “ja”smeedijzeren-lantaarn-02.jpg
oude versie: alt: geen
nieuwe versie: alt: Smeedijzeren lantaarn met open deurtje, vooraanzicht
glazen-lantaarn-terras.jpg
oude versie: alt: geen
nieuwe versie: alt: Glazen lantaarn met een kaars op een terrastafel
DSC_0193.jpg, gekoppeld aan het product Kleine hanglantaarn
oude versie: alt: geen
nieuwe versie: alt: Kleine zwarte hanglantaarn aan een ketting
In het gratis TellMyShop Free toont de chat de lijst met afbeeldingen zonder alt en voorgestelde beschrijvingen. Opslaan vraagt om TellMyShop Pro. Dan wijzigt de chat de alts in de Mediabibliotheek, tot 50 bestanden in één batch, nadat je het voorbeeld hebt goedgekeurd. De kopieën van alts in oudere berichten zijn een aparte wijziging in de inhoud van het bericht: de chat kan ze in gekozen berichten verbeteren, ook met een voorbeeld “voor → na” en de mogelijkheid om ongedaan te maken.
De details en de aanmeldlijst vind je op de pagina TellMyShop voor WordPress en WooCommerce, en de prijzen bij prijzen. Alts zijn één punt van een bredere controle van de site, die we beschrijven in de handleiding over een SEO-audit van WordPress.
Een kort spiekbriefje
Beschrijf wat je ziet, zoals je de foto door de telefoon aan iemand zou beschrijven. Laat “afbeelding toont” weg. Gebruik een zoekwoord alleen als het bij de foto past. Geef decoratieve afbeeldingen een lege alt. Controleer na wijzigingen in de bibliotheek ook oudere berichten. Meer handleidingen vind je op de blog.
Vragen en antwoorden
Waar vul ik alt tekst in WordPress in?
Op twee plekken. In de Mediabibliotheek, na een klik op de afbeelding, in het veld Alternatieve tekst, en dan wordt de alt voorgesteld telkens als je de afbeelding invoegt. Of in het blok Afbeelding in de editor, in het paneel met blokinstellingen, en dan wijzig je de alt alleen in dat ene bericht.
Ik heb de alt in de Mediabibliotheek gewijzigd, maar het bericht heeft nog de oude. Waarom?
Omdat de blokeditor de alt in de inhoud van het bericht opslaat op het moment dat je de afbeelding invoegt. Een wijziging in de bibliotheek werkt voor uitgelichte afbeeldingen en nieuwe invoegingen, maar verbetert geen afbeeldingen die eerder zijn ingevoegd. In oudere berichten wijzig je de alt in het blok Afbeelding of in de inhoud van het bericht.
Heeft elke afbeelding alt tekst nodig?
Elke afbeelding die iets overbrengt wel. Puur decoratieve afbeeldingen, zoals sierlijnen of achtergronden, horen een lege alt te hebben, zodat de schermlezer ze overslaat. Een lege alt hoort een bewuste keuze te zijn voor een bepaalde afbeelding.
Zet ik een zoekwoord in de alt?
Alleen als het vanzelf beschrijft wat er op de foto staat. Google waarschuwt tegen het volproppen van alts met zoekwoorden. De alt “smeedijzeren tuinlantaarn op een terras” is beter dan “tuinlantaarns goedkope lantaarns winkel”.
Herkent de chat zelf wat er op de afbeelding staat?
De chat schrijft de alt op basis van de bestandsnaam, de titel en de pagina waaraan de afbeelding gekoppeld is. Zeggen die gegevens hem niet wat er op de afbeelding staat, dan gokt hij niet. Die bestanden komen op een lijst die jij beschrijft.
WordPress is een handelsmerk van de WordPress Foundation. WooCommerce is een handelsmerk van Automattic Inc. Claude is een handelsmerk van Anthropic PBC. ChatGPT en OpenAI zijn handelsmerken van OpenAI. TellMyShop is niet gelieerd aan deze bedrijven.