Afbeeldingen optimaliseren met tekst

Heb je ook altijd de neiging om tussen grote lappen tekst een afbeelding te plakken? Groot gelijk. Er bestaat niet voor niets dat gezegde met 1000 woorden en bovendien zijn er tig onderzoeken over de aantrekkingskracht van afbeeldingen. Maar laten we niet vergeten dat tekst ook heel veel kan betekenen voor een afbeelding. Kijk maar eens naar de volgende 4 scenario’s om afbeeldingen te optimaliseren voor je website.

Afbeeldingen optimaliseren voor Google

In tegenstelling tot webpagina’s gebruikt Google veel minder factoren om te bepalen of een afbeelding wordt opgenomen in de zoekresultaten. Van al deze factoren speelt tekst de belangrijkste rol.

Maar waarom zou je eigenlijk willen dat naast je webpagina’s ook de afbeeldingen die daarin gebruikt worden in Google verschijnen? Klikt er überhaupt iemand op het tabblad Afbeeldingen? Bovendien is het al lange tijd zo dat Google een geselecteerde afbeelding direct in de zoekresultaten laat zien en niemand meer gelijk doorstuurt naar de bijbehorende webpagina. Een gedeelte van de mensen die je afbeelding in Google bekijken, zullen dus eigenlijk nooit op je website terechtkomen. 

 

Toch blijft het om verschillende redenen interessant om je afbeeldingen te optimaliseren voor zoekmachines.

• Als je merkt dat je webpagina maar moeilijk een goede positie in de zoekresultaten scoort, betekent dit niet dat hetzelfde lot voor de afbeeldingen op die pagina is weggelegd. Aangezien zoekmachineoptimalisatie voor afbeeldingen van veel minder factoren afhankelijk is, kan het zomaar voorkomen dat je webpagina op plek 100 en de bijbehorende afbeeldingen op plek 1 in Google terechtkomen. Beter een afbeelding die goed rankt dan helemaal niets, toch?

• Daarnaast zijn er mensen die Google Afbeeldingen als verlengde van de standaardresultaten gebruiken om zoveel mogelijk websites te vinden die over een bepaald onderwerp schrijven. Zo zijn er voor de term ‘Galaxy Note 8 Review’ in de afbeeldingsresultaten veel kwalitatieve reviews te ontdekken die niet zo gemakkelijk in de standaardresultaten te vinden zijn. 

• In Google Afbeeldingen wil je ook staan wanneer je via je website producten of diensten aanbiedt die mensen eerst willen zien voordat ze tot een koop overgaan. Stel dat iemand op zoek is naar een huwelijksfotograaf in Amsterdam. Het is goed denkbaar dat diegene ‘huwelijksfotograaf Amsterdam’ in Google typt en vervolgens de website bezoekt van de fotograaf met de mooiste foto in de afbeeldingsresultaten. 

• Een afbeelding in Google heeft ten slotte de potentie om nieuwe links richting je website op te leveren, wat weer voordelig is voor de Google-positie van je website in het algemeen. Stel dat jouw infographic, illustratie of andere visuele content via Google wordt opgepikt en gebruikt wordt op andere websites. Via Google Reverse Image Search kan je makkelijk achterhalen welke websites dit zijn en de eigenaren ervan vragen om als bronvermelding een link richting jouw website te plaatsen.

Genoeg redenen om je afbeeldingen te optimaliseren voor Google. Welke tekst helpt je hierbij? 

De bestandsnaam

De bestandsnaam is een van de manieren die Google gebruikt om te begrijpen waar een afbeelding over gaat. Verander de naam die je camera of telefoon aan een afbeelding geeft daarom altijd naar iets zinnigs voordat je de afbeelding uploadt.

Wees hierbij zo specifiek mogelijk: in plaats van ‘IMG_20171219.jpg’ is het beter om ‘laptop.jpg’ als bestandsnaam te gebruiken. Concreter en daardoor nog ietsje beter is dan natuurlijk ‘dell-xps-13-windows-laptop.jpg’.

Voor het scheiden van meerdere woorden in je bestandsnaam geeft Google als best practice aan om normale streepjes in plaats van liggende streepjes te gebruiken.

 

URL en paginatitel 

De tekst die zich bevindt in de URL en titel van een pagina zijn voor Google eveneens relevant. Het zou raar zijn om afbeeldingen over katten op een pagina aan te treffen waarbij de URL en titel laptops als onderwerp heeft. Het is mogelijk dat Google dan twijfelt over de betekenis van de afbeeldingen en consistentie in de pagina mist. Hierdoor worden de afbeeldingen als minder relevant gezien voor een hoge positie in de afbeeldingsresultaten. 

Omliggende tekst

Hetzelfde geldt voor de tekst die zich in de buurt van een afbeelding bevindt. Worden daarin dezelfde termen gebruikt die zich ook in de bestandsnaam en het later te bespreken alt-attribuut van een afbeelding bevinden? Dan is dit voor Google een duidelijk signaal dat de afbeelding daadwerkelijk over het onderwerp gaat dat in de omliggende tekst staat omschreven.

Image sitemap

Een ‘image sitemap‘ is een bestand waarin relevante informatie over je afbeeldingen netjes gerangschikt staat. Deel deze ‘wegwijzer’ met Google om de kans te vergroten dat er zoveel mogelijk van je afbeeldingen in de afbeeldingsresultaten belanden. Wanneer je WordPress in combinatie met de populaire Yoast SEO-plugin gebruikt, wordt het aanmaken van een image sitemap al automatisch voor je gedaan.

Alternatieve tekst via het alt-attribuut

Ten slotte gebruikt Google ook het alt-attribuut om een afbeelding beter te begrijpen. Dit is de tekst die getoond wordt wanneer een afbeelding niet wil laden. Aangezien deze tekst een alternatief is voor de bijbehorende afbeelding, is het verstandig om in ieder geval evenveel informatie in het alt-attribuut te schrijven als in de bestandsnaam. Pas wel op dat je het alt-attribuut niet volpropt met alleen maar woorden waar je op gevonden wil worden. Hier straft Google je op af. Een goed alt-attribuut ziet er als volgt uit:

 

<img src="/dell-xps-13-windows-laptop.jpg" alt="Dell XPS 13 Windows-laptop met 512 GB SSD">

In tegenstelling tot de bestandsnaam mogen woorden in het alt-attribuut wel gescheiden worden met een spatie.

 

Afbeeldingen optimaliseren voor toegankelijkheid 

Naast zoekmachineoptimalisatie optimaliseer je met tekst je afbeeldingen ook op vlakken waar je niet zo snel aan denkt. Een duidelijk en beknopt alt-attribuut verbetert naast de vindbaarheid namelijk ook de toegankelijkheid van je afbeeldingen. Schermlezers lezen dit attribuut op om de inhoud van een afbeelding uit te leggen aan bijvoorbeeld slechtzienden. Een extra reden om het niet vol te proppen met woorden waar je op gevonden wil worden.

In de gevallen waarin een alt-attribuut te kort is om de inhoud van een afbeelding uit te leggen, kan je de hulp inschakelen van het ARIA-attribuut ‘aria-describedby’. Hiermee is de inhoud van een afbeelding aan slechtzienden met veel meer woorden te beschrijven dan met een alt-attribuut.

Afbeeldingen verduidelijken met extra context

Het kan überhaupt geen kwaad om je bezoekers van extra informatie te voorzien bij een afbeelding. Deze extra context creëer je door title-attributen en captions te gebruiken.

Title-attribuut

Het title-attribuut is de extra tekst die verschijnt wanneer je met je muis op een afbeelding blijft staan.

 

<img src="/dell-xps-13-windows-laptop.jpg" alt="Dell XPS 13 Windows-laptop 512 GB SSD" title="Speciale editie, gekocht in 2017">

Het is in tegenstelling tot het alt-attribuut niet bedoeld om alternatieve informatie aan een afbeelding mee te geven. In plaats daarvan biedt het aanvullende informatie die niet van essentieel belang is om een afbeelding te begrijpen. De vraag is echter hoeveel bezoekers met hun muis op een afbeelding blijven staan en deze teksten te zien krijgen.

Captions

De voorkeur gaat daarom uit naar een caption: de informerende tekst onder een afbeelding. Naast dat iedereen deze te zien krijgt, brengt een caption meer voordelen met zich mee. Als omliggende tekst speelt een caption een rol in de zoekmachineoptimalisatie van een afbeelding. 

Daarnaast wordt het als onderdeel van de afbeelding gezien en leest men het tot wel 300% vaker dan normale tekst op een pagina. Captions zijn dus ontzettend handig om extra informatie mee te geven aan bezoekers die je pagina snel scannen en alleen de titels en afbeeldingen bekijken. Aantrekkelijke captions kunnen er zelfs voor zorgen dat scannende bezoekers overgaan tot het lezen van de hele pagina.

Captions maak je gemakkelijk aan via het figcaption-element:

<figure>
  <img src="/dell-xps-13-windows-laptop.jpg" alt="Dell XPS 13 Windows-laptop 512 GB SSD">
  <figcaption>Dell XPS 13 speciale editie, gekocht in 2017</figcaption>
</figure>

Je afbeeldingen aankleden voor social media

Ten slotte helpt tekst je om te bepalen welke afbeelding op social media verschijnt wanneer iemand jouw pagina of artikel deelt. Dit gebeurt via zogenaamde Open Graph-tags en Twitter card-tags die Facebook en Twitter een sein geven welke afbeelding gebruikt moet worden voor socialmediadoeleinden. Naast de afbeelding bepaal je ook wat de titel, beschrijving en URL van een gedeeld bericht worden.

Sla twee vliegen in één klap en plaats de volgende tags in de <head> van je HTML-document om zowel Facebook als Twitter te voorzien van de benodigde informatie: 

<head>
  <meta property="og:title" content="Titel van je pagina of blogartikel">
  <meta property="og:description" content="Beschrijving van je pagina of blogartikel">
  <meta property="og:image" content="https://locatie-afbeelding.nl/afbeelding.jpg">
  <meta property="og:url" content="https://locatie-pagina-blogartikel.nl/pagina-blogartikel.html">
  <meta name="twitter:card" content="summary_large_image">
</head>

Vergeet hierbij niet om bij de eerste vier tags de tekst achter ‘content=’ aan te passen en alles te controleren met de Open Graph Debugger.

Zorg er daarnaast voor dat je afbeelding minimaal 1200 pixels breed bij 630 pixels hoog is en een bestandsgrootte kleiner dan 1 MB heeft om aan de afbeeldingsvereisten van beide socialmediaplatformen te voldoen.

Niet alle afbeeldingen optimaliseren

Gebruik je naast informatieve afbeeldingen (die aansluiten op de inhoud van je teksten) ook afbeeldingen die slechts ter decoratie bedoeld zijn? Dan is het verstandig om laatstgenoemde afbeeldingen niet te optimaliseren volgens de bovenstaande regels. Het is namelijk niet de bedoeling dat ze op een hoge positie in Google terechtkomen of via schermlezers worden voorgelezen. Geef ze daarom een leeg alt-attribuut mee:

<img src=”locatie.jpg” alt=""/>

Veel beter is natuurlijk om decoratieve afbeeldingen helemaal geen onderdeel uit te laten maken van je HTML-document en ze in te laden via een CSS-sheet.

Afbeelding + tekst = ❤

Afbeeldingen zeggen in een oogopslag vaak meer dan woorden, maar vergeet niet dat tekst een belangrijke rol blijft spelen bij het optimaliseren van afbeeldingen. Zo zorgt tekst ervoor dat je afbeeldingen kans maken om in Google terecht te komen, toegankelijker worden voor een groter publiek, meer betekenis krijgen en op social media gezien worden. Een pagina tekst zonder afbeeldingen is misschien niet verstandig voor je website, maar een afbeelding zonder tekst evenmin.