SEO voor afbeeldingen

Over de optimalisatie van afbeeldingen wordt vaak te makkelijk gedacht. ‘Dat doen we later nog wel’, hoor je vaak. Zonde! Inmiddels komt 22,6 procent van het verkeer uit Google via afbeeldingen. Het is dus belangrijk om deze stappen in je dagelijkse routine mee te nemen. In deze blog leg ik uit waarom de optimalisatie van afbeeldingen belangrijk is, hoe je je afbeeldingen kan optimaliseren en je resultaten kan monitoren voor maximaal SEO succes.

Waarom is optimalisatie van afbeeldingen zo belangrijk?

• 22,6 procent van zoekopdrachten komt uit Image search (bron: jumpshot).
• Afbeeldingen krijgen een steeds groter aandeel in de reguliere zoekresultaten.
• Producten in Google image search, worden sinds kort verrijkt met reviews en prijzen. 
• Met o.a. de komst van verschillende AI oplossingen zoals Google lens, is het duidelijk dat Google ook zelf steeds meer inzet op de potentie van afbeeldingen.
• Het verbetert de snelheid van je website (een ranking factor van Google)
• Het maakt afbeeldingen begrijpbaar voor visueel gehandicapten.

Afbeeldingen optimaliseren voor SEO

Nu we een helder beeld hebben waarom afbeelding optimalisatie belangrijk is voor je SEO prestaties, leg ik je aan de hand van een stappenplan uit hoe je je afbeeldingen het best kan optimaliseren.

Bestandsformaat afbeeldingen

Afbeeldingen kan je op verschillende manieren opslaan. Het meest bekend zijn: .jpeg, .png, .svg en .gif. Inmiddels is er ook een nieuw bestandsformaat in opkomst: WebP. Dit bestand is kleiner en kan de laadtijd met 22 procent reduceren.

Tip: Wil je gebruik maken van het WebP-formaat, stel dan een fall back image in. Dit zorgt ervoor dat je afbeelding ook geladen kan worden in een browser die het WebP formaat nog niet ondersteunt.

<picture>
<source srcset=”img/jouwafbeelding.webp” type=”image/webp”>
<source srcset=”img/jouwalternatieveafbeelding.jpg” type=”image/jpeg”> 
<img src=”img/afbeelding.jpg” alt=”geoptimaliseerde alt tag”>
</picture>

Verder is het handig om te kijken of je CDN het bestandsformaat WebP ondersteunt.

Terug naar de keuze voor het formaat van jouw afbeelding. Stel jezelf de volgende vragen:
Vraag 1: Heeft je afbeelding animatie nodig?
JA: gebruik dan .gif of anmiated PNG ( Voorkeur: APNG)
NEE: ga door naar de volgende vraag.

Vraag 2: Dient je afbeelding kwalitatief te zijn met de hoogste resolutie:
JA: gebruik .png / .svg ( dit geld niet voor logo’s))
NEE: gebruik .jpeg / .webP

Let op: Ik verwacht dat op korte termijn, de meeste webbrowsers .avif gaan ondersteunen (Chrome 85 doet dit al). De bestandsgrote van dit formaat is nog kleiner dan .WebP. Zodra de meeste webbrowsers dit ondersteunen, zal ik het hier updaten.

Bestandsnaam van de afbeelding

Zorg ervoor dat de naam van je afbeelding logisch is en vertelt waar de afbeelding over gaat (en waar je op wilt ranken). Daarnaast is het handig om deze afbeelding te plaatsen in een logische url structuur.

Voorbeeld: Jouw afbeelding gaat over de Iphone 10 camera, benoem het bestand dan:
iphone-10-camera en sla hem als volgt op: jouwwebsite.nl/afbeeldingen/iphone-10-camera.

Tip: Maak je gebruik van een CDN? Sla je afbeeldingen dan op onder een subdomein, wanneer je wisselt van CDN blijft je bestandslocatie altijd hetzelfde.

Bijschrift afbeelding

Je kan elke afbeelding voorzien van een bijschrift. Een kleine tekst onder een afbeelding die vertelt waar je afbeelding over gaat. Je geeft dit aan door een <figcaption> tag bij je afbeelding te plaatsen. Voorbeeld:

<figure>
<img src=”cintroenboom.jpg” alt=”citroenboom” style=”width:100%”>
<figcaption>Citroen boom in Italie</figcaption>
</figure>

Alt attribuut

De alt attribuut (ook wel alt tag genoemd) is een handige manier om een zoekmachine te vertellen: mijn afbeelding gaat over X. Al hoewel machine learning een steeds grotere rol gaat spelen (ook in het bepalen wat er op de afbeelding staat), raad ik je aan deze attribuut altijd te gebruiken. Machines hoeven het niet altijd goed te hebben en kunnen af en toe ook een steuntje in de rug gebruiken 😉

De alt tag voeg je als volgt toe:

<img src=”citroenboom.jpg” alt=”citroenboom-italie”>

Tip: Ben je benieuwd hoe je de alt tag bij een Wix website instelt? Bekijk dan mijn Wix SEO handleiding.

Contextuele informatie om de afbeelding heen

Zoekmachines zoals Google kijken ook naar de tekst die rondom de afbeeldingen staat. Gaat een gedeelte van jouw tekst over citroenbomen in Italië, plaats daar dan geen afbeelding van een Italiaanse vlag. Zorg dat tekst en overige media – waaronder afbeeldingen – elkaar verrijken.

Afbeeldingen comprimeren

Comprimeer afbeeldingen om ervoor te zorgen dat je afbeelding de ideale bestandsgrootte krijgt. Wanneer je aan de slag gaat met het comprimeren van afbeeldingen, is het belangrijk om jezelf af te vragen wat de ideale verhouding is tussen kwaliteit en de snelheid van je website. Ben jij grafisch ontwerper? Dan is kwaliteit erg belangrijk en zou ik je afbeelding niet te veel verkleinen. Speelt de kwaliteit van de afbeelding een kleine rol, kijk dan of je iets meer van de kwaliteit af kan halen zodat de snelheid van je website hierdoor bevorderd wordt.

Tip: Wil je het maximale uit de snelheid van je website halen met betrekking tot de afbeeldingen? Kijk dan eens naar responsive images en netwerk informatie API. Met deze technieken kan je het type afbeelding aanpassen naar schermgrootte en de sterkte van de netwerkverbinding. Is je verbinding traag? Laad dan een minder kwalitatieve afbeelding in  wanneer iemand door middel van een 4G-verbinding verbonden is.

Afbeeldingen cachen

Een andere manier om de snelheid van je website te verbeteren is het cachen van je afbeeldingen.

Tip: Controleer of alle type afbeeldingen gecached worden. Denk aan: .jpg .png . webP etc.
Tip: Maak je daarnaast gebruik van een cached url? Controleer dan altijd even je robots.txt om te kijken of hier geen problemen ontstaan.

Structured data voor afbeeldingen

Door middel van structured data classificeer je je afbeelding voor zoekmachines. Je vertelt de zoekmachine: dit is een afbeelding, hier kan je het vinden en verrijkt het eventueel met wat extra informatie zoals de naam van de fotograaf en de locatie waar de afbeelding is gemaakt.

Voorbeeld van structured data voor afbeeldingen:

<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “ImageObject”,
“author”: “Jeroen Stikkelorum”,
“contentLocation”: “Italie”,
“contentUrl”: “citroenboom.jpg”,
“datePublished”: “2019-07-07”,
“description”: “Citroen boom in Italië tijdens mijn vakantie”,
“name”: “Citroen boom Italie”
}
</script>

Zeker met de komst van Google lens en de verkoopmogelijkheden in Google afbeeldingen, zal structured data je goed op weg helpen om deze resultaten te bereiken.

Tip: Maak je gebruik van een lazy loading techniek? Dan is structured data voor je afbeelding een vereiste. Google kan namelijk je afbeeldingen niet uitlezen op basis van gebruikersinteracties. Een alternatief voor structured data is een <noscript> tag om je afbeelding heen (bron: Google IO 2018)

Image sitemap

Heb je veel afbeeldingen op je website en is dit een belangrijke bron voor je verkeer? Denk dan eens na over het maken van een image sitemap.
Een image sitemap kan er als volgt uit komen te zien:

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”https://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:image=”https://www.google.com/schemas/sitemap-image/1.1″>
<url>
<loc>https://www.seobrein.nl</loc>
<image:image>
<image:loc>https://www.seobrein.nl/logo.jpg</image:loc>
</image:image>
<image:image>
<image:loc>https://www.seobrein.nl/fb.jpg</image:loc>
</image:image>
</url>
</urlset>

In een image sitemap kunnen de volgende tags gebruikt worden:
• <image:image> : Deze vereiste tag vertelt dat het om een afzonderlijke afbeelding gaat.
• <image:loc>: Deze vereiste tag vertelt de locatie van de afbeelding.
• <image:caption> : vertelt het onderschrift van de afbeelding.
• <image:geo_location>: vertelt de geografische locatie van de afbeelding.
• <image:title>: vertelt de titel van de afbeelding.
• <image:license>: vertelt de locatie (url) van de licentie van de afbeelding.

Tip: Plaats een link van je image sitemap in je robots.txt

Hoge kwalitatieve afbeeldingen

Tijdens Google IO 2019 – het jaarlijkse developer congres van Google – werd de ondersteuning voor hoge kwalitatieve afbeeldingen aangekondigd. Ik vermoed dat Google een aparte sectie voor hoge kwaliteitsafbeeldingen gaat maken en als het even meezit, ook voor 3D afbeeldingen. Inmiddels zijn ze in Amerika al aan het testen met 3d objecten. Het volgende bericht verscheen medio februari 2020 op Twitter.

Zodra er een definitieve handleiding is voor 3d objecten in Google, zal ik die hier delen.

Optimalisatie van afbeeldingen controleren

Nu je afbeeldingen geoptimaliseerd zijn, is het belangrijk om je optimalisatie-stappen te controleren. Ik doe dit op verschillende manieren:
• Controleer je alt attribuut, figcaption en url structuur met een webcrawler.
• Controleer de opmaak van je structured data in de structured data testing tool.
• Controleer de image sitemap in een webcrawler. Werken alle links? Zijn het directe links etc.
• Controleer of web compressie is toegepast, je CDN actief is, http2 is toegepast etc door middel van gratis snelheid tools zoals: ligthouse en webpagetest.org
• Controleer de voortgang van je website snelheid van je afbeeldingen (voor en na optimalisatie) door middel van een gratis tools zoals: lighthouse en webpagetest.org

Afbeelding prestaties monitoren

In Google search console kan je de voortgang in de zoekresultaten monitoren.

Log in Google search console en stel een filter in op afbeeldingen (zie afbeelding hieronder).

Goed om te weten:

• Google Search Console maakt geen verschil tussen verschillende afbeeldingen op een pagina. Niet de locatienaam van de afbeelding wordt genoemd, maar de url waar de afbeelding op staat.
• De positie van een afbeelding hangt af van de grootte van het scherm waarop de afbeelding gezien wordt. In het algemeen geldt dat posities bepaald worden van links naar rechts en van boven naar beneden.
• Wanneer een afbeelding getoond wordt in de reguliere zoekresultaten (dus niet op de afbeelding tab in Google), wordt het resultaat toegekend aan de web-resultaten