Zo optimaliseer je afbeeldingen op je website (voor SEO & gebruiker)

Een vergeten én onderschat onderdeel van website-optimalisatie is het optimaliseren van afbeeldingen. Afbeeldingen optimaliseren doe je absoluut niet alleen voor SEO, ook voor je gebruiker. Vanuit het oogpunt van toegankelijkheid zijn afbeeldingen ook een belangrijk onderdeel van je website. En het leuke is: dit onderwerp ligt op het snijvlak van content en techniek. Beide komen aan bod en je ontdekt waarom het grootste gedeelte van de websites het verkeerd doet. Nog steeds.

(let goed op de gouden tip die je in dit artikel vindt…)

-Dit artikel is oorspronkelijk gepubliceerd op 25 september 2014 en op 2 juli 2020 grondig geüpdatet-

Waarom zou je de afbeeldingen op je website optimaliseren?

Laten we beginnen met waarom afbeeldingen optimaliseren zo belangrijk is. Er zijn 3 belangrijke redenen:

  1. SEO
  2. Gebruikersvriendelijkheid
  3. Toegankelijkheid (accessibility)

SEO en toegankelijkheid hebben daarbij best veel met elkaar te maken. Het gaat bij beide over het begrijpen wat er op de afbeelding staat en wat de context is met de inhoud van de pagina. De zoekmachinebots herkennen geen foto’s. Die zien niet het verschil tussen een foto van Nathan Veenstra of Michiel Veenstra niet…

Nathan Veenstra of Michiel Veenstra - optimaliseer je foto's voor de zoekmachines

En net als die zoekmachinebots is ook de voorleessoftware voor mensen met een visuele beperking niet in staat om precies te begrijpen wat er op een foto staat. Of wat die foto met de informatie op die pagina te maken heeft. Dus goede optimalisatie van afbeeldingen helpt zowel bezoekers met een visuele beperking als de zoekmachines.

De eerste slag met afbeeldingen op je website

Afbeeldingen zijn nuttig. Ze voegen wat toe aan je tekst, illustreren je verhaal en maken je webpagina’s leesbaarder. Want een pagina met enkel tekst sla je toch gauw over? Als je ze dan toch gebruikt, laat ze dan ook zeker bijdragen aan je SEO. Er zijn 2 dingen waar je rekening mee moet houden bij het optimaliseren van afbeeldingen:

  1. Technische optimalisatie: formaat en afmeting
  2. Tekstueel: bestandsnaam, titel en alt-tekst

Beide zijn van invloed op je SEO, maar zijn ook gewoon van belang voor de gebruiksvriendelijkheid van je website.

Formaat en afmeting: essentieel voor je laadtijd

Een (te) grote afbeelding kost tijd om te laden. Dat geldt zowel voor de bestandsgrootte als voor de afmetingen. Bij afmetingen komt er alleen nog wat om de hoek kijken. Als je foto’s of afbeeldingen namelijk in een groter formaat uploadt dan deze wordt weergegeven, moet je browser:

  • eerst een bestand ophalen dat groter is en dus meer laadtijd kost dan nodig is
  • de afbeelding daarna schalen naar de afmetingen waarop deze moet worden weergegeven, wat ook weer tijd kost

Je krijgt dus op 2 vlakken vertraging op je laadtijd, terwijl dat niet nodig is. Hoe je hier achter komt, lees je in ‘Zo test en verbeter je de snelheid van je website‘.

Vooropgesteld: laadtijd heeft maar erg weinig invloed op je SEO. Het technisch optimaliseren van foto’s doe je vooral voor de gebruiker. Een snel ladende webpagina is nu eenmaal een veel betere gebruikerservaring.

Alles over technische optimalisatie van je foto’s vind je hier.

Tekstueel: ga niet op je bek met over-optimalisatie

Een digitale afbeelding kan niet zonder leestekens, of dat nu cijfers, letters of woorden zijn. Het is een bestand, met dus een bestandsnaam en nog wat andere data. Voor een afbeelding op een webpagina zijn er 4 onderdelen waar je tekst kwijt kan:

  • Bestandsnaam; dat begint al bij het opslaan van je afbeelding
  • Titel, ook ‘attribuut afbeeldingstitel’; verschijnt als iemand met de muis over de afbeelding gaat
  • Alt tekst; wordt ook alt-tag genoemd, daar komen we nog op
  • Onderschrift; voor verdere toelichting op de afbeelding

Let op: de titel in WordPress is vergelijkbaar met de bestandsnaam, het is alleen bedoeld als ‘titel’ voor je eigen mediabibliotheek.

Kijk met de tekstuele optimalisatie wel uit dat je niet over-optimaliseert. Ga niet op je bek door de boel vol te spammen. Heeft geen zin. En daar zijn die onderdelen dus ook niet voor bestemd.

Hoe pak je de tekstuele optimalisatie aan?

We gaan alle 4 onderdelen doornemen en bekijken wat je ermee kan of moet. En wat het doet voor SEO. Want je wilt natuurlijk wel dat je afbeeldingen bijdragen aan je vindbaarheid.

De bestandsnaam: vooral voor jezelf, en misschien voor SEO?

We beginnen met de bestandsnaam. Dat is dus hoe je zelf de foto opslaat. Mijn gouden tip hiervoor is:

Geef je afbeeldingen een bestandsnaam waardoor je ze zelf ook makkelijk kunt terugvinden.

Je harde schijf is je digitale bibliotheek, waarin je steeds meer media opslaat. Hoe vind je nu die ene foto terug die je zo graag nog eens wilt laten zien? Door ‘m een bestandsnaam mee te geven waarmee je ‘m terugvindt natuurlijk. Die ene leuke foto van jou met Mickey Mouse in Disneyland Parijs vind je niet snel als die DSC0448 heet. Wel als Mickey Mouse en Disneyland Parijs in de bestandsnaam voorkomen. Zie? Het is niet eens moeilijk.

Bestandsnamen en de zoekmachines

Als je nu kijkt naar het voorbeeld hieronder, vraag jezelf dan af wat die bestandsnaam zegt over wat er op de foto staat. Die bestandsnaam ‘ziet’ de zoekmachinebot ook en hoewel het officieel geen SEO-factor is, heb ik het sterke idee dat het wel iets doet. Want: woorden in de broncode van je webpagina worden ‘gelezen’ en als daar woorden in staan die iets te maken hebben met het onderwerp van de pagina, zegt dat toch meer dan DSC0448.jpg?

Afbeeldingen website optimaliseren _DSC

Bestandsnaam wordt titel in WordPress

Je ziet in bovenstaande afbeelding al dat de geüploade foto ‘DSC0448.jpg’ als naam heeft op mijn harde schijf. Dit wordt 1-op-1 overgenomen en ook gekopieerd in het vak ‘Title’. Die titel in WordPress is dus net als de bestandsnaam in jouw eigen ‘bibliotheek’. De zoekmachine ziet die titel niet en kan daar ook niks mee doen. Die kan dus zo blijven, hoef je niks mee te doen.

De alt-tekst: eigenlijk de belangrijkste

De alt-tekst is de ‘alternatieve tekst’. Deze had oorspronkelijk als functie om te beschrijven wat er op de afbeelding stond wanneer de afbeelding niet weergegeven werd op een webpagina. In het stenen tijdperk van het internet liep de verbinding over een telefoonlijn en dat was vergelijkbaar met een GPRS-verbinding op je mobiel. Bijna dan. Traag in ieder geval. Door de weergave van afbeeldingen uit te schakelen, laadde een webpagina sneller. De alt-tekst werd dan vertoond op de plek waar de afbeelding stond, zodat je een idee had wat er op de afbeelding stond.

Voor de visueel beperkten én (een beetje) voor SEO

De belangrijkste functie van de alt-tekst is nu om de afbeelding te beschrijven voor mensen met een visuele beperking. Die hebben voorleessoftware die webpagina’s voorleest voor ze. De alt-tekst wordt door die voorleessoftware ook voorgelezen, zodat ze bezoekers met een visuele beperking weten dat er een afbeelding staat en wat er op staat.

Zo schrijf je de alt-tekst

Nu je weet waar de alt-tekst voor dient, weet je ook hoe je ‘m schrijft. Omschrijf wat er op de foto staat, zodat iemand die ‘m niet kan zien begrijpt wat erop staat. Creëer daarbij dan ook vooral context met het onderwerp van de pagina. Als dat niet kan, kan het niet. Aan de andere kant: kleine kans dat dat zo is, want de afbeelding voegt toch iets toe aan je pagina en dus het onderwerp?

Hoe het met SEO zit?

Er wordt vaak gezegd dat je die alt-tekst moet gebruiken voor je SEO. “Zet er zeker je zoekterm in” wordt er dan gezegd. Niet doen. Daar is het niet voor bestemd. Aan de andere kant is de kans groot dat je je zoekterm of woorden daaruit voorkomen in je alt-tekst, omdat de afbeelding toch iets te maken heeft met het onderwerp van de pagina, zoals we hiervoor ook al konden concluderen?

Wat weinig mensen weten over de alt-tekst

Grote kans dat je niet wist dat die voorleessoftware gebruik maakt van de alt-tekst. Maar er is meer. En dat heeft eigenlijk te maken met die voorleessoftware. Houd rekening met deze 3 punten:

  • Een decoratieve afbeelding (headerfoto, achtergrondbeeld) krijgt geen alt-tekst mee. Laat ‘m dan leeg of zet er alleen een spatie in. Er hoort altijd een alt-tekst bij de afbeelding; leeg voor decoratief, omschrijvend bij beeld dat de tekst ondersteunt.
  • Omdat de tekst wordt voorgelezen, behandel je het als een zin. Dat betekent dus ook dat je ‘m afsluit met een punt. De software herkent de zin als zin en kan het zo voorlezen.
  • Ook als je een onderschrift bij je foto zet, is een alt-tekst niet nodig. Het onderschrift vervangt dan de alt-tekst.

Doe het voor je bezoeker en voor SEO…

Voor je bezoeker en voor SEO

De afbeeldingen zijn er vooral voor je bezoeker. Ze zorgen voor afwisseling van de tekst, ondersteunen je tekst en maken je webpagina’s duidelijk en overzichtelijk. Daarnaast helpen ze Google om je pagina’s beter te begrijpen. Zeker als je de eerder genoemde punten gebruikt voor de juiste omschrijvingen draagt het dus bij aan je SEO.

Optimaliseer je afbeeldingen en win van je concurrenten

Even alles op een rijtje. Optimaliseer je afbeeldingen en profiteer van SEO-voordeel, maar help ook je (visueel beperkte) bezoeker door:

  1. te beginnen met een goede bestandsnaam
  2. afbeeldingen in de juiste afmetingen te uploaden
  3. alt-tekst toe te voegen, behalve bij decoratieve afbeeldingen en afbeeldingen met onderschrift

Verwacht geen wonderen qua SEO, het zorgt er sowieso wel voor dat de bots je pagina nog beter begrijpen. En dat is sowieso positief voor je vindbaarheid.

Verder: in januari 2016 werd bekend dat Google afbeeldingen niet regelmatig indexeert. Wijzigingen hebben meestal dus niet snel impact. Deze indexering geldt wel met name voor Google Images. Ik verwacht wel betere resultaten voor jouw pagina’s als geheel wanneer je de afbeeldingen optimaliseert.

Paste jij de titels van je afbeeldingen al aan voordat je ze ging uploaden? Ik ben benieuwd of je dit belangrijke detail al kende.

25 antwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Heb jij hier specifieke vragen over Carola? Ik kan er zo een blog over schrijven hoor. Het lijkt mijzelf alleen een heel logisch principe. Dus als jij er specifieke punten in behandeld wilt zien, laat dat zeker even weten!

  1. Eduard de Boer
    Eduard de Boer zegt:

    Hoi Nathan,

    Goed advies! Ik zou er ook nog aan willen toevoegen dat het voor lokale SEO (bijv. voor kleine ondernemers) nuttig kan zijn om de foto’s de geotaggen (indien van toepassing) en dus te koppelen aan de bedrijfslocatie. Ook opnemen van een citation in de afbeelding lijkt te kunnen bijdragen.

    Tot zover mijn 2 cent ;-)

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Dank voor je reactie en je input Eduard. Geotaggen lijkt me inderdaad een goede aanvulling voor lokale vindbaarheid. Maar als ik het goed heb, gebeurt dat alleen bij camera’s met GPS, en die zal niet iedereen hebben. Of heb ik het mis?

  2. Rick
    Rick zegt:

    Heel erg duidelijk de informatie op je blog!
    Ik lees het met plezier weer terug.
    Mocht ik nog vragen hebben dan kom ik er snel op terug!
    Groet Rick

    Beantwoorden
  3. Dominique
    Dominique zegt:

    Hoi Nathan, bedankt voor je tip, ik was al een tijdje begonnen afbeeldingen op te slaan met goede namen. Maar ik kan in WordPress het volgende nog aanpassen: Titel-Onderschrift-Alttekst-Beschrijving. Zijn al deze items van belang om in te vullen en kun je dan dezelfde tekst herhalen voor extra consistentie? Maw welke tekst heft welk doel en moet dus hoe ingevuld worden. Alvast bedankt voor je antwoord en succes met je website. Groeten, Dominique

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Dank voor je reactie, je bent goed op weg Dominique. De belangrijkste onderdelen om te gebruiken zijn bestandsnaam en alt-tekst. De Titel wordt veelal direct overgenomen vanuit de bestandsnaam van de afbeelding wanneer je deze uploadt. Die kun je gerust laten staan. De alt-tekst (of Alt Tag) biedt je de mogelijkheid nog wat toe te voegen aan de titel, of de afbeelding iets meer te omschrijven. Dit is de tekst die verschijnt wanneer je met de muis over de afbeelding hovert. Deze tekst wordt onder andere ook door blinden en slechtzienden gebruikt, dit is de tekst die hen wordt voorgelezen.

      Je kunt de alt-tekst een kopie laten zijn van de titel, mooier is het als je er wat extra aandacht aan besteedt om deze iets omschrijvender te laten zijn.

    • Jeroen Fleuren
      Jeroen Fleuren zegt:

      Hoi Nathan,

      Even inhaken op deze vraag van Dominique. Tegenwoordig kun je in WP de titel niet meer invoeren/veranderen? De beschrijving is dit nu wel of geen must om in te vullen?

      Bedankt, gr Jeroen

    • Nathan Veenstra
      Nathan Veenstra zegt:

      De laatste keer dat ik een artikel schreef, kon ik gewoon nog een titel plaatsen. Net ook nog getest, dus check dit even met jullie webbouwer.

      De beschrijving is beslist geen must, dus daar zou ik geen tijd aan besteden. SEO-technisch levert het je in ieder geval niks op.

  4. Denise
    Denise zegt:

    Allereerst wil ik zeggen dat je blogs veel info geven en leerzaam zijn! :)

    Op dit puntje loop ik echter even klem. Is het gezien je SEO beter om een foto te uploaden met direct de juiste titel of maakt het niet uit als ik die titel na het uploaden aanpas?

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Dank je wel voor de complimenten Denise. Dat is ook wat ik wil bereiken, mooi om te lezen dat dat dus ook lukt :-)

      In principe is het beter om het vanaf het begin goed te doen. Dat betekent namelijk dat Google direct die woorden uit je bestandsnamen (en alt-tekst) oppakt en meeneemt voor de indexering. Achteraf is geen ramp, dat kan je uiteindelijk alsnog betere posities opleveren. AL is dat wel afhankelijk van de concurrentie. Garanties zijn wat betreft SEO niet zomaar te geven. Uiteindelijk is het Google die bepaalt. Jij kunt alleen maar zo goed mogelijk je best doen om Google te helpen jouw webpagina’s te begrijpen :-)

    • Denise
      Denise zegt:

      Bedankt Nathan voor je reactie!

      Mijn site draait nu sinds maart dus wat is voor mij verstandiger om te doen? Alle foto’s opnieuw titels geven en opnieuw uploaden en op me site zetten en de huidige erna verwijderen. Of kan ik beter van de huidige foto’s de titels veranderen?

      Groetjes Denise

    • Nathan Veenstra
      Nathan Veenstra zegt:

      Zeker als je website nog niet zo lang online is, is het verstandig nu je foto’s de juiste bestandsnamen te geven en te uploaden. Voeg dan ook gelijk goede alt-teksten/alt-tags toe. Als je dat nu doet, is het nog te overzien. Als je serieus met je website bezig bent, breidt deze zich uit en dat betekent ook meer afbeeldingen. Als je dan overal weer onderzoek naar moet doen en het moet aanpassen…

      De bestandsnamen zorgen voor de (interne) link naar de afbeelding. Als daar relevante woorden voor die pagina in staan, dragen die bij aan je vindbaarheid. En nu ik het zo schrijf, bedenk ik: tijd om dit artikel te updaten en nog duidelijker te maken. :-)

  5. Miranda Wolf
    Miranda Wolf zegt:

    Hoi Nathan, ik maak op dit moment productfoto’s voor een webshop. Nu vraagt mijn opdrachtgever hoe het zit met het plaatsen van dezelfde productfoto op verschillende pagina’s of andere sites waar opdrachtgever de productfoto’s gaat plaatsen. Stel dat dit op 4 verschillende “plekken” gebeurd moet ik dan 4 c dezelfde foto maken van hetzelfde product? Omdat volgens opdrachtgever de unieke metadata van iedere afbeelding ook meetelt met hoger in de ranking komen bij Google. Ik heb deze vraag nog nooit eerder gehoord van een opdrachtgever en ben zelf ook heel benieuwd of dit meespeelt.

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Dit is een interessante en (vrij) complexe vraag. Er komt meer bij kijken dan wat je nu aangeeft. Want: het product is waarschijnlijk wel hetzelfde, dan is de bestandsnaam in ieder geval gewoon de basis en mag/kan die gelijk blijven. In principe kan de opdrachtgever ook kiezen voor een andere bestandsnaam, zeker wanneer de foto op een andere website geplaatst wordt.

      Voor SEO is de bestandsnaam echt de basis voor met name Google Images. Voor vindbaarheid draagt de alt tekst (of het alt-attribuut) het nodige gewicht. En dan is de vraag wat jouw opdrachtgever bedoelt met metadata. Niet alle metadata die een digitale camera meegeeft wegen echt mee. Sterker nog: Google zegt bijvoorbeeld geo-tags niet (meer) mee te nemen, omdat die niet echt altijd even relevant of nuttig bleken. Dus de metadata van de foto zou ik niet overschatten.

      Kun je hiermee verder zo?

  6. Joke
    Joke zegt:

    HI Nathan, dankjewel voor je duidelijke blog! Ik ga zeker mijn bestandsnamen even nalopen. Maar voordat ik dat doe zou ik je graag nog iets vragen. Ik gebruik momenteel spaties in bestandsnamen, kan ik die beter vervangen door dashes? En is het goed om je bedrijfsnaam te verwerken in de bestandsnaam? Bijvoorbeeld: bedrijfsnaam-zon-mercurius.JPEG?

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Goede vraag Joke. En zelfs nog dubbel ook qua antwoord. Bij mij werkt het prima om bestandsnamen met spaties te gebruiken. In mijn WordPress theme worden de spaties automatisch omgezet naar koppeltekens (dashes). Dat gebeurt niet altijd, dus daarom is het eigenlijk wel het verstandigst om de spaties te vervangen door koppeltekens.

      Tenzij je weet dat het in jouw CMS ook gewoon goed wordt omgezet. Dat zou je natuurlijk met een afbeelding kunnen testen.

  7. Nathan Veenstra
    Nathan Veenstra zegt:

    Het is echt iets dat nog vaak misgaat Carola. En ik zie zelfs in blogs over het optimaliseren van afbeeldingen dat juist dit wordt vergeten. Of zouden ze het bewust voor je achterhouden? Ik hoop het niet, maar ik bied graag 100% transparantie in dit soort zaken.

    Beantwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

You have to agree to the comment policy.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.