Ik krijg regelmatig vragen over afbeeldingen op WordPress websites. Een vaak terugkerende vraag is “Wat is de beste afmeting van een foto op een website of in een blog?”. Wat mij ook vaak wordt gevraagd is “Wat is nu eigenlijk een alt-tekst?” en “Hoe krijg ik een bepaalde foto uit mijn blog in Facebook of Twitter wanneer ik mijn blog daar deel?”.

De beste afmeting van afbeeldingen op WordPress websites

De afmeting van je afbeeldingen heeft invloed op de snelheid van je website en dit heeft weer invloed op je ranking in Google. Dit is eigenlijk sinds 2019 een stuk belangrijker geworden.

Upload de afbeelding dan ook in het formaat dat je deze op je website getoond wilt hebben. Specifiek betekent dit voor foto’s die je klikbaar maakt: de breedte maximaal 1920 pixel maken of maximaal 1200 pixels hoog. Voor niet klikbare afbeeldingen gebruik je de ruimte die beschikbaar is voor de afbeeldingen! Zo heeft Divi, het thema waar ik veel mee werk, een handige overzicht.

Hier heb je gelukkig geen duur fotobewerkingsprogramma voor nodig. Ikzelf gebruik bijvoorbeeld het gratis programma Irfanview. Met dit programma kun je niet alleen foto’s verkleinen, maar ook heel eenvoudig uitsnedes maken.

Vervolgens zul je de bestandsgrootte van de foto’s willen verkleinen door gebruik te maken van het TinyPNG. Ook kun kun je gebruik maken van de gratis plugin reSmush.it waarmee je meerdere op je website geplaatste afbeeldingen in 1 keer kunt verkleinen. Je kunt deze plugin deactiveren wanneer je gedurende een periode geen afbeeldingen aan je website toevoegt.

Formaat WooCommerce afbeeldingen

WooCommerce adviseert een minimaal formaat van 800 x 800 pixels en een maximaal formaat van 1000 x 1000 pixels.

Een nieuw afbeeldingstype

Naast png en jpg is er tegenwoordig een nieuw afbeeldingstype voor afbeeldingen op WordPress websites: webp. Een naar wepb geconverteert jpg of png bestand, neemt in grootte enorm af. 95% van bezoekers kunnen webp afbeeldingen zien, maar bezoekers die Safari op oudere macOS versies gebruiken, zien de afbeeldingen niet.

Dit is te ondervangen door de Webp Express plugin te installeren.  Browsers die webp-afbeeldingen niet accepteren, zullen de oorspronkelijke jpg of png afbeelding laten zien. De Buro RaDer website maakt gebruik van wepb afbeeldingen door middel van de Wepb Express plugin.

Het nut van een fotobijschrift van de afbeeldingen op WordPress websites

Ik krijg ook regelmatig de vraag “Is het nodig om onder elke foto een bijschrift te plaatsen?”. Het gebruik van bijschriften is belangrijk voor de SEO. Fotobijschriften zijn samen met kopjes en afbeeldingen datgene waar bezoekers als eerste naar kijken. Een dergelijk bijschrift moet natuurlijk wel meerwaarde voor de bezoeker hebben. Verplaats je hiervoor in de bezoeker.

Bestandsnaam, alt- en title teksten

En als we het dan toch over afbeeldingen op WordPress websites hebben denk dan ook aan:

• De juiste bestandsnaam – hier kijkt Google namelijk ook naar. Dus niet DSC63240.jpg maar bijvoorbeeld website-stappenplan-bouw.jpg waarbij website vooraan staat omdat dit in dit geval het belangrijkste zoekterm is. Je ziet dat ik in plaats van spaties een min-teken heb gebruikt. Op die manier kan Google de afzonderlijke woorden lezen.
• De alt-tekst is de tekst die zichtbaar is wanneer de afbeelding om de één of andere reden niet getoond wordt. Tevens is deze zeer belangrijk voor mensen met een visuele handicap. Via een schermlezer wordt de inhoud van een webpagina – inclusief afbeeldingen – aan hen voorgelezen. De alt-tekst zal dus duidelijk moeten omschrijven wat er op de afbeelding te zien is.
  Deze tekst zul je altijd moeten ingeven! Het is ook de tekst die in Internet Explorer verschijnt wanneer je met je muis over de afbeelding gaat. Chrome toont juist de hierna beschreven title-tekst.
  Google kijkt zeer zeker naar de alt-tekst en het is dan ook belangrijk om hier een voor de foto relevant zoekterm te gebruiken. De alt-tekst mag ook redelijk lang zijn, maar mag niet volgepropt worden met woorden waarop je gevonden wilt worden. Dit straft Google namelijk direct af!
• De title-tekst hoeft niet ingegeven te worden, maar dan verschijnt er in bepaalde webbrowsers dus geen tekst wanneer je met je muis over de afbeelding gaat. Deze tekst kan bijvoorbeeld ook gebruikt worden om bij een knop/button een extra ‘call to action’ in geven: “Nu reserveren met 10% korting”.

Foto’s die op Facebook en Twitter verschijnen manipuleren

Je kunt de afbeeldingen op WordPress websites die op Facebook en Twitter verschijnen wanneer je een web- of blogpagina deelt, manipuleren via de SEO plugins Yoast en RankMath.

In Yoast

• Ga op de betreffende pagina of betreffende blog naar het Yoast SEO gedeelte
• Klik op de social icon, een open driehoekje met 3 rondjes
• Vervolgens kun je de titel van de blog overrulen zodat de Facebook post een andere titel krijgt dan die van je blog. Tevens kun je een foto uploaden die jij bij je Facebook post getoond wilt hebben.

In Rank Math

In Rank Math werkt het eigenlijk hetzelfde:

• Ga op de betreffende pagina of betreffende blog naar het Rank Math SEO gedeelte
• Klik op de social icon, een rondje met 3 uitstekende rondjes
• Vervolgens kun je de titel van de blog overrulen zodat de Facebook of Twitter post een andere titel krijgt dan die van je blog. Tevens kun je een foto uploaden die jij bij je Facebook of Twitter post getoond wilt hebben.

Foto’s vervangen op een WordPress website

Om eenvoudig foto’s te vervangen op een WordPress website maak ik gebruik van de Enable Media Replace plugin. Je installeert en activeert de plugin en vervolgens kun je afbeeldingen en andere mediabestanden gewoon vervangen. Je hoeft het bestand dus niet meer op de pagina of in de blogpost aan te passen!

Wanneer je na het activeren van je plugin naar de mediabibliotheek gaat zul je zien dat er een extra veld is Vervang media.

Nadat je op Vervang media hebt geklikt verschijnt er een scherm waar je de nieuwe foto kunt uploaden. Na het uploaden bevestig je dit, vink je Vervang het bestand, gebruik de nieuwe naam, en update alle links aan en… klaar is Kees. Heb je het idee dat je na vervangen nog steeds de oude versie ziet? Dit kan komen omdat de oude foto in je cache (geheugen) zit. Ververs de pagina door een aantal keer op F5 te klikken of door CTRL-F5 (harde refresh) te gebruiken.

Waar haal je je afbeeldingen vandaan?

Let op dat je niet zo maar willekeurig een afbeelding van internet plukt; dit kan je duur komen te staan! Mocht je vaak afbeeldingen nodig hebben dan heb ik hier een tip: in het kader van Black Friday heeft Depositphotos elk jaar goede aanbiedingen. Bij een aantal aanbiedingen blijft het tegoed altijd geldig en de keuze op deze website is enorm! Meer informatie is te vinden op de website van Depositphotos.

Verder kun je ook gratis foto’s vinden op Pixabay, Pexels, Stocksnap, Unsplash en Freeimages.

Let op: bij gratis afbeeldingen moet je soms wel informatie toevoegen over de maker van de foto!

Met regelmaat plaats ik blogs en korte Tips & tricks. Wil je mijn tips en blogs niet missen? Schrijf je dan in voor mijn nieuwsbrief.