Afbeeldingen-SEO voor webshops: gevonden in Google Afbeeldingen

Productfoto's komen in Google Afbeeldingen, Google Lens en de shoppingresultaten terecht als ze als <img> in de HTML staan, een beschrijvende alt-tekst en bestandsnaam hebben, op een vaste URL blijven staan en vindbaar zijn via de pagina, je sitemap en je Product-markup. Snelheid telt mee: een moderne indeling als WebP of AVIF en correct lazy loading voorkomen dat je productfoto je LCP verpest. Hieronder per onderdeel wat Google gebruikt en hoe je het in Magento en Shopify regelt.

Waar je productfoto's verschijnen

Een productafbeelding kan op meer plekken in Google opduiken dan alleen het tabblad Afbeeldingen:

• Google Afbeeldingen, met een link naar je productpagina.
• Google Lens, waar iemand een foto maakt van een product en vergelijkbare items zoekt.
• Shoppingresultaten en gratis productvermeldingen, gevoed door je Merchant Center-feed en je structured data.
• Gewone zoekresultaten, als miniatuur naast je resultaat of in een afbeeldingenblok.

Voor een webshop is het verkeer uit afbeeldingen meestal kleiner dan uit de gewone resultaten. Maar de bezoeker heeft het product al gezien. Voor visuele productcategorieën zoals mode, interieur en onderdelen is dat relevant verkeer. Meet het apart: in Search Console kun je het zoektype op "Afbeelding" zetten.

1. Gebruik een echte img, geen CSS-achtergrond

Google indexeert afbeeldingen die als <img>- of <picture>-element in de HTML staan. Afbeeldingen die via CSS als background-image worden geladen, indexeert Google niet.

In webshops zie je CSS-achtergronden vaak in categorietegels, hero-banners en soms in productgalerijen van custom thema's.

<picture>
  <source type="image/avif" srcset="/media/hardloopschoen-model-x-blauw-800.avif 800w, /media/hardloopschoen-model-x-blauw-1200.avif 1200w">
  <source type="image/webp" srcset="/media/hardloopschoen-model-x-blauw-800.webp 800w, /media/hardloopschoen-model-x-blauw-1200.webp 1200w">
  <img src="/media/hardloopschoen-model-x-blauw-800.jpg"
       alt="Hardloopschoen Model X in blauw, zijaanzicht"
       width="800" height="800">
</picture>

Google ondersteunt srcset en <picture>. Geef altijd een src als terugval mee, en width en height om layoutverschuiving te voorkomen.

2. Alt-tekst: beschrijven, niet volproppen

De alt-tekst is het sterkste tekstsignaal dat je aan een afbeelding kunt geven. Google gebruikt hem samen met de omringende tekst en de paginatitel om te begrijpen wat er op de foto staat. Screenreaders lezen hem voor.

Een goede alt-tekst beschrijft wat je ziet:

Vuistregels:

• Elke foto in de galerij een eigen alt. Vooraanzicht, detail, sfeerfoto: beschrijf het verschil.
• Varianten benoemen. Kleur en materiaal in de alt van de bijbehorende foto.
• Decoratieve afbeeldingen een lege alt (alt=""). Iconen en scheidingslijnen hoeven niet geïndexeerd te worden.
• Geen zoekwoordenlijst. Dat is keyword stuffing en valt onder de spamregels.

Bij een catalogus van duizenden producten schrijf je dit niet met de hand. Genereer alt-teksten uit productattributen: productnaam, kleur, materiaal, aanzicht. Een template als "{naam} in {kleur}, {aanzicht}" levert unieke en correcte alt-teksten op.

3. Bestandsnamen: klein signaal, wel meenemen

Google gebruikt de bestandsnaam als lichte aanwijzing over de inhoud. Het is geen groot signaal, maar het kost niets als je het bij de upload goed doet.

• hardloopschoen-model-x-blauw-zijkant.jpg zegt iets.
• DSC_0042.jpg of 8f3a2c1e.jpg zegt niets.

Gebruik koppeltekens tussen woorden, kleine letters en geen spaties of speciale tekens.

Hernoem bestaande afbeeldingen niet massaal alleen voor SEO. Een nieuwe bestandsnaam is een nieuwe URL. Google moet die opnieuw ontdekken en de oude valt weg. Doe het bij nieuwe uploads goed, en bij een migratie als je toch alle media verplaatst.

4. Houd afbeeldings-URL's stabiel

Dat brengt ons bij een punt dat in webshops vaak misgaat. Google crawlt afbeeldingen minder vaak dan pagina's. Verandert de URL van een afbeelding, dan duurt het even voordat de nieuwe in Google Afbeeldingen staat.

Oorzaken van wisselende URL's:

• Magento image cache. Magento slaat geschaalde productfoto's op onder /media/catalog/product/cache/<hash>/. De hash hangt af van de afbeeldingsinstellingen in het thema. Pas je de afmetingen in view.xml aan of wissel je van thema, dan veranderen alle afbeeldings-URL's tegelijk.
• CDN- of image-service-wissel. Een nieuwe image-CDN met een ander URL-patroon.
• Platformmigratie. Van Magento naar Shopify of andersom krijgen alle afbeeldingen nieuwe URL's.

Je kunt dit niet altijd voorkomen. Wel kun je het plannen. Neem afbeeldingen mee in je migratieplan en verwacht een tijdelijke dip in afbeeldingsverkeer. Zet waar mogelijk een 301 van elke oude afbeeldings-URL naar de nieuwe. Dat helpt Google de nieuwe afbeelding aan de oude signalen te koppelen.

5. Image sitemap: wanneer het helpt

Google vindt afbeeldingen vooral via de pagina's waarop ze staan. Een image sitemap helpt als afbeeldingen lastig te ontdekken zijn, bijvoorbeeld omdat ze via JavaScript in een galerij worden geladen.

Je voegt afbeeldingen toe aan je bestaande XML-sitemap met de image-extensie:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://www.voorbeeldshop.nl/eettafel-eiken-200</loc>
    <image:image>
      <image:loc>https://www.voorbeeldshop.nl/media/eettafel-eiken-200-voor.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://www.voorbeeldshop.nl/media/eettafel-eiken-200-detail.jpg</image:loc>
    </image:image>
  </url>
</urlset>

Google heeft in 2022 de tags image:caption, image:title, image:geo_location en image:license uit de ondersteuning gehaald. Alleen image:loc telt nog. Extensies die die oude tags wel vullen, doen niets kapots, maar het levert ook niets op.

6. Product-markup met afbeeldingen

De image-eigenschap in je Product-schema vertelt Google welke foto's bij het product horen. Google gebruikt die afbeeldingen in productresultaten en merchant listings.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Eettafel eiken 200 cm",
  "image": [
    "https://www.voorbeeldshop.nl/media/eettafel-eiken-200-voor.jpg",
    "https://www.voorbeeldshop.nl/media/eettafel-eiken-200-detail.jpg",
    "https://www.voorbeeldshop.nl/media/eettafel-eiken-200-sfeer.jpg"
  ],
  "offers": {
    "@type": "Offer",
    "price": "899.00",
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock"
  }
}

Let op:

• Gebruik URL's die crawlbaar en indexeerbaar zijn. Geen afbeeldingen achter een login of op een domein dat robots.txt blokkeert.
• De afbeelding moet op de pagina zelf ook te zien zijn. Markup die naar een foto verwijst die bezoekers niet zien, is misleidend.
• Meerdere verhoudingen helpen. Google raadt aan afbeeldingen in hoge resolutie aan te bieden, bij voorkeur in meerdere beeldverhoudingen (1:1, 4:3 en 16:9).

Een correct Product-blok in elkaar zetten kan met onze product-schema-generator. De bredere aanpak voor markup staat op onze pagina over structured data voor webshops.

7. WebP, AVIF en bestandsgrootte

Google Search ondersteunt onder meer JPEG, PNG, WebP, GIF, SVG en AVIF. Je hoeft voor vindbaarheid dus niet bij JPEG te blijven.

Voor snelheid is de keuze wel belangrijk. WebP en AVIF zijn bij dezelfde beeldkwaliteit doorgaans flink kleiner dan JPEG. Op een productpagina is de hoofdfoto vaak het LCP-element. Elke kilobyte telt dan direct mee voor je Core Web Vitals.

• Shopify levert afbeeldingen via zijn eigen CDN en serveert automatisch een moderner formaat zoals WebP aan browsers die dat ondersteunen, mits het thema de image_url-filter met een breedte gebruikt.
• Magento levert standaard het geüploade formaat. WebP of AVIF krijg je via een extensie, een image-CDN of conversie in je build- en hostingstraat. Op een goed ingerichte Magento-hosting regel je dat op serverniveau.

Uitgebreid over formaten en compressie: image-optimalisatie voor webshops.

8. Lazy loading: niet op de hoofdfoto

Twee fouten komen veel voor:

• De hoofdproductfoto lazy laden. Die staat boven de vouw en is vaak het LCP-element. Lazy loading vertraagt hem. Gebruik voor die ene afbeelding fetchpriority="high" en geen loading="lazy".
• Lazy loading met een eigen script dat de echte URL in een data-src zet en pas bij scrollen invult. Google scrollt niet zoals een bezoeker. Gebruik de native attribuut, of zorg dat het script ook zonder scroll de src vult.

De grenzen voor LCP en hoe je dat meet staan op onze pagina over Core Web Vitals.

9. Context op de pagina

Google koppelt een afbeelding aan de tekst eromheen. Een productfoto op een pagina met een goede H1, een productbeschrijving en specificaties wordt beter begrepen dan dezelfde foto op een pagina met alleen een prijs en een knop.

Concreet:

• Plaats de hoofdfoto dicht bij de producttitel.
• Zorg dat de productbeschrijving de kenmerken noemt die op de foto te zien zijn.
• Gebruik op categoriepagina's productkaarten met een <img> met alt én een tekstlink naar het product.

De rest van de productpagina loop je na met onze productpagina-SEO-checklist.

Checklist

1. Productfoto's als <img> of <picture>, niet als CSS-achtergrond.
2. Unieke, beschrijvende alt-tekst per foto, gegenereerd uit attributen waar nodig.
3. Beschrijvende bestandsnamen bij nieuwe uploads.
4. Stabiele afbeeldings-URL's; wijzigingen gepland, niet per ongeluk.
5. Afbeeldingen in de sitemap als ze moeilijk vindbaar zijn.
6. image gevuld in je Product-markup, met URL's die op de pagina zichtbaar zijn.
7. WebP of AVIF met een JPEG-terugval.
8. Geen lazy loading op de hoofdfoto.
9. Afbeeldingsverkeer apart gemeten in Search Console.

Veelgestelde vragen

Is alt-tekst een rankingfactor?

Alt-tekst is het belangrijkste tekstsignaal voor Google Afbeeldingen en helpt Google te begrijpen waar een foto over gaat. Voor de ranking van de pagina in de gewone resultaten is het een klein onderdeel. Schrijf hem in de eerste plaats voor mensen die de afbeelding niet zien.

Moet ik al mijn afbeeldingen hernoemen voor SEO?

Nee. De bestandsnaam is een licht signaal, en hernoemen geeft elke afbeelding een nieuwe URL die Google opnieuw moet vinden. Doe het goed bij nieuwe uploads en bij een migratie waarin de URL's toch al veranderen.

Indexeert Google WebP- en AVIF-afbeeldingen?

Ja. Google Search ondersteunt beide formaten. Gebruik een <picture>-element met een JPEG- of PNG-terugval voor oudere browsers.

Heb ik een aparte image sitemap nodig?

Meestal niet. Google vindt afbeeldingen via de pagina's waarop ze staan. Een image-extensie in je sitemap helpt als afbeeldingen via JavaScript worden geladen of anders moeilijk te ontdekken zijn. Alleen image:loc wordt nog ondersteund.

Hoe zie ik hoeveel verkeer uit Google Afbeeldingen komt?

In Search Console, rapport Prestaties, zet je het zoektype op "Afbeelding". Je ziet dan vertoningen, klikken en de pagina's die verkeer krijgen via afbeeldingsresultaten.