SEO voor afbeeldingen: 12 praktische tips voor meer organisch verkeer

Veel mensen denken dat SEO voor afbeeldingen neerkomt op een zoekwoord in het alt-attribuut zetten. In werkelijkheid spelen er minstens twaalf factoren mee in hoe Google de afbeeldingen op je site vindt, begrijpt en rangschikt. Wie die laat liggen, laat verkeer liggen dat vrij eenvoudig te pakken is, ook via Google Afbeeldingen, dat een fors deel van alle zoekopdrachten wereldwijd voor zijn rekening neemt.

Google zelf boekt vooruitgang met beeldherkenning op basis van machine learning. Dat maakt SEO voor afbeeldingen niet overbodig, integendeel: Google blijft alle beschikbare signalen gebruiken, van bestandsnaam en alt-tekst tot de context van de pagina en de laadsnelheid, om afbeeldingen nauwkeurig te duiden en te rangschikken.

1. Geef je bestanden een beschrijvende naam

De bestandsnaam is een van de eerste signalen waarmee Google bepaalt waar een afbeelding over gaat. Camera's en telefoons produceren nietszeggende namen als IMG_0023.JPG of DSC_4817.jpg, die de zoekmachine helemaal niets vertellen.

In zijn officiële richtlijnen zegt Google zelf dat de bestandsnaam een aanwijzing geeft over de inhoud van de afbeelding. Het advies is simpel: gebruik beschrijvende zoekwoorden, gescheiden door streepjes, en overdrijf niet:

• Goed: chocoladetaart.jpg
• Slecht: IMG_2947.jpg
• Ook slecht: chocoladetaart-recept-nagerecht-zoet-bakken.jpg (keyword stuffing)

Afbeeldingen hernoemen voordat je ze uploadt is een kleine gewoonte met effect, vooral voor webshops, kookblogs, portfolio's en elke site die op zoekverkeer naar afbeeldingen leunt.

2. Schrijf bruikbare alternatieve teksten (alt-tekst)

Het alt-attribuut beschrijft een afbeelding voor de browser. Het verschijnt als de afbeelding niet laadt, wordt voorgelezen door schermlezers voor mensen met een visuele beperking en helpt Google de visuele inhoud van de pagina te begrijpen.

De syntaxis is eenvoudig:

<img src="dalmatier-puppy.jpg" alt="Dalmatiër-puppy die speelt in het park">

Google combineert de alt-tekst met computer vision en de context van de pagina om te bepalen waar de afbeelding over gaat. Het advies: schrijf nuttige, informatieve beschrijvingen waarin zoekwoorden vanzelf op hun plek vallen, en stapel nooit losse woorden op (keyword stuffing).

Een trucje dat goed werkt: maak de zin "Dit is een foto van ___" af. Wat je op de puntjes invult, is na een kleine bijschaving vaak een prima alt-tekst. Voorbeelden:

• "Dit is een foto van een chocoladecheesecake met aardbeiensaus." → alt="Chocoladecheesecake met aardbeiensaus"
• "Dit is een foto van een laptop met een gebarsten scherm op een tafel." → alt="Laptop met gebarsten scherm op een bureau"

Bij productfoto's helpt het om het modelnummer of de SKU in de alt-tekst te zetten; zo kom je ook naar boven bij specifieke, technische zoekopdrachten. Vergeet de bijschriften niet: Google haalt informatie over het onderwerp uit de tekst rondom de afbeelding, inclusief het zichtbare bijschrift.

3. Kies het juiste bestandsformaat

Het formaat bepaalt rechtstreeks de bestandsgrootte, en daarmee hoe snel je pagina laadt. De drie meest gebruikte formaten op het web zijn JPG, PNG en WebP, elk met eigen eigenschappen:

De vuistregel: JPG voor foto's, PNG voor afbeeldingen die een transparante achtergrond of scherpe tekst nodig hebben, en WebP waar het maar kan, omdat dat formaat bij gelijke kwaliteit beter comprimeert. Gebruik Converteren van ImageTools om vóór het uploaden tussen formaten te wisselen.

4. Schaal afbeeldingen naar de maat waarop ze getoond worden

Een foto van 4000 pixels breed uploaden naar een site die hem op 800 pixels toont, is verspilde bandbreedte. De browser haalt de hele afbeelding binnen en gooit de overtollige pixels daarna weg: de bezoeker wacht langer en ziet er niets voor terug.

Zoek uit wat de maximale weergavebreedte in je layout is, meestal tussen 800 en 1440 pixels afhankelijk van het soort afbeelding en de site, en pas het formaat aan vóór het uploaden. Voor Retina-schermen (HiDPI) neem je het dubbele van die breedte. Met Verkleinen van ImageTools stel je de afmetingen precies in.

5. Comprimeer zonder zichtbaar kwaliteitsverlies

Comprimeren betekent het bestand kleiner maken zonder de afmetingen van de afbeelding te veranderen. Bij JPG-foto's kan de kwaliteit terugzetten van 100 naar 80 procent het bestand vijf tot tien keer kleiner maken, met een verschil dat je op het scherm niet ziet.

Laadsnelheid is een door Google bevestigde rankingfactor, zowel op desktop als op mobiel. Afbeeldingen vormen vaak het zwaarste onderdeel van een webpagina. Alles comprimeren vóór het uploaden is daarmee de technische SEO-ingreep met de hoogste opbrengst per bestede minuut.

Praktische streefgewichten per soort afbeelding:

• Banner of hero over de volle breedte: onder 200 KB
• Productfoto of afbeelding in een blogartikel: 60–150 KB
• Thumbnail: 15–40 KB
• Logo als PNG of WebP: onder 30 KB

Met Comprimeren van ImageTools maak je JPG, PNG en WebP lichter, rechtstreeks in je browser en zonder ze naar externe servers te sturen.

6. Maak een afbeeldingssitemap

Een afbeeldingssitemap wijst Google op afbeeldingen die hij zelf misschien niet vindt, vooral als die via JavaScript worden geladen of in ingewikkelde galerijen zitten. Anders dan een gewone sitemap mag deze ook URL's van andere domeinen bevatten, zoals die van een CDN.

Draait je site op WordPress met de plug-in Yoast SEO, dan komen je afbeeldingen automatisch in de sitemap. Bij maatwerksites voeg je de afbeeldingssitemap handmatig toe volgens de officiële documentatie van Google. De belangrijkste tags zijn image:loc (de URL van de afbeelding), image:title en image:caption.

7. Gebruik gestructureerde data voor productafbeeldingen

Google ondersteunt gestructureerde data (Schema.org) voor afbeeldingen in allerlei contexten: recepten, producten, artikelen, evenementen. Correct toegepast zorgen die data ervoor dat je afbeeldingen in rich results verschijnen, met extra visuele aandacht en dus meer klikken.

Voor webshops is productmarkering met afbeelding extra waardevol: goed gemarkeerde producten kunnen verschijnen in Google Shopping en in de productkaarten van het kennispaneel.

8. Zet lazy loading aan

Bij lazy loading worden afbeeldingen pas geladen zodra ze bijna in beeld komen, in plaats van allemaal tegelijk bij het openen van de pagina. Op pagina's met veel afbeeldingen, zoals lange blogartikelen en productoverzichten, scheelt dat 60 tot 80 procent in het startgewicht van de pagina.

De eenvoudigste manier zit al in HTML zelf:

<img src="product.webp" alt="Blauwe sneaker" loading="lazy">

Let op: geef de hoofdafbeelding boven de vouw, de eerste die zichtbaar is zonder te scrollen, nooit loading="lazy" mee. Dat vertraagt de LCP (Largest Contentful Paint, een van de Core Web Vitals) en kost je rechtstreeks posities.

9. Zet width en height in elke afbeeldingstag

Weet de browser vooraf niet hoe groot een afbeelding is, dan reserveert hij niet de juiste ruimte in de layout en springt de pagina op het moment dat de afbeelding binnenkomt. Dat verschijnsel meet Google als CLS (Cumulative Layout Shift), opnieuw een Core Web Vital.

De oplossing is om width en height altijd op te geven:

<img src="product.webp" alt="Blauwe sneaker" width="800" height="800" loading="lazy">

Die waarden hoeven niet gelijk te zijn aan de weergegeven maat: ze leggen alleen de verhouding vast, zodat de browser vooraf de juiste ruimte vrijhoudt.

10. Werk met responsieve afbeeldingen via srcset

Met het attribuut srcset lever je verschillende versies van dezelfde afbeelding aan voor verschillende schermformaten. De browser kiest zelf de passende versie: een kleinere voor telefoons, een grotere voor desktops. Op sites met veel mobiel verkeer scheelt dat 40 tot 60 procent aan overgedragen data.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Blauwe sneaker"
  width="800" height="800"
  loading="lazy"
>

11. Optimaliseer je uitgelichte afbeelding voor Open Graph en social media

Deelt iemand een URL via WhatsApp, Instagram, LinkedIn of een ander platform, dan komt de afbeelding in de preview uit de Open Graph-metatags. Staan die niet ingesteld, dan pikt het platform zomaar een afbeelding van de pagina, met vaak een lelijk resultaat.

Stel op elke belangrijke pagina de tag og:image in met een afbeelding van 1200 × 630 pixels:

<meta property="og:image" content="https://jouwsite.nl/afbeeldingen/artikel-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Een goed opgebouwde previewafbeelding, met een leesbare titel, de huisstijl van je merk en een relevant beeld, verhoogt het aantal kliks op gedeelde links aanzienlijk.

12. Kijk naar de context van de hele pagina

Google beoordeelt afbeeldingen niet los. Hij kijkt naar het geheel: de tekst eromheen, de paginatitel, de semantische context, de andere visuele elementen, het bijschrift eronder en zelfs de ankerteksten van links naar die pagina. Een foto van een rode schoen op een pagina over damesmode staat in een totaal andere context dan diezelfde foto op een kookpagina.

Wat je met context kunt doen:

• Plaats afbeeldingen dicht bij de tekst die ze beschrijft of waarnaar ze verwijzen
• Zet waar het kan een zichtbaar bijschrift onder de afbeelding
• Zorg dat het onderwerp van de afbeelding aansluit bij het thema van de pagina
• Gebruik paginatitels en tussenkoppen die het onderwerp van de hoofdafbeeldingen versterken

Checklist SEO voor afbeeldingen

• ☑ Beschrijvende bestandsnaam met zoekwoorden, met streepjes en zonder keyword stuffing
• ☑ Een beschrijvend, contextueel alt-attribuut bij elke afbeelding
• ☑ Het juiste formaat per type: WebP of JPG voor foto's, PNG of SVG voor logo's en iconen
• ☑ Afmetingen afgestemd op de werkelijke weergavemaat, maximaal tweemaal voor Retina
• ☑ Compressie toegepast, met het gewicht onder het streefgetal per type
• ☑ width en height opgegeven in elke <img>-tag
• ☑ loading="lazy" bij afbeeldingen onder de vouw
• ☑ De LCP-afbeelding zonder lazy loading, en met fetchpriority="high" waar mogelijk
• ☑ Afbeeldingssitemap ingesteld, of gecontroleerd of je plug-in dat al doet
• ☑ De metatag og:image ingesteld op alle belangrijke pagina's
• ☑ Gestructureerde data voor productafbeeldingen waar dat van toepassing is
• ☑ Afbeeldingen in context geplaatst met passende tekst, bijschriften en tussenkoppen

Veelgestelde vragen