15 December 2019 in Website Optimalisatie

In 6 Stappen Website Afbeeldingen Optimaliseren

door Olivier Arntz 16.14 min lezen
getagd #media

Website afbeeldingen optimaliseren is iets wat heel vaak over het hoofd wordt gezien. Het is nochtans een belangrijke factor om meer verkeer op je website te krijgen. Leer in dit artikel hoe je in 6 stappen je verkeer kan boosten met het verbeteren van alle afbeeldingen op je website.

Afbeeldingen worden niet alleen getoond bij het gericht zoeken naar foto’s, maar ook regelmatig tijdens het gewoon organisch zoeken naar een bepaald onderwerp.

Met de introductie van het tonen van gemengde zoekresultaten is dit iets om zeker op in te spelen.

Website afbeeldingen verbeteren

De topposities voor afbeeldingen in zoekresultaten kunnen door jou worden ingenomen als je de instructies volgt in dit artikel. Je leest meer over de basisbeginselen van beeldoptimalisatie en de 6 technieken om je afbeeldingen goed te laten scoren in zoekmachines zoals Google en Bing.

Als je extra bezoekers op je website wil aantrekken, zijn dit de minimale maatregelen die je moet treffen voor het optimaliseren van website afbeeldingen.

De basisbeginselen om website afbeeldingen te optimaliseren

Zoekmachines kunnen een afbeelding niet lezen zoals ze tekstinhoud kunnen lezen. Het is dus essentieel dat je hen voorziet van extra informatie die ze kunnen gebruiken om een afbeelding adequaat te kunnen interpreteren en beschrijven. Als je de volgende aanbevelingen volgt, bent je klaar met de belangrijkste aspecten van SEO voor afbeeldingen.

Website afbeeldingen optimaliseren

Stap 1: Afbeelding bestandsnaam en URL pad

In de geschiedenis van het online zoeken naar afbeeldingen is de bestandsnaam en het pad naar de afbeelding altijd al één van de belangrijkste kenmerken geweest voor een goede classificatie en vindbaarheid van een afbeelding.

Wordpress Media Bijilagedetails

De bestandsnaam en de URL helpt niet alleen om een afbeelding goed te beschrijven voor zoekmachines. De naam wordt ook gebruikt als ankertekst wanneer iemand met een directe link verwijst naar de afbeelding. Dit geeft soms een extra zetje in je online zichtbaarheid en zal zeker ook helpen bij het hoger rangschikken van je afbeelding bij sommige zoekopdrachten.

Een beschrijvende bestandsnaam helpt je tot slot ook bij het organiseren van al je afbeeldingen. Standaard bestandsnamen met volgnummer zoals die vaak automatisch door fototoestellen worden aangemaakt (vb. IMG0045067.JPG) leiden tot een onoverzichtelijke verzameling afbeeldingen.

In Wordpress kan je de bestandsnaam en het URL pad van een afbeelding controleren via Media in de Bijlagedetails.

SEO van afbeelding met bestandsnaam en URL pad optimaliseren
bestandsnaam en URL pad optimaliseren

In het verleden hebben Google en Bing meer nadruk gelegd op de bestandsnaam dan nu. Beiden gebruiken dit echter nog steeds als een klein signaal bij het bepalen van je positie in de zoekresultaten.

Als we praten over het URL pad met zoekwoorden erin, praten we bijvoorbeeld over de volgende URL structuur:
https://www.domein.be/producten/haarverzorging/droog-haar/merknaam-shampoo-001.jpg

Een zoekwoord in de URL-structuur of pad van de bestandsnaam, lijkt altijd beter te presteren in zoekresultaten dan een algemene URL zoals bijvoorbeeld:
https://www.domein.be/blog/uploads/2015/6/img0021.jpg

In het ideale geval zou de bestandsnaam van je afbeelding de afbeelding tot op zekere hoogte moeten beschrijven, maar laat je niet meeslepen. Als het aantal streepjes of de totale lengte van de bestandsnaam toeneemt, neemt ook de kans toe dat het zoekalgoritme dat als spam beschouwt, net als een webpagina. Zo kort en krachtig mogelijk is hier dus de beste aanpak.

Een korte, maar beschrijvende bestandsnaam zoals merk-shampoo-001.jpg is veel beter. Net als de titellabels van webpagina's zijn bestandsnamen het beste wanneer de volgorde van de zoekwoorden wordt gevolgd en de zoekwoorden aan het begin van de bestandsnaam staan. Dus, als je zoekwoordgroep Merknaam Shampoo is, dan is merknaam-shampoo-001.jpg beter dan 001-merknaam-shampoo.jpg. Hoewel zoekmachines wel behoorlijk goed zijn geworden in het uit elkaar trekken van woorden, zal je betere resultaten zien als je jouw zoekwoorden scheidt met een streepje.

Google heeft aangegeven dat het nuttig kan zijn om soortgelijke afbeeldingen in de directorystructuur te groeperen. Dus als je een groep afbeeldingen optimaliseert, bijvoorbeeld een Hawaiiaanse reis, is een bestandspad zoals www.domein.be/afbeeldingen/reizen/hawaii beter dan alles in een algemene directory zoals www.domein.be/afbeeldingen/ te plaatsen. Besteed hier bijzondere aandacht aan wanneer je met Wordpress werkt. Als je de Wordpress Media-functies gebruikt, wordt het bestandspad niet geoptimaliseerd. Je kant natuurlijk ook rechtstreeks linken naar afbeeldingen die ergens anders op de site staan, zoals in een map /afbeeldingen/hawaii/.

Tot slot, beeldzoekmachines zullen de bestandsnaam af en toe gebruiken als de koptekst voor de afbeelding. Dit is redelijk uitzonderlijk, maar als dit gebeurt, is het beter om je afbeelding te laten verschijnen als een beschrijvende bestandsnaam dan als een nummer.

Stap 2: Afbeelding ALT Attribuut

ALT-tekst is een HTML img tag kenmerk, ook soms ten onrechte de Alt Tag genoemd, die staat voor Alternatieve Tekst. Dit werd oorspronkelijk gebruikt om in plaats van de afbeelding een alternatieve tekst aan de lezer te tonen, bijvoorbeeld wanneer iemand een tekstbrowser gebruikt, of het automatisch downloaden van afbeeldingen heeft uitgeschakeld, of een persoon met een visuele beperking die een schermlezer gebruikt.

Zoekmachines vonden dat ALT-tekst een goede manier was om erachter te komen waar een afbeelding over ging. Al vrij snel indexeerden ze de tekst in het alt-attribuut, vergelijkbaar met de zichtbare tekst op de pagina. Deze praktijk blijft nog steeds gebruikelijk, hoewel minder belangrijk dan voorheen. Bij het zoeken naar afbeeldingen hebben zoekmachines het alt-attribuut vaak gebruikt voor het rangschikken van afbeeldingen, omdat dit één van de meest gebruikte manieren is om een ​​afbeelding te beschrijven. Zowel Google als Bing hebben echter hun vertrouwen in de alt-tekst als signaal voor updates aanzienlijk verminderd in hun zoekalgoritmes.

Hier is een voorbeeld van het Alt Attribuut in gebruik:
< img src="https://www.domein.be/afbeeldingen/shampoo-droog-haar.jpg" alt="Shampoo voor Droog Haar" />

In het ideale geval zou je beschrijvende tekst moeten opnemen voor de afbeelding alt-tekst, en indien van toepassing je zoekwoord in die tekst opnemen.

SEO ALT attribuut optimalisatie
SEO ALT attribuut optimalisatie

Stel dat je doelzoekwoordgroep "Outdoor Wifi-Antenne" is. In dat geval kan je een exacte overeenkomst gebruiken zoals alt="Outdoor Wifi-Antenne" of nog een paar extra zoekwoorden toevoegen, zoals alt="Tuin Terras Outdoor WiFi-Antenne". Ongeacht wat je beslist, vermijd het gebruik van uitsluitingszoekwoorden voor een afbeelding, omdat dit geen goede doorklikfrequenties oplevert. Wat je wil, is de afbeelding beschrijven en gebruik maken van een zoekzin of zoekwoord in de tekst zonder te overdrijven.

Vermijd spammen in het alt-attribuut met herhaalde zoekwoordtekst. Dat is geen goed idee en zal hoogstwaarschijnlijk zelfs een afname in zoekpositie voor die afbeelding veroorzaken.

Hier zijn nog een paar tips om in gedachten te houden bij het invullen van het Alt-attribuut:

Wees heel voorzichtig met hoe je afbeeldingen noemt en plaats dit in hun alt-attribuut, om te vermijden dat afbeelding ongewenst in zoekresultaten wordt getoond. Het gebeurt vaak dat een productpagina een vreselijke afbeelding laat zien terwijl de exacte juiste afbeelding ergens op dezelfde pagina staat. Dit gebeurt ook vaak bij Facebook Likes voor een URL als de site geen gebruik maakt van Open Graph Tags.

Stel dat je een pagina hebt over Rode Widgets, plaats dan niet de tekst 'rode widgets' in de bestandsnaam of alt-tekst voor je navigatieknoppen of andere pagina-elementen. Bedenk en plan precies welke afbeelding op die pagina je goed wilt laten rangschikken bij het zoeken naar afbeeldingen. Zodra je hebt besloten is die bepaalde afbeelding de enige die je met je zoekwoorden moet noemen.

Stap 3: Tekst Vlakbij de Afbeelding en Pagina Inhoud

De pagina waarop de afbeelding wordt afgebeeld, heeft een ENORME invloed op de positie binnen de zoekresultaten. Net zoals bij organisch zoeken, zijn de paginatitel, metabeschrijving, pagina-inhoud en inkomende ankertekst-koppelingen handig om tekst aan een afbeelding te koppelen. Zowel Google als Bing zijn veel meer gericht op het gebruiken van de pagina-inhoud waar de afbeelding wordt gevonden dan op de afbeeldingbestandsnaam of alternatieve tekst die de afbeelding beschrijft.

Voorbeeld Image Caption Kerstboom
Voorbeeld Image Caption Kerstboom

Image Captions - de tekst binnen hetzelfde pagina-element (TD/Div Tag, enz.) - worden ten zeerste aanbevolen omdat caption-inhoud voor zoekmachines enigszins gemakkelijk te associëren is met de afbeelding. Zie voor een referentie het voorbeeld van de kerstboom aan de rechterkant van deze paragraaf. De tekst onder de afbeelding bevindt zich in dezelfde div-tag en helpt om deze aan de afbeelding te relateren.

Andere tekst op de pagina moet ook op hetzelfde onderwerp betrekking hebben. Als je in het Wifi-Antenne-voorbeeld hierboven specifiek wil rangschikken voor een bepaald merk en type, zou de pagina zelf idealiter over dat specifieke product moeten gaan, en niet een generieke Wifi-antenne.

Stap 4: Inkomende Links en Linkteksten

Nogmaals, net als bij regulier zoeken, zijn inkomende links naar de pagina waar de afbeelding is ingesloten een zoekpositie-signaal binnen het zoeken naar afbeeldingen. Met de hoeveelheid beelden die online gekopieerd worden, worden er veel signalen gebruikt om te bepalen welke versie van een afbeelding mensen het leukst vinden. Inkomende links hebben een grote invloed op de pagina's waarop de afbeelding is ingesloten.

Stap 5: Afbeelding- & Bestandsgrootte Zijn Belangrijk

Hoe groter de afmetingen van een afbeelding hoe beter, omdat zoeken naar afbeeldingen over het algemeen grotere afbeeldingen hoger rangschikt. Dit is vooral het geval bij zoekopdrachten naar producten. De bestandsgrootte van een afbeelding is echter best zo klein mogelijk om de laadtijd te verkorten en de gebruikerservaring te verbeteren.

Je website afbeelding optimaliseren is dus zoeken naar een goede balans tussen de afmetingen en de bestandsgrootte van de afbeelding.

Afbeeldingsgrootte controleren in Wordpress
Afbeeldingsgrootte controleren in Wordpress

Waar dit afwijkt, is meestal afhankelijk van de zoekopdracht - iemand die bijvoorbeeld zoekt naar een achtergrond voor een bureaublad gaat op zoek naar een afbeelding met een hogere resolutie dan iemand die op zoek is naar een pictogram. De bestandsgrootte is in dat geval minder van belang.

Veronderstel dat je aan een productfoto werkt voor een auto-onderdeel op je website. Dit is een onderdeel wat tientallen andere detailhandelaars verkopen en waarvoor velen foto's met vergelijkbare grootte gebruiken. Aangezien er meestal voorkeur is voor grotere afbeeldingen, is het waarschijnlijk de moeite waard om een ​​afbeelding met een hoge en een lage resolutie aan te bieden. Het bestand met hoge resolutie moet iets zijn dat bruikbaar is voor de browsergrootte waarmee je in het algemeen werkt. Iets minder dan 1000 pixels breed is aan te raden, maar in elk geval groter dan de hoge resolutie versie van de productafbeeldingen bij je concurrenten. Peter Linsley van Google heeft verklaard dat 2/3e van de schermgrootte het beste is en om grotere browserformaten te vermijden. Overweeg ook om een ​​niet-standaard beeldverhouding voor uw afbeelding te gebruiken, Google heeft beide de neiging om dingen een beetje proportioneel in hun resultaten te "mixen", alleen is het veranderen van de beeldverhouding genoeg om in te breken in sommige competitieve resultaten.

Hier is een voorbeeld van een html-code van een methode die heel goed werkt om de gebruiker een kleine afbeelding te tonen die op de productpagina past, maar toch een grote afbeelding beschikbaar stelt. Dit helpt bij de rangschikking van de afbeelding en is een aanwinst voor de gebruiker.

Let op het gebruik van "thumbnail" in de bestandsnaam voor de kleinere versie van de afbeelding. In dit voorbeeld wordt ook een jQuery lightbox-effect gebruikt om een ​​pop-upafbeelding te genereren, waarvoor de rel=lightbox dient.

Natuurlijk zijn er tientallen variaties die je kunt gebruiken om grotere versies van je productfoto's te maken, maar het bovenstaande voorbeeld werkt vrij goed en wordt veel gebruikt.

Stap 6: Afbeelding Titel Attribuut

Het gebruik van een img titel attribuut kom je tijdens het zoeken naar afbeeldingen vaak tegen bij afbeeldingen met een hoge zoekpositie.

Afbeelding titel attribuut instellen in Wordpress
Afbeelding titel attribuut instellen in Wordpress

Het Titel attribuut is misschien niet de meest positieve ranking factor, maar het gebruik van de tag kan zeker geen kwaad. Meestal wordt de methode gebruikt om de tekst die in het ALT-attribuut staat te herhalen in het img-titel attribuut.
<img src="https://www.domein.com/wifi-router-thumbnail.jpg" width="200" height="100" alt="Wifi Router" title="Wifi Router Grote Afbeelding"/>

Een andere manier waarop we het titelkenmerk gebruiken, is beschrijven wat er gebeurt als iemand op een afbeelding klikt. Dit betekent dat we in de eerste plaats de title-tag gebruiken met de anker-link om de afbeelding gewikkeld, omdat die gebruiksvriendelijk is en omdat nieuwe browsers geen alt-tekst weergeven als een tool-tip. Dat is een pluspunt. Het gebruik van de title-tag in de anker-link kan ook nuttig zijn om de klikfrequenties in sommige situaties te verhogen.

Enkele basistips om te onthouden bij het verbeteren van website afbeeldingen

Ga aan de slag met meer dan enkel de optimalisatie van je website afbeeldingen. Start met een uitgebreide en gedetailleerde Expert Audit om je website grondig te verbeteren

Laat je website harder werken dan jezelf door je bedrijf bovenaan in de zoekresultaten te krijgen ... telkens met één extra afbeelding meer.


Auteur

Online Expert Olivier Arntz

Olivier Arntz

Online Expert

Zaakvoerder van Online Expert. Gek op bedrijven online beter vindbaar en succesvoller maken.

Ontvang de nieuwste Online Expert tips

Getuigenissen

Dit is wat klanten over Online Expert vertellen

  • "Wat een verschil met onze vorige partner. Olivier is na het overeenkomen van de samenwerking onmiddellijk in actie getreden, heeft zeer snel vele verbeteringen doorgevoerd en communiceert zeer duidelijk. Aanrader voor iedereen die een goede relatie wil met zijn/haar online expert."

    Online Expert review door Erwin Liekens

    Erwin Liekens

    Stadsgids bij Taste The City

  • "Sinds we het vertrouwen aan Olivier hebben gegeven is onze zaak gestaag gegroeid. Wij raden Online Expert zeker aan en danken Olivier voor de continue updates en uitstekende service."

    Online Expert review door Guy Verhaegen

    Guy Verhaegen

    Zakenpartner De Keyser en de kok

  • "Het leuke aan werken met Olivier is dat wanneer ik vragen heb of hulp nodig heb, hij snel antwoordt, probeert te helpen waar hij kan en me tips geeft over wat ik zelf kan doen."

    Online Expert review door Sofie-Ann Bracke

    Sofie-Ann Bracke

    Trainer in lichaamshouding

  • "Met Olivier samenwerken is een aangename ervaring. Hij denkt met u mee en behoedde mij vaak om bepaalde keuzes te maken die technisch niet haalbaar waren of niet zouden bijdragen tot het gewenste resultaat."

    Online Expert review door Danièla Laeremans

    Danièla Laeremans

    Marketing manager bij Vitrapack en Rask

  • "Persoonlijke dienstverlening, mooi en functioneel webontwerp, constante begeleiding en opvolging. Blij!"

    Online Expert review door Sabine Bulcke

    Sabine Bulcke

    Zaakvoerder Interaxi