Complete Uitleg Over Webshop Afbeelding Optimalisatie voor Google (SEO)
Webshops staan bol van de afbeeldingen. Vanaf de homepage tot de bedankt-pagina na een aankoop. Op elke pagina staat tenminste één afbeelding.
Terecht.
Je webshop kan niet zonder afbeeldingen. Zonder afbeeldingen daalt je conversie naar 0.
Geen aanrader.
Waarom je Webshop Niet Zonder Afbeeldingen kan
Daarnaast zijn afbeeldingen een integraal onderdeel van de content op elke pagina en daarmee essentieel om te scoren in Google. Google beloont doorgaans pagina’s met meer media erop zoals afbeeldingen en video’s. Maar het heeft ook effect op de laadsnelheid van je webshop.
Niet alleen is laadsnelheid een ranking factor, ook bepaalt je laadsnelheid of bezoekers iets gaan kopen op je webshop. Als het steeds 10 seconden duurt voordat een pagina geladen is, haken bezoekers snel af.
Bekijk hier vier onderzoeken:
Met een trage laadsnelheid zijn bezoekers niet blij en dat schaadt je positie in Google meestal. Bijvoorbeeld doordat bezoekers direct weg klikken. Combineer dat met duizenden (zo niet tien- of honderdduizenden) pagina’s die een webshop al snel heeft en je hebt een recept voor een trage webshop. Als je iets niet wilt is het een trage webshop. Je wilt een turbo-snelle webshop.
De laatste reden waarom afbeeldingen op je webshop zo belangrijk zijn, is omdat ze in Google getoond worden.
Kijk maar eens naar het zoekresultaat wanneer je zoekt op blauwe jurk (maandelijks zoekvolume = 4.400).
Daarnaast zoeken mensen er ook op via Google afbeeldingen:
Daar wil je als webshop uiteraard tussen staan!
Hieronder staan alle technische zaken die je moet regelen om dit voor elkaar te krijgen.
Afbeelding Bestandsgrootte Zo Klein Mogelijk Maken
De eerste stap in afbeelding optimalisatie is ervoor zorgen dat je afbeeldingen zo klein mogelijk zijn in bestandsgrootte, zonder dat dit afdoet aan de kwaliteit die de bezoeker ervaart. Dus niet of een afbeelding 100 * 100 of 500 * 500 pixels groot is, maar of de afbeelding 100 kb of 10 mb groot is.
Als vuistregel wil je dat elke afbeelding maximaal 200 kb groot is. Waarbij altijd geldt dat hoe kleiner de afbeelding is, hoe beter.
Voor je beeldvorming 1 mb is ongeveer 1000 kb.
Dus wanneer je foto’s uploadt die een bestandsgrootte hebben in de mb’s, dan is dat veel en veel te groot.
Er zijn twee manieren om de bestandsformaten te verkleinen: Tijdens het uploaden of voordat je upload.
Afbeelding Verkleinen Tijdens het Uploaden
Alle afbeeldingen moeten worden geüpload. Of dat nu automatisch of handmatig gaat, het moet gebeuren.
Je kan een technische oplossing (laten) inbouwen, zodat foto’s automatisch verkleind worden wanneer je ze uploadt.
Hoe je dit realiseert hangt sterk af van het webshop platform. Je kan hier een PHP script vinden wat gebruikt kan worden als basis van een automatische verkleiner. Dit is veruit het gemakkelijkste. Je hoeft er verder niet meer over na te denken en alles is geregeld.
Het nadeel is dat het een behoorlijk investering kan zijn om dit te (laten) ontwikkelen.
Afbeelding Verkleinen Voordat Je Upload
De meeste webshops verkleinen de afbeeldingen voordat deze geüpload worden. Bijvoorbeeld handmatig in Photoshop of via een van de vele (gratis) tools die er zijn, zoals Paint.
Er zijn talloze tools waarmee je handmatig of via bulk het formaat van afbeeldingen kan verkleinen. Op deze pagina kan je lijsten vinden met tools, online tools en scripts die je zelf kan aanpassen: Tools, software en scripts om afbeelding bestandformaten te verkleinen
Tools om Afbeeldingen te Verkleinen
Mocht je geen script of software hebben om afbeeldingen te vergroten, zijn er ook tools die afbeeldingen verkleinen. Ook in bulk. Hieronder een lijst met alle gratis tools:
Verkleinen van afbeeldingen per stuk
Online
- JPEG afbeeldingen verkleiner
- JPEG Verkleiner
- JPG Mini
- Tiny PNG PNG afbeeldingen verkleiner
- Puny PNG (PNG Verkleiner)
- Kraken.io
- Image Optimizer
Applicaties
Verkleinen van afbeeldingen in bulk
Verschillende Soorten Afbeeldingen
Er zijn verschillende soorten bestandsformaten voor afbeeldingen. Op het eerste gezicht lijken ze hetzelfde, maar de verschillen zijn enorm!
De meest gebruikte bestandsvormen zijn:
- .jpg / .jpeg
- .png
- .gif
- .bmp
Hieronder staat exact dezelfde foto, met dezelfde lengte en breedte (550 * 790) en hetzelfde bronbestand.
Kijk maar hoe anders de afbeelding eruit ziet:
.jpg / .jpeg Bestandsformaat (Grootte = 61 kb)
.png Bestandsformaat (Grootte = 316 kb)
.gif Bestandsformaat (Grootte = 132 kb)
.bmp Bestandsformaat (Grootte = 426 kb)
Het eerste dat opvalt is het verschil in kleur. De .jpg en .png afbeeldingen zijn het scherpste en behouden de kleur het meest vast zoals deze in het origineel is.
De .gif en .bmp afbeeldingen zijn aanzienlijk minder scherp. Alleen al om die reden zijn .gif en .bmp bestanden niet geschikt om te gebruiken voor je webshop.
Daarnaast valt op dat het .jpg bestand ongeveer 5x kleiner is dan het .png bestand, terwijl ze er hetzelfde uitzien. Dat maakt een .jpg bestand bij uitstek het beste om te gebruiken voor elke webshop. Dit bestand is klein (dus snel geladen) en scherp, ook als je inzoomt.
Afbeeldingen Optimaliseren voor Google (SEO) met Teksten
Naast het juiste bestandsformat en bestandsgrootte is er nog een belangrijk punt om te optimaliseren. Dit is het zo effectief mogelijk instellen van de (meta) data en teksten in en rondom de afbeeldingen.
Er zijn vier soorten data die je kan gebruiken voor SEO:
- Naam van de afbeelding
- Alt tag
- Title tag
- Caption
Naam van de afbeelding
De naam van de afbeelding is de bestandsnaam die de afbeelding heeft wanneer deze op je computer staat. In veel gevallen maakt een camera van de bestandsnaam iets van letters en cijfers wat niets betekent. Bijvoorbeeld fpr0584.jpg.
Op de computer kan je simpel zien wat de namen zijn van jouw foto’s:
Google kan hier weinig mee. Het biedt geen houvast om te bepalen waar de foto overgaat. Hernoem dus altijd je foto naar een naam die overeen komt met wat erop staat. Bijvoorbeeld zwarte-nikes-maat-46.jpg of nike-schoenen.jpg.
Bij de meeste producten staan meerdere foto’s. Geef deze dan een iets andere naam. Bijvoorbeeld:
- nike-air-jordan-46-voorkant.jpg
- nike-air-jordan-46-bovenkant.jpg
Doe dit voor alle afbeeldingen die je uploadt. Op je homepage, categorie- en productpagina’s.
Het handmatig wijzigen van foto’s is vrij eenvoudig. Klik met je rechtermuisknop op de afbeelding en klik op naam wijzigen.
De makkelijkste manier om dit te doen is door het te automatiseren. Zeker wanneer je dit in grote hoeveelheden doet.
Laat de webshop automatisch bestanden hernoemen wanneer je deze uploadt. Laat bijvoorbeeld de hoofdfoto veranderen in de naam van het product.
- De tweede foto krijgt productnaam + “bovenkant”,
- De derde foto krijgt de productnaam + “onderkant”,
- Enzovoorts.
Op deze manier weet je zeker dat alle afbeeldingen die geüpload worden automatisch de juiste bestandsnamen krijgen.
Afbeelding Alt-Tag
De alt-tag van een afbeelding is een specifieke naam die je aan elke afbeelding kan meegeven. Alt-tag staat voor alternate-tag ofwel alternatieve-tag.
Dit betekent dat wanneer de afbeelding op je website niet werkt, deze tekst op de website komt te staan.
Je ziet deze tekst dus niet als de afbeelding wel goed werkt.
Hieronder een voorbeeld van wanneer je de alt-tekst ziet, omdat de afbeelding niet goed werkt.
Het invoeren van een alt-tag moet altijd gebeuren via het webshop platform. Per platform verschilt het hoe dit eruit ziet. In de meeste gevallen kan je dit invoeren net wanneer je een foto hebt geüpload.
Ook het invoeren van de alt-tag kan je het beste automatiseren wanneer je webshop groter wordt. Dit doe je bijvoorbeeld door de bestandsnaam te dupliceren als alt-tag of door de productnaam te kopiëren.
Title Tag
Elke afbeelding heeft ook een title tag ookwel titel-tag genoemd. Deze tekst verschijnt wanneer je met je muis op een afbeelding gaat staan. Bijvoorbeeld (het rood omcirkelde):
Net als de alt-tag wordt de title tag niet automatisch toegevoegd. Ook deze tag kan je handmatig invullen na het uploaden van een product.
De titel tag is bedoeld om bezoekers meer informatie te geven over een product. Extra informatie over wat je ziet bijvoorbeeld. Niet elke webshop toont deze. Bijvoorbeeld wanneer er een zoom-functie op de website staat.
Autobandenmarkt.nl maakt hier gebruik van:
Als je het invullen van de titel tag wilt automatiseren dan kan je de bestandsnaam of alt-tag over laten nemen.
Caption van de afbeelding
De caption van een afbeelding is het onderschrift. De woorden die onder een afbeelding staan. Hieronder een voorbeeld:
Afbeelding captions worden doorgaans niet veel gebruikt door webshops. Dit heeft drie redenen.
- Omdat de caption te zien is door alle bezoekers moet de zin logisch en kloppend zijn.
- Het past vaak niet binnen het design van de pagina.
- De SEO waarde van een caption tag is niet zo hoog en daarmee is de prioriteit om deze in te zetten niet zo hoog.
Het automatiseren van de titel tag is een stuk moeilijker dan de andere tags, omdat het gaat om goed lopende zinnen. Daarom raden we alleen aan om dit te doen door er een simpele tekst achter te zetten zoals: voorbeeld: [product naam].
Content Delivery Network of Content Distribution Network (CDN)
Een CDN is een plek waar je al jouw afbeeldingen, documenten, video’s, scripts en audio kan plaatsen.
Dit is een netwerk van servers verspreid over meerdere locaties. Meestal wereldwijd.
Vervolgens legt jouw webshop een link met dit netwerk en als een bezoeker op een pagina komt, dan verstuurd het CDN razendsnel de gewenste content naar de bezoeker toe.
Daarnaast zorgt een CDN netwerk ervoor dat alle pagina tijdelijk worden opgeslagen voor een bezoeker, zodat niet alle elementen elke keer opnieuw moeten worden geladen als de bezoeker van pagina wisselt.
Bijvoorbeeld het logo, navigatie, bepaalde beelden die overal op de webshop staan.
Samenvattend worden alle zware elementen van een pagina geladen vanaf mega sneller servers.
Dit zorgt ervoor dat jouw webshop supersnel is.
Probeer wel een CDN netwerk te zoeken wat de servers zo dichtbij mogelijk heeft staan, want ook dit heeft impact op de laadtijd van je webshop. Als de servers in Nederland staan is dat perfect, maar een ander land in Europa is ook goed.
De Verenigde Staten, Midden-Oosten of Afrika of nog verder werkt vaak niet goed in de praktijk.
Dit is anders dan met de normale manier manier waarbij alle content op 1 webshop staat en dit allemaal vanaf 1 server geladen moet worden.
Iedere keer wanneer een bezoeker een pagina bezoekt moet er van alles geladen worden. Dat betekent dat er bandbreedte en geheugen van de server gevraagd wordt waar jouw webshop op gehost staat.
Die server wordt dus enorm bepalend voor de laadsnelheid voor de webshop.
Voor- en nadelen CDN
Het grootste voordeel van het CDN netwerk, zal wel duidelijk zijn: snelheid.
En webshop snelheid zorgt voor betere scores in Google en hogere conversies.
Meestal is de laadsnelheid pas een probleem bij hele grote webshops. Tienduizenden producten met minstens tienduizenden bezoekers en een server die dat moeilijk aankan.
De grootste nadelen van het gebruik van een CDN bestaat uit een aantal twijfels. Twijfels die moeilijk te bewijzen zijn, maar een zekere logica in zich hebben.
Locatie
Een van die twijfels is dat een groot en belangrijk deel van pagina content gehost wordt op een andere server in een ander land.
En dat kan potentieel desastreus zijn voor je lokale vindbaarheid. Want het is niet logisch dat een fietsenmaker in Enschede zijn website host in Zweden.
Duplicate Content
Omdat heel veel van je content op het CDN staat, kan Google dit zien als duplicate content. En dat kan negatief uitpakken voor jouw webshop.
Daarom is het belangrijk dat je altijd een rel canonical-tag toevoegt aan al je content wat op je CDN staat.
Ook kan je dit vermijden door je robots.txt goed in te stellen, zodat content op een CDN niet wordt geïndexeerd.
Backlinks Tellen Niet
Het allergrootste probleem van een CDN is dat wanneer mensen linken naar een afbeelding of andere content die op het content delivery netwerk staat deze link niet voor je webshop telt.
Het bestand staat immers niet op jouw webshop, maar op het netwerk. Afhankelijk van de producten die je verkoopt kan dat significant zijn. Sommige webshops trekken enorm veel backlinks naar de afbeeldingen. Voor sommige webshops is dat dus desastreus.
Hoe Installeer Je een CDN voor Jouw Webshop?
Het instellen van een CDn voor jouw webshop is meestal vrij gemakkelijk. Het moet alleen erg nauwkeurig gebeuren.
Je moet eerst een cdn provider vinden. Hieronder staan 5 bekende:
In theorie moet het volgende gebeuren: de locatie van content die op je webshop staat moet je vervangen door de locatie op het content delivery network.
Bijvoorbeeld, de afbeelding http://klikproces.nl/wp-content/uploads/2017/06/SEO-Google-meme.jpg
wordt dan
Dit betekent dat alle belangrijke statische content moet worden verplaatst naar het CDN.
Dat kan op twee manieren:
Je kan alle bestanden handmatig uploaden naar het netwerk of je kan het CDN de bestanden zelf laten ophalen.
Met beide methodes moet je heel sterk op 1 ding letten: als je de naam van een bestand wijzigt, dan moet je deze ook op het CDN wijzigen anders ligt er geen link meer tussen beide bestanden.
In de meeste gevallen is het zo simpel als het dynamisch maken van alle URL’s, zodat deze niet verwijzen naar je eigen webshop, maar naar het content delivery network.
Dat kan overal in je code, zelfs in je CSS als dit geschreven is via SASS of LessCSS.
Voor een zeer gedetailleerde uitleg kan je dit lezen: Setup a CDN to speed up your website.
Alle goede CDN providers hebben ook hun eigen tutorials online staan en een klantenservice om je verder te helpen.
Al deze tips zorgen ervoor dat jouw afbeeldingen goed scoren in Google en je tegelijkertijd ook je webshop snel houdt. Laat weten hieronder in de reacties of je iets aan deze tips hebt gehad en hoe je ze hebt toegepast.
