Een uitgelichte afbeelding, of ook wel een featured image genoemd, werkt in WordPress als een visueel uithangbord, een teken voor bezoekers dat ze van harte welkom zijn om te kijken wat er achter de link te vinden is. Het laat meestal nuttige informatie zien in de vorm van een foto of graphic, waardoor de gebruiker alvast een voorproefje krijgt van de informatie in de link.

Daarnaast is een goed verhaal niet compleet zonder een introductie, en dat is precies wat een uitgelichte afbeelding te bieden heeft. Het helpt de website door van een mogelijk erg saaie website iets moois te maken. Het doorbreekt de sleur van tekst en voegt afwisseling aan je content toe.

Dit artikel laat zien hoe je WordPress uitgelichte afbeeldingen kan repareren wanneer die niet goed weergegeven worden op je website. Er zijn een hoop manieren om dat te doen, en we zullen ze allemaal langs gaan.

Aan de slag dus!

Wat is een uitgelichte afbeelding bij WordPress?

Artikelen met uitgelichte afbeelding op het Kinsta blog
Artikelen met uitgelichte afbeelding op het Kinsta blog

Standaard wijst WordPress een uitgelichte afbeelding aan voor elke pagina en elk artikel.

Dit betekent dat je een afbeelding kan uploaden die dienstdoet als de cover van een artikel of pagina, vergelijkbaar met de cover van een boek of tijdschrift. Je kan een uitgelichte afbeelding uploaden voor elk artikel en elke pagina. Deze afbeelding wordt vervolgens gepresenteerd als de belangrijkste afbeelding voor dit item wanneer het artikel gedeeld wordt op social media of andere websites.

De uitgelichte afbeelding wordt tenslotte ook automatisch getoond wanneer je een feed of galerij maakt van je blogartikelen of pagina’s. Op die manier kan je een soort van media portfolio van je artikelen laten zien, in plaats van een saaie lijst met links.

Je hoeft niet elke keer wanneer je het artikel deelt een nieuwe versie van de afbeelding te uploaden, de afbeelding wordt gewoon uit de originele content opgehaald.

Wat moet je doen wanneer de uitgelichte afbeelding niet werkt?

Uitgelichte afbeeldingen zijn een geweldige functie, maar het kan gebeuren dat je de uitgelichte afbeelding van een artikel of pagina om één of andere reden niet kan zien. Soms komt dit door een probleem met je thema, maar het kan ook zijn dat een plugin het probleem veroorzaakt.

Het is vrij gebruikelijk om verschillende problemen tegen te komen bij uitgelichte afbeeldingen. Zo kan het zijn dat de uitgelichte afbeelding prima getoond wordt op je eigen website, maar niet goed weergegeven wordt wanneer een artikel gedeeld wordt op een sociale website zoals Facebook.

Hoe dan ook, wanneer een WordPress uitgelichte afbeelding niet goed getoond wordt kan dat nogal frustrerend zijn.

Uitgelichte afbeeldingen zijn vaak erg belangrijk voor de visuele aantrekkelijkheid van je website. Zonder automatisch uitgelichte afbeeldingen hou je alleen maar lappen tekst en links naar webpagina’s over. Het kan er ook voor zorgen dat mensen je werk minder snel delen, aangezien het veel minder aantrekkelijk is om een artikel te delen op Facebook als dat artikel geen uitgelichte afbeelding heeft.

Er zijn verschillende stappen om dit probleem op te lossen of te beperken:

  1. Kijk wat het precieze probleem is, bijvoorbeeld of de afbeelding helemaal niet geüpload wordt. Of dat de uitgelichte afbeelding niet getoond wordt op social media, maar prima werkt op je eigen website.
  2. Ga na welke WordPress problemen het probleem met je uitgelichte afbeelding kunnen veroorzaken, zoals een conflict tussen plugins of een fout bij het programmeren.
  3. Overweeg een plugin te installeren die problemen met uitgelichte afbeelding oplost zonder dat jij er hard mee bezig hoeft.

Dat is een eenvoudig proces in drie simpele stappen, maar daar gaat mogelijk een hoop achter schuil voordat je uitgelichte afbeeldingen weer perfect werken. Er kunnen allerlei redenen zijn waarom uitgelichte afbeeldingen niet meer werken, en de oorzaak wisselt per geval.

Hieronder behandelen we elk probleem dat wij kennen met betrekking tot uitgelichte afbeeldingen, en leggen de stappen die je kan nemen om het probleem op te lossen.

Waarom wordt mijn uitgelichte afbeelding niet weergegeven in WordPress?

Je ziet dat er iets niet klopt aan één uitgelichte afbeelding, of misschien zelfs aan allemaal. Wat nu?

We beschrijven zowel gebruikelijke als minder gebruikelijke problemen met uitgelichte afbeeldingen. Laten we beginnen met de makkelijkste oplossingen, zodat we ervoor kunnen zorgen dat je uitgelichte afbeeldingen in ieder geval goed geüpload worden. Vervolgens kijken we verder naar andere fouten.

Controleer dat je uitgelichte afbeeldingen op de goede manier naar WordPress uploadt

Dat klinkt misschien nogal suf, maar veel WordPress beginners weten niet precies hoe je een uitgelichte afbeelding uploadt. Geen probleem, we moeten allemaal ergens beginnen.

We raden je aan om de stappen hieronder te volgen om ervoor te zorgen dat je de afbeeldingen op de goede manier uploadt.

Opmerking: Je kan uitgelichte afbeeldingen voor WordPress uploaden naar artikelen en pagina’s, maar die basisregel verandert wanneer je dingen zoals WooCommerce productpagina’s en custom artikeltypen begint toe te voegen. Om alles overzichtelijk te houden, houden we het hier bij het uploaden van uitgelichte afbeeldingen naar normale WordPress artikelen en pagina’s – maar als je meer wil weten, hier is een volledige WooCommerce SEO handleiding dat alles & meer behandelt, inclusief Schema Markup voor je producten en meer.

Om hiermee te beginnen ga je naar je WordPress dashboard. Ga naar Posts > Add New om een nieuw artikel te maken. Je kan dit ook doen met een pagina of klik op de optie All Posts als je graag een uitgelichte afbeelding wil toevoegen aan een eerder geschreven artikel.

‘Posts > Add New’ link in WordPress dashboard
‘Posts > Add New’ link in WordPress dashboard

Voeg eventuele content toe voor je blogartikel. Vul de titel in, schrijf enkele alinea’s, en upload afbeeldingen voor het artikel.

Hou hierbij wel in je achterhoofd dat een afbeelding die je uploadt voor de content van je artikel niks te maken heeft met de uitgelichte afbeelding, zelfs al was dat de eerste foto die je toegevoegd hebt aan het artikel.

Een compleet ander deel gaat namelijk over de uitgelichte afbeelding.

Dit is geen uitgelichte afbeelding
Dit is geen uitgelichte afbeelding

Om een uitgelichte afbeelding te vinden en te uploaden ga je naar Settings voor het artikel, aan de rechterkant. Hier zie je verschillende instellingen voor het artikel, en kan je Block-specifieke instellingen zien wanneer je momenteel een WordPress Gutenberg block geselecteerd hebt.

Het tabblad
Het tabblad “Featured Image”

Zorg ervoor dat je het tabblad Post kiest.

Scrol vervolgens door de instellingen. De Featured Image Settings vind je bijna onderaan.

De instellingen voor het artikel openen
De instellingen voor het artikel openen

Klik op het paneel Featured Image om de bijbehorende instellingen te openen.

Hier zie je een knop met Set Featured Image. Als je daarop klikt ga je meteen naar de WordPress Media Library.

Maar we raden je meestal aan om te klikken op Select Image, aangezien je dan kan kiezen waar de uitgelichte afbeelding vandaan moet komen.

Klik op
Klik op “Select Image” binnen het tabblad “Featured Image”

Je ziet nu drie keuzes wanneer je een afbeelding wil uploaden voor een website die door Kinsta gehost wordt:

  • Media Library: Je WordPress mediaverzameling, waar je afbeeldingen kan uploaden naar je server, deze afbeeldingen kan bewerken en ze kan opslaan om ze later te gebruiken, of ze meteen aan je artikelen en pagina’s kan toevoegen.
  • Google Photos: Een cloudbibliotheek met je eigen persoonlijke foto’s. Je moet inloggen en Google Photos koppelen om ze te uploaden naar WordPress.
  • Pexels Free Photos: Een gratis verzameling van professionele foto’s die je kan doorzoeken en kan gebruiken op je website. Je moet hierbij soms aangeven wie de afbeelding gemaakt heeft (dit wordt aangegeven wanneer je een Pexels foto uploadt naar WordPress).

Kies een optie op basis van of je een eigen foto hebt en waar je die hebt opgeslagen.

Uploaden van een afbeelding uit de Media Library
Uploaden van een afbeelding uit de Media Library

Als je kiest voor de Media Library krijg je te zien welke afbeeldingen je eerder al naar WordPress hebt geüpload. Je kan een afbeelding kiezen en vervolgens klikken op Set Featured Image.

In plaats daarvan biedt de Media Library ook een tabblad Upload Files, waar je bestanden van je computer kan uploaden naar je WordPress Media Library.

Kies een afbeelding die je wil instellen als uitgelichte afbeelding
Kies een afbeelding die je wil instellen als uitgelichte afbeelding

De Pexels verzameling werkt net zoals je eigen Media Library, alleen heb je dan de keuze uit allerlei professionele foto’s. Je kan op bepaalde woorden zoeken, en de gewenste afbeelding als uitgelichte afbeelding instellen. Nogmaals, de afbeeldingen van Pexels zijn gratis, maar je moet de fotograaf wel noemen en linken, wat automatisch gebeurt wanneer je Pexels gebruikt via WordPress.

Kies het media-item en klik op
Kies het media-item en klik op “Select”

Een thumbnail van de gekozen afbeelding verschijnt onder Featured Image in de Post Settings.

Dit betekent dat wanneer je op Save Draft of Publish klikt, deze afbeelding actief blijft voor het artikel totdat je het zelf verwijdert.

Je zal ook enkele andere knoppen zien, zoals Select Image, Replace Image, en Remove Featured Image. Hiermee kan je de huidige uitgelichte afbeelding veranderen of verwijderen.

WordPress uitgelichte afbeelding als thumbnail
WordPress uitgelichte afbeelding als thumbnail

Om verder te gaan en je uitgelichte afbeelding te zien klik je op Publish.

De Preview knop zorgt ervoor dat je een uitgelichte afbeelding kan testen, maar je publiek kan deze pas zien als je op Publish klikt.

Klik op
Klik op “Publish”

Afhankelijk van de instellingen van je thema en enkele andere factoren, zoals sommige plugins die instellingen van afbeeldingen veranderen, zou je uitgelichte afbeelding de eerste afbeelding in je gepubliceerde artikel moeten zijn.

Zoals je kan zien wordt de afbeelding die we in de content hebben toegevoegd pas als tweede afbeelding getoond, aangezien eerst de uitgelichte afbeelding verschijnt.

Een voorbeeld van een uitgelichte afbeelding
Een voorbeeld van een uitgelichte afbeelding

Een andere manier om je uitgelichte afbeelding te zien is door Recent Posts galerijen of feeds van je blogartikelen te maken, meestal ergens anders op je website.

Zo hebben wij bijvoorbeeld een Recent Posts feed gemaakt op de startpagina van onze testsite. De uitgelichte afbeeldingen van alle blogartikelen verschijnen in die feed als kleinere thumbnails, waardoor bezoekers die op zoek zijn naar bepaalde content een meer visuele ervaring krijgen.

Galerij van artikelen met de uitgelichte afbeeldingen
Galerij van artikelen met de uitgelichte afbeeldingen

Wanneer je problemen met de uitgelichte afbeeldingen niet komen door het uploaden, lees dan vooral verder.

Per ongeluk een coverafbeelding kiezen in plaats van een uitgelichte afbeelding in WordPress

Een andere eenvoudige maar veelgemaakte vergissing van WordPress gebruikers is dat ze een coverafbeelding toevoegen aan een artikel of pagina, en aannemen dat deze net zo werkt als een uitgelichte afbeelding.

Coverafbeeldingen en uitgelichte afbeeldingen werken inderdaad op soortgelijke manieren, bijvoorbeeld door het tonen van een grote foto bovenaan een artikel of pagina. Toch zijn er belangrijke verschillen. Het is zelfs zo dat WordPress het Cover block pas recentelijk aan de Gutenberg editor heeft toegevoegd. Daarom komt dit probleem alleen maar voor bij mensen die deze editor gebruiken.

Het verschil tussen een coverafbeelding en een uitgelichte afbeelding

Een coverafbeelding biedt een afbeelding over (bijna) de hele breedte van het scherm, die je overal op de site kan plaatsen. Dit wordt meestal gebruikt om aan te tonen dat er een nieuw artikel of nieuw gedeelte begint. Je kan een Cover-block overal in een artikel of pagina toevoegen, dus niet alleen bovenaan. Daarom is een coverafbeelding een integraal onderdeel van het artikel of de pagina, en geen apart item zoals een uitgelichte afbeelding.

Een uitgelichte afbeelding functioneert als de primaire afbeelding van het artikel, die het hele artikel in één afbeelding samenvat, voor het delen ergens anders op je website of op social media. De uitgelichte afbeelding heeft dan ook een aparte plek waar je afbeeldingen kan uploaden, dus niet binnen de content editor. De afbeelding is meestal bovenaan een artikel of pagina te vinden.

De code van je thema bepaalt meestal de plaats en formatting van je uitgelichte afbeelding. Daarom heb je wellicht custom code nodig om de weergave van je uitgelichte afbeelding aan te passen.

Als laatst biedt een coverafbeelding eigen unieke mogelijkheden voor aanpassingen, zoals de optie om tekst bovenop de afbeelding te plaatsen, of om een filter te gebruiken. In het algemeen kan je een coverafbeelding daardoor veel meer bewerken vanuit het WordPress dashboard dan een uitgelichte afbeelding.

Een coverafbeelding in actie (en hoe dit verschilt van een uitgelichte afbeelding)

We bekijken de belangrijkste verschillen tussen coverafbeeldingen en uitgelichte afbeeldingen nog wat beter. Je kan ze allebei openen en implementeren door naar het menu Posts of Pages te gaan en daar een nieuw item aan te maken, of door naar een oude pagina of artikel te gaan.

Je vindt de Featured Image in het rechtervenster met Settings voor alle artikelen en pagina’s. Dit is dus geen onderdeel van de hoofdcontent.

Uitgelichte afbeelding in de praktijk
Uitgelichte afbeelding in de praktijk

Een Cover block daarentegen zit in de Gutenberg Block Library, die je kan openen door op Add Block te klikken binnen de editor. De Add Block knop ziet eruit als een “+“-teken.

Klik op
Klik op “Add Block”

Je kan zoeken naar de Cover block of door de verzameling scrollen tot je de block ziet.

Klik op de Cover block om deze toe te voegen aan je artikel of pagina.

Kies de Cover block
Kies de Cover block

De Cover block wordt toegevoegd aan de content editor, op een heel andere plek dan waar we de uitgelichte afbeelding zagen.

Je kan een afbeelding uploaden voor je coverafbeelding door op Select Media of Upload te klikken.

Selecteer media als cover-afbeelding
Selecteer media als cover-afbeelding

De nieuwe cover is nu te zien in de editor preview en je kan ook de instellingen van het block aanpassen aan de rechterkant.

Dat is een cover-afbeelding
Dat is een cover-afbeelding

Het is ook vrij gebruikelijk om de cover zodanig aan te passen dat de afbeelding over de hele breedte te zien is, waardoor het nog beter werkt als visuele afscheiding tussen twee delen of twee artikelen.

Kies de uitlijning voor je cover-afbeelding
Kies de uitlijning voor je cover-afbeelding

In het algemeen, wanneer je een afbeelding bewerkt zoals een coverafbeelding of een gewoon media-item, dan gebruik je geen uitgelichte afbeelding binnen de editor van WordPress.

Dit kan de oorzaak zijn van je problemen met de uitgelichte afbeelding. Een coverafbeelding, of eigenlijk alle afbeeldingen die je toevoegt aan de content van een artikel, zal niet ergens anders (zoals in een lijst met Recent Posts) te zien zijn, zoals dat wel gebeurt bij de uitgelichte afbeelding.

Wat moet ik doen als er een dubbele uitgelichte afbeelding is?

Sommige WordPress gebruikers doen alles helemaal goed om een uitgelichte afbeelding te uploaden, maar realiseren zich dan dat de uitgelichte afbeelding twee keer verschijnt. Je ziet dit vooral gebeuren binnen een lijst met artikelen, of bovenaan een pagina of artikel, waarbij je dus echt twee precies dezelfde foto’s boven elkaar ziet.

Dit komt waarschijnlijk doordat je een uitgelichte afbeelding hebt geüpload, terwijl je dezelfde afbeelding ook in je content gebruikt. Hierdoor is de afbeelding dus twee keer te zien.

Dubbele uitgelichte afbeelding
Dubbele uitgelichte afbeelding

Natuurlijk wil je dit niet. Meestal zijn dubbele uitgelichte afbeeldingen eigenlijk niet twee uitgelichte afbeeldingen, maar één uitgelichte afbeelding plus dezelfde afbeelding in de content van een artikel.

Om dit te controleren ga je naar de WordPress editor van het artikel of pagina in kwestie. Zoek het Settings paneel aan de rechterkant van de pagina. Selecteer vervolgens het tabblad Post (of Page als je een pagina bewerkt) om de instellingen te openen.

Ga naar de instellingen van het artikel
Ga naar de instellingen van het artikel

Scrol naar beneden binnen de instellingen en open het Featured Image dropdownmenu.

Bekijk het tabblad
Bekijk het tabblad “Featured Image”

Zie je dezelfde foto in het tabblad Featured Image als in je content, dan heb je het probleem gevonden.

Er zijn nu twee oplossingen mogelijk. Allereerst moet je nadenken over wat je wil bereiken. Wil je helemaal geen uitgelichte afbeelding, dan kan je die gewoon verwijderen.

We zien vaak mensen die een uitgelichte afbeelding willen en denken dat je dat via de content editor kan doen. In dat geval moet je de foto in de Featured Image laten staan en de foto in de content van je artikel verwijderen.

De uitgelichte afbeelding
De uitgelichte afbeelding

Om de betreffende Image block te verwijderen klik je op de drie puntjes die verschijnen wanneer je de block selecteert.

Klik op Remove Block onderaan de lijst.

Toon meer instellingen door op de drie puntjes te klikken
Toon meer instellingen door op de drie puntjes te klikken

Er zou nu geen afbeelding meer bovenaan het artikel moeten staan, alleen een thumbnail van de afbeelding binnen de module Featured Image.

Zo zou het moeten zijn als je de functies van een uitgelichte afbeelding wil, zonder de dubbele foto.

Het oplossen van het niet goed weergeven van de uitgelichte afbeelding in WordPress
Het oplossen van het niet goed weergeven van de uitgelichte afbeelding in WordPress

Wat kan ik doen wanneer de uitgelichte afbeelding niet klopt?

Je weet nu hoe je een uitgelichte afbeelding goed kan uploaden, en de content van je artikel is af. Het enige wat je nu moet doen is het artikel controleren en publiceren.

Helaas zie je opeens dat de uitgelichte afbeelding er niet zo mooi uitziet als je had bedacht.

Wellicht zie je één van de volgende problemen:

  • De uitgelichte afbeelding is te groot of te klein.
  • De afbeelding is uitgerekt of onscherp.
  • De thumbnail afbeeldingen zijn niet in de goede maat.

Gelukkig biedt WordPress al allerlei bewerkingstool voor afbeeldingen zodat je ervoor kan zorgen dat je uitgelichte afbeelding er perfect uitziet. Het is ook verstandig om te weten wat voor soort foto’s goed werken als uitgelichte afbeelding, aangezien het vaak de originele foto’s zijn die de problemen veroorzaken.

Welke foto’s goed werken als uitgelichte afbeelding

Het is een goede gewoonte om te weten welke foto’s er mooi uitzien bij WordPress en welke niet. Daarnaast is het ook belangrijk om je te realiseren dat uitgelichte afbeelding anders weergegeven worden dan een normale foto die je naar een pagina of artikel uploadt.

Om te beginnen met afmetingen, alle websites, of eigenlijk alle thema’s, gebruiken verschillende afmetingen voor uitgelichte afbeeldingen binnen artikelen. Uitvogelen wat de optimale afmetingen zijn voordat je een afbeelding uploadt zorgt ervoor dat je de kans minimaliseert dat je uitgelichte afbeelding op een gekke manier wordt uitgerekt of bijgesneden.

Alhoewel er geen algemene aanbevolen afmetingen zijn voor WordPress uitgelichte afbeeldingen, raden we je aan om te beginnen met 1200 x 628 pixels.

Je kan dus niet elke willekeurig foto gebruiken en verwachten dat het er perfect uit zal zien als uitgelichte afbeelding. Je kan beter een foto bewerken zodat het aan de optimale afmetingen voldoet vóórdat je de afbeelding uploadt naar WordPress.

Maar de 1200 x 628 pixels zijn slechts een aanbevolen beginpunt. Het kan goed zijn dat jouw specifieke thema beter werkt met bredere of juist kortere uitgelichte afbeeldingen.

Enkele algemene richtlijnen voordat je je uitgelichte afbeelding uploadt:

  • Kies voor landschaps-oriëntatie, in plaats van portret (dus liever brede foto’s dan lange foto’s). Uitgelichte afbeeldingen zien er namelijk beter uit wanneer de breedte aanzienlijk groter is dan de lengte, meestal rond een verhouding van 2:1.
  • Upload diverse maten van een foto naar een testartikel en schrijf de afmetingen ergens op. Hierdoor zou je een goed idee moeten krijgen van de optimale afmetingen voor uitgelichte afbeeldingen voor jouw thema.
  • Blijf weg van afbeeldingen die veel te groot of juist veel te klein zijn. Grote afbeeldingen worden gecomprimeerd en verliezen daarbij kwaliteit, terwijl kleinere afbeelding juist uitgerekt worden en vaak erg onscherp worden.
  • Gebruik eventueel de ingebouwde bewerkingstools voor afbeeldingen in WordPress voor uitgelichte afbeelding die je al hebt geüpload maar die nog wat verbetering nodig hebben.

Een andere strategie voor het vinden en gebruiken van de optimale afmetingen voor je uitgelichte afbeeldingen is door naar Media te gaan binnen je WordPress dashboard.

Ga naar Settings > Media.

Ga naar de instellingen voor
Ga naar de instellingen voor “Media”

Dit zijn de algemene instellingen voor Media binnen je hele WordPress website. De ingestelde afmetingen bepalen de maximale grootte die je op je website kan gebruiken voor afbeeldingen van een bepaalde maat.

Er worden meestal drie maten ingesteld voor afbeeldingen in WordPress: ThumbnailMedium, and Large.

De Thumbnail maat is de uitgelichte afbeelding zoals die wordt weergegeven op andere plekken op je website, dus niet in het artikel zelf. Denk bijvoorbeeld aan de lijst met Recent Posts of een blogfeed op je startpagina.

Je hebt de mogelijkheid om de thumbnail van de uitgelichte afbeelding bij te snijden. Maar je kan meestal beter het vakje Crop Thumbnail niet aanvinken, zodat de Thumbnail afmetingen vooral als richtlijn worden gebruikt. Op die manier blijven de verhoudingen bewaard, en worden je afbeeldingen niet op een onverwachte manier bijgesneden.

De Large Size bepaalt meestal de afmetingen van je uitgelichte afbeelding wanneer die bovenaan je artikel wordt getoond. Sommige instellingen kunnen dit negeren, maar het is een goed idee om de afmetingen ergens op te slaan, zodat je de optimale breedte van een uitgelichte afbeelding weet.

De maximale hoogte zou niet zoveel moeten uitmaken aangezien je uitgelichte afbeelding toch niet al te hoog moeten zijn.

Instellen van de verschillende maten voor media
Instellen van de verschillende maten voor media

Zo bewerk je uitgelichte afbeeldingen binnen WordPress

Het bewerken van een uitgelichte afbeelding binnen WordPress is meestal de makkelijkste oplossing om een te grote uitgelichte afbeelding aan te passen.

We raden je aan om een afbeelding goed te bewerken vóórdat je deze uploadt als uitgelichte afbeelding (aangezien aparte bewerkingstools meer mogelijkheden bieden). Maar daarnaast biedt WordPress enkele eenvoudige bewerkingsfuncties die voor sommige gebruikers misschien makkelijker zijn, of als je uitgelichte afbeelding wil bewerken die al op WordPress staan.

Om uitgelichte afbeeldingen te bewerken binnen WordPress, open je een artikel en scrol je naar het deel Featured Images binnen het paneel Post Settings.

Klik op de thumbnail met de uitgelichte afbeelding om de instellingen te openen. Je kan ook alle afbeeldingen op je WordPress website bekijken door naar de Media Library te gaan.

Je ziet de uitgelichte afbeelding aan de zijkant
Je ziet de uitgelichte afbeelding aan de zijkant

Zorg ervoor dat de juiste uitgelichte afbeelding geselecteerd is in de Media Library.

Klik op de link Edit Image om verder te gaan met bewerken.

Klik op de link
Klik op de link “Edit Image”

Er zijn diverse tools beschikbaar binnen de Edit Image functie, maar de meest betrouwbare zie je aan de rechterkant, onder de titel New Dimensions.

Hier kan je de nieuwe afmetingen intypen, zowel hoogte als breedte, zodat de uitgelichte afbeelding kleiner wordt. We raden je niet aan om de afbeelding hier te vergroten, aangezien het dan vooral onscherp zal worden.

Instellen van de afmetingen van de afbeelding
Instellen van de afmetingen van de afbeelding

Typ de nieuwe afmetingen in en klik op Scale.

Kies
Kies “Scale”

De preview zou er wat kleiner uit moeten zien, tenzij de aanpassing zo minimaal is dat je het niet eens kan zien.

Je ziet een bericht met de melding Image Saved. De nieuwe afmetingen worden nu ook aan de rechterkant getoond.

Opslaan van de bewerkte afbeelding
Opslaan van de bewerkte afbeelding

Alle andere tools om afbeeldingen te bewerken zie je boven de preview van de uitgelichte afbeelding.

Enkele andere bewerkingsfuncties van WordPress zijn:

  • Crop
  • Rotate Left
  • Rotate Right
  • Flip Vertical
  • Flip Horizontal

De Crop tool is meestal de belangrijkste, dus klik daarop om de bewerkingsmodule te activeren.

Klik op
Klik op “Crop”

De Crop tool toont een vierkant in de preview van de thumbnail, waarmee je de crop-box kan verslepen voor de gewenste afmetingen.

De crop-box voor de afbeelding
De crop-box voor de afbeelding

Druk op Enter om de afbeelding bij te snijden en bekijk het resultaat in de preview. Je hebt ook de optie Save voor het bijsnijden, al gebeurt dit ook automatisch.

Klik op
Klik op “Save”

De laatste manier om uitgelichte afbeeldingen te bewerken in WordPress, is het bijsnijden van de afbeelding, maar met het behoud van een bepaalde verhouding. Wanneer je nu dus de crop-box versleept, wordt de verhouding bewaard.

Zo kan je bijvoorbeeld een 2 x 1 verhouding intypen. Als je vervolgens de crop-box versleept, zal deze 2 x 1 verhouding bewaard blijven, waardoor je minder vrijheid hebt, maar je er wel voor zorgt dat je verhouding consistent is bij al je uitgelichte afbeeldingen.

Bijsnijden van afbeeldingen
Bijsnijden van afbeeldingen

Wanneer je klaar bent met het bewerken van een afbeelding, kan je op Enter drukken om de bewerking te activeren, en vervolgens op Save. Daarna kan je de nieuwe versie van de afbeelding toevoegen aan een artikel, pagina, of gebruiken als uitgelichte afbeelding.

Daarnaast is er ook de optie binnen het Edit Image paneel waarmee je terug kan gaan naar de originele afmetingen, door op revert te klikken.

Het oplossen van een uitgelichte afbeelding die niet wordt weergegeven in artikelen en pagina’s in WordPress

Wanneer je de uitgelichte afbeelding voor een artikel of pagina goed hebt geüpload, maar deze niet verschijnt, kunnen daar verschillende oorzaken voor zijn. Dit hangt af van de configuratie, thema en plugins van je WordPress website. Enkele veelvoorkomende redenen die problemen met uitgelichte afbeeldingen veroorzaken:

  • Een HTTP fout bij het uploaden van een afbeelding, die kan ontstaan door het format van de afbeelding of door een uploadlimiet.
  • Zoekmachines kunnen uitgelichte afbeeldingen blokkeren als ze verdachte code of malware detecteren.
  • Je gebruikerstype heeft geen toestemming om de pagina te openen waar je een uitgelichte afbeelding kan uploaden of bekijken.
  • Je thema of een plugin bevat een fout en veroorzaakt een conflict met de functie voor uitgelichte afbeeldingen.
  • Het thema staat geen uitgelichte afbeeldingen toe, of je moet ze eerst toestaan via de instellingen van het thema.
  • Het uploaden van de uitgelichte afbeelding op de juiste manier lukt niet.
  • Het kan zijn dat de code van je thema geen uitgelichte afbeelding ondersteunt.
  • Een lazy loading plugin zorgt ervoor dat de uitgelichte afbeelding niet, of niet snel geladen wordt.
  • De uitgelichte afbeelding staat niet op de juiste plek in de template van de pagina of het artikel.
  • Via de instellingen in je dashboard staan uitgelichte afbeeldingen helemaal uit.

Zo los je een HTTP fout bij uitgelichte afbeeldingen op

Enkele fouten komen vaker voor dan anderen bij het uploaden van afbeeldingen naar de Media Library van WordPress.

Gelukkig komen fouten steeds minder voor en worden ze beter aangegeven binnen WordPress, waardoor je de oorzaak makkelijker kan vinden.

Maar het kan nog steeds zijn dat je af en toe een vage foutmelding ziet, zoals de “HTTP error” melding. Dit betekent meestal dat er iets mis is met de afbeelding zelf, of dat je grotere uploads toe moet staan voor je WordPress website.

HTTP fout bij het uploaden van nieuwe media
HTTP fout bij het uploaden van nieuwe media

Het is gebruikelijker om een melding met meer details te zien, zoals een bericht dat een afbeelding of video te groot is: “Exceeds the Maximum Upload Size For This Site.”

Melding: exceeds the maximum upload size
Melding: exceeds the maximum upload size

Hoe het ook zij, elke fout kan frustrerend en soms verwarrend zijn voor gebruikers. Zelfs als je weet dat je afbeelding te groot is, hoe los je dat dan op?

In het algemeen helpen onderstaande oplossingen bij foutmeldingen dat een afbeelding te groot is, of momenteel niet ondersteund wordt:

Verhoog je WordPress geheugenlimiet.

Je hostingprovider bepaalt meestal de beperkingen voor je WordPress geheugen. Je kan contact opnemen met je hostingprovider en ze vragen om het PHP limiet te verhogen.

“Memory limit exhausted” foutmelding bij WordPress

Als het toegestaan is kan je ook zelf het PHP geheugenlimiet aanpassen door het wp-config.php bestand van je site te bewerken. In sommige gevallen zul je moeten upgraden naar een groter hostingpakket met meer resources voor je website.

We raden je aan om deze gids te bekijken om deze stappen bij langs te gaan.

Verklein de afbeelding

Het uploaden van enorme bestanden naar je WordPress website veroorzaakt problemen met de prestaties, en kan je hostingservers overbelasten. Daarom stellen veel hosts, en WordPress zelf, een limiet in voor de maximale bestandsgrootte van uploads.

Een voorbeeld van een foutmelding over de maximale bestandsgrootte in WordPress
Een voorbeeld van een foutmelding over de maximale bestandsgrootte in WordPress

Sowieso moet je proberen om elke afbeelding op je website, inclusief de uitgelichte afbeeldingen, zo klein mogelijk te houden. Je kan de kwaliteit van je afbeelding behouden na het comprimeren, bijsnijden of resizen. Zolang je de afbeelding niet té klein maakt, zou je nog steeds een mooie uitgelichte afbeelding moeten kunnen laten zien.

Daarom raden we je aan om tools voor het bijsnijden, comprimeren en resizen te gebruiken vóórdat je bezig gaat om je PHP geheugenlimiet te verhogen.

Enkele bewerkingstools voor afbeelding buiten WordPress die je goed kan gebruiken zijn GIMP, Photoshop Express, en Paint.NET.

Je kan er ook voor kiezen om afbeeldingen te bewerken binnen WordPress, maar als het uploaden al niet lukt, is dat natuurlijk geen oplossing. Kies je ervoor om afbeeldingen binnen WordPress te bewerken, dan raden we je aan om een plugin voor afbeeldingsoptimalisatie te gebruiken. Zo’n plugin verkleint en optimaliseert automatisch alle afbeeldingen die je uploadt naar WordPress. Je kan bijvoorbeeld naar Optimole of Imagify kijken. Op die manier leg je niet te veel beslag op de resources van je website met grote afbeeldingen.

Zo repareer je afbeeldingen met verdachte code

Helaas is een afbeelding met malware of een virus al meteen verdacht. Het goede nieuws is dat wanneer WordPress een afbeelding tegenhoudt, dat betekent dat WordPress goed z’n werk doet.

Alhoewel er weinig eenvoudige oplossingen zijn om verdachte code te verwijderen, kan je er het beste voor kiezen om al je foto’s legaal te kopen of zelf te maken, in plaats van ze direct van Google te halen (wat officieel verboden is) of ze op vage websites te zoeken.

We raden je ook aan om je website te hosten bij een bedrijf dat malware serieus neemt en een belofte van malwarebeveiliging biedt.

Zo verander je toestemmingen om uitgelichte afbeeldingen te mogen bekijken

Rechten of toestemmingen binnen WordPress bepalen wie de bestanden van een website mag lezen, schrijven of bewerken. Aan de andere kant bepalen gebruikersrollen welke gebieden van de website en het WordPress dashboard toegankelijk zijn voor welke mensen.

Het is mogelijk dat je huidige gebruikersrol niet toestaat dat je uitgelichte afbeeldingen uploadt of bekijkt. Een ander probleem is dat een bepaalde pagina of artikel in je WordPress bestanden niet toegankelijk is vanwege je gebruikersrechten.

Dit probleem kan je oplossen door ervoor te zorgen dat al je gebruikersrollen en rechten goed ingesteld zijn.

We raden je aan om onze uitleg over WordPress gebruikersrollen te lezen zodat iedereen binnen je team altijd uitgelichte afbeeldingen kan openen en bekijken.

Zo los je een conflict of probleem met je thema of plugin op

Thema’s en plugins zijn één van de meestvoorkomende redenen dat uitgelichte afbeeldingen geblokkeerd worden of andere problemen opleveren.

Niet alle thema’s hebben dezelfde instellingen voor uitgelichte afbeeldingen. Soms worden uitgelichte afbeelding volledig geblokkeerd voor pagina’s. En soms kan een thema een uitgelichte afbeelding op een heel andere plek neerzetten als waar je zou verwachten.

Het kan ook zijn dat je specifieke instellingen van je thema moet gebruiken om uitgelichte afbeeldingen te kunnen gebruiken in alle artikelen.

Helaas kunnen we je de oplossingen voor deze problemen niet laten zien, aangezien je hierbij echt moet kijken naar de specifieke instellingen van je thema. Je kan ook contact opnemen met de developer van het thema.

Maar bij conflicten met plugins is dit een ander verhaal. Plugins kunnen heel handig zijn voor het bouwen van een WordPress website, maar de code varieert nogal eens in kwaliteit. Of ze worden simpelweg niet regelmatig bijgewerkt, waardoor er conflicten optreden.

Dit is zeker geen absolute regel, maar het komt vaak voor dat er problemen zijn met uitgelichte afbeeldingen wanneer plugins toegang hebben tot je mediabibliotheek of de functionaliteit van alle afbeeldingen kunnen aanpassen.

Hoe het ook zij, je kan meestal het beste deze stappen bij langs gaan:

  1. Update alle plugins die je op je website geïnstalleerd hebt.
  2. Controleer nog eens of je nu je uitgelichte afbeeldingen wel kan uploaden en zien.
  3. Is het probleem opeens weg, dan kwam de fout door een verouderde plugin.
  4. Is het probleem nog niet opgelost, dan is het tijd om alle plugins te deactiveren.
  5. Kijk nu nog eens of de uitgelichte afbeeldingen nu wel te zien zijn. Zie je ze nog steeds niet, heractiveer de plugins dan en zoek een andere oorzaak van het probleem.
  6. Werken de uitgelichte afbeeldingen nu wel, dan betekent dit dat één van je plugins de boosdoener was.
  7. Heractiveer je plugins één voor één. Na elke heractivering zou je moeten controleren of de uitgelichte afbeeldingen het nu wel doen en goed weergegeven worden.
  8. Als de uitgelichte afbeeldingen er opeens weer uitklappen, weet je welke plugin het probleem veroorzaakt.
  9. Deïnstalleer die plugin en zoek een alternatieve plugin of andere oplossing.

Het oplossen van de ondersteuning van een thema voor uitgelichte afbeeldingen

Interessant aan uitgelichte afbeeldingen is dat niet alle WordPress thema’s ze ondersteunen. Dit komt door allerlei redenen. Het thema is niet goed geprogrammeerd, of de developer heeft de standaardfunctionaliteit voor uitgelichte afbeeldingen expres verwijderd, waarschijnlijk omdat ze andere instellingen dit laten regelen.

Wat de reden ook is, het kan dus zijn dat jouw WordPress thema geen ondersteuning biedt voor uitgelichte afbeeldingen, of in ieder geval niet op de standaard manier. De oplossing is meestal te vinden door naar de instellingen van het thema te gaan, en het specifieke gebied voor uitgelichte afbeeldingen te vinden.

Maar het kan zijn dat het thema uitgelichte afbeeldingen helemaal heeft verwijderd, en ook geen andere tools biedt als alternatief.

Daarom raden we je aan om altijd te controleren of je thema ondersteuning biedt voor uitgelichte afbeeldingen. Je kan dit doen door het gewoon te vragen aan de developer, de documentatie te lezen, of het functions.php bestand te bekijken.

Het volgende stukje code zou in het functions.php bestand moeten staan, of zou je eventueel kunnen toevoegen:

add_theme_support( 'post-thumbnails');

Oplossen van een probleem met uitgelichte afbeeldingen door lazy loading

Lazy Loading is één van de vele methoden voor het optimaliseren van afbeeldingen om de prestaties van je website te verbeteren. Dit wordt bereikt door alleen afbeeldingen op de pagina te laden wanneer ze daadwerkelijk getoond moeten worden op het scherm. Zo hoeft de laatste afbeelding in een lang artikel bijvoorbeeld pas geladen te worden totdat de gebruiker helemaal naar beneden scrolt tot het einde van de pagina.

Maar Lazy Loading veroorzaakt vaak problemen met uitgelichte afbeeldingen doordat sommige Lazy Loading plugins uitgelichte afbeeldingen net zo behandelen als normale afbeeldingen. Dergelijke plugins zijn waarschijnlijk niet je beste oplossing, als ze ervoor zorgen dat je uitgelichte afbeelding niet getoond wordt bij een lijst met Latest Posts of wanneer de uitgelichte afbeelding langzaam laadt. De uitgelichte afbeelding moet altijd direct geladen worden om de gebruikerservaring te optimaliseren.

Veel plugins voor afbeeldingsoptimalisatie bieden lazy loading als een add-on. Je moet daarom naar je plugin kijken of te zien of ze deze functie gebruiken om je website.

Wanneer je de potentiële boosdoener gevonden hebt, schakel je de functie voor lazy loading uit, leeg je de cache voor je site, en controleer je of dat de problemen met je uitgelichte afbeelding oplost.

'Enable Lazy Loading for Images' met Jetpack
‘Enable Lazy Loading for Images’ met Jetpack

Enkele plugins die meestal lazy loading functionaliteit gebruiken:

  • Tools voor afbeeldingsoptimalisatie zoals ShortPixelen Optimole.
  • Speciale lazy loading plugins zoals Lazy Load van WP Rocket.
  • Tools voor optimalisatie van je database en website, zoals Autoptimize.
  • Plugins die een volledig pakket aan functies bieden, zoals Jetpack.
  • Caching plugins zoals W3 Total Cache.

De uitgelichte afbeelding in WordPress wordt niet op de juiste plek getoond

Elke template voor WordPress artikelen of pagina’s bepaalt waar de uitgelichte afbeelding weergegeven moet worden. Ook een thema of plugin bepaalt dit meestal voor je.

Over het algemeen zie je de uitgelichte afbeelding direct onder de titel en boven de eerste regel tekst. Het kan zijn dat een thema dit verandert. Wellicht wil je de uitgelichte afbeelding op een andere plek hebben, bijvoorbeeld direct onder de inleiding van je tekst, of boven de regel met de naam van de auteur en publicatiedatum.

Je wil de afbeelding iets verplaatsen
Je wil de afbeelding iets verplaatsen

Om de locatie van een uitgelichte afbeelding te wijzigen, ga je naar de template voor de pagina of het artikel dat gebruikt wordt.

Zoek in dat bestand naar dit stukje code:

the_post_thumbnail();

Dit stukje code is een referentie naar je uitgelichte afbeelding. Uitgelichte afbeeldingen werden vroeger “post thumbnail” genoemd binnen WordPress, vandaar. Deze code geeft de precieze locatie aan voor de uitgelichte afbeelding. De the_post_thumbnail(); functie kan net voor de titel of na de content te vinden zijn, afhankelijk van de configuratie van je pagina en thema.

Om de locatie van je uitgelichte afbeelding te wijzigen, knip je dit stukje code en plak je het op een plek naar wens binnen de template. Door de nieuwe positie binnen de template zal WordPress weten dat de afbeelding ergens anders weergegeven moet worden.

Zoals altijd raden we je aan om een back-up te maken van je website voordat je de code gaat bewerken. En het is ook altijd een goed idee om wijzigingen door te voeren aan child-thema’s, niet de kernbestanden van WordPress.

De WordPress uitgelichte afbeelding wordt niet weergegeven vanwege de Dashboard instellingen

Eén van de meest frustrerende problemen met de uitgelichte afbeeldingen in WordPress kan ontstaan door de instellingen van het dashboard.

Dit is zo frustrerend omdat het een heel eenvoudige instelling is in het dashboard die bepaalt of WordPress de uitgelichte afbeelding wel of niet moet weergeven.

Deze situatie komt in twee variaties voor:

  • Uitgelichte afbeeldingen worden niet als thumbnails getoond in je lijsten met artikelen of pagina’s in het dashboard.
  • Het veld voor de uitgelichte afbeelding mist wanneer je een pagina of artikel maakt.

Zo los je beide variaties op.

Het eerste probleem ontdek je doordat je de thumbnails van uitgelichte afbeeldingen niet kan zien in je lijst met pagina’s of artikelen. Je kan naar Post > All Posts gaan om je lijst met artikelen te zien. Eén kolom daar heet Featured Image en zou getoond moeten worden naast Post Date. Deze kolom laat de thumbnail van de uitgelichte afbeelding zien om je een idee te geven wat er aan de front-end van je website getoond wordt.

De lijst met
De lijst met “Featured Image”

Maar wat als je thumbnails nergens te zien zijn?

Dit betekent hoogstwaarschijnlijk dat je een instelling in je dashboard voor het tonen van de kolom met Featured Images uitgezet hebt.

Geen lijst met afbeeldingen
Geen lijst met afbeeldingen

Om de situatie op te lossen ga je naar het tabblad Screen Options rechtsboven in het dashboard.

Je moet in het venster Posts of Pages zijn voordat Screen Options te zien is.

Klik op het tabblad
Klik op het tabblad “Screen Options”

Screen Options biedt een lange lijst met opties die je aan en uit kan zetten, om te bepalen wat je kan zien in het WordPress dashboard.

Zo kan je bijvoorbeeld tags, categorieën en de auteur toevoegen of verwijderen.

Zorg er in dit deel voor de het selectievakje voor Featured Image aangevinkt is.

De kolom Featured Image zou nu te zien moeten zijn in je lijst met artikelen of pagina’s.

Zorg ervoor dat het selectievakje
Zorg ervoor dat het selectievakje “Featured Image” aangevinkt is

Een ander probleem binnen Screen Options komt om de hoek wanneer je het veld voor het uploaden en toevoegen van een uitgelichte afbeelding niet ziet. Dit veld is te vinden in alle WordPress artikelen en pagina’s door naar het venster Post Settings aan de rechterkant van een artikel of pagina te gaan.

Zie je het veld daar niet, doorloop dan de volgende stappen om dit te activeren.

WordPress uitgelichte afbeelding wordt niet goed weergegeven
WordPress uitgelichte afbeelding wordt niet goed weergegeven

Zoek en selecteer het icoontje met drie puntje () rechtsboven in het dashboard. Scrol naar beneden in de lijst met instellingen tot je Preferences ziet.

Klik op Preferences om een nieuw venster te openen.

Tabblad
Tabblad “Preferences”

De module Preferences bevat allerlei opties voor een document. Scrol naar beneden tot het deel met de titel Document Settings.

Daar vind je een veld met de naam Featured Image. Zorg ervoor dat dit veld aan staat zodat de optie voor Featured Image getoond wordt bij je artikelen en pagina’s.

Vink het selectievakje
Vink het selectievakje “Featured Image” aan onder Preferences

Het kan ook zijn dat je een oudere versie van de WordPress editor gebruikt. Dit gebeurt nog bij veel pagina’s, of je hebt de Gutenberg editor teruggedraaid om de oude editor te kunnen gebruiken.

Is dit het geval, open dan de pagina of artikel in kwestie en zoek het block Featured Image in de rechterkant van de pagina.

Is dat niet te vinden, ga dan naar het tabblad Screen Options en vink het selectievakje Featured Image aan om het te kunnen zien binnen de editor.

WordPress uitgelichte afbeelding is niet te zien
WordPress uitgelichte afbeelding is niet te zien

De WordPress uitgelichte afbeelding is niet te zien in de galerij met blogartikelen

Een andere manier om uitgelichte afbeeldingen te gebruiken is door een feed van je blogartikelen te laten zien op de startpagina van je website, of ergens anders.

Maar wat als de uitgelichte afbeelding niet te zien zijn op de blogpagina?

Recente artikelen in een lijst op onze testwebsite
Recente artikelen in een lijst op onze testwebsite

Het is vrij gebruikelijk dat sites een lijst met recente artikelen laten zien, maar een galerij of een feed met alleen maar tekstuele links is niet het meest aantrekkelijk.

WordPress biedt verschillende manieren om je blogartikelen op andere plekken op je website tentoon te stellen, maar je moet soms wel de goede instellingen gebruiken voordat ze goed getoond worden.

Opmerking: Veel websites gebruiken externe plugins voor een galerij of lijst met artikelen om dit te doen. Is dat ook bij jou zo, dan kan je het beste contact opnemen met de developer van je plugin. We zullen in deze tutorial alleen kijken hoe je de uitgelichte afbeelding kan oplossen voor ingebouwde WordPress tools.

Het tonen van een galerij of een lijst met recente blogartikelen doe je door een Gutenberg block toe te voegen aan de pagina die je als WordPress Homepage hebt aangewezen.

Dit betekent dus dat je eerst een pagina moet maken en aanwijzen als Homepage in de Reading instellingen van WordPress.

Ter herinnering: je kan elke WordPress pagina als startpagina aanwijzen door naar Settings > Reading in het dashboard te gaan.

Ga naar de instellingenpagina voor Reading
Ga naar de instellingenpagina voor Reading

Zorg ervoor dat het gebied met Your homepage displays op A Static page staat. Hierdoor weet WordPress dat je een persoonlijke startpagina wil hebben met de mogelijkheid om blocks toe te voegen of te verwijderen via page builders zoals Gutenberg. Het tegenovergestelde is het laten zien van een lijst met je Latest Posts.

Klik op het dropdownveld Homepage om de lijst met pagina’s te zien die momenteel actief zijn op je website. In deze tutorial hebben we de gewenste pagina “Homepage” genoemd, erg handig. Het kan zijn dat jij jouw startpagina een andere naam hebt gegeven.

Opmerking: Je kan altijd hier weer naar toe gaan en de statische startpagina veranderen. Zo kan je bijvoorbeeld je startpagina helemaal opnieuw willen ontwerpen, en dan is het makkelijker om gewoon een nieuwe pagina te maken dan de oude te bewerken.

Kiezen van de statische startpagina
Kiezen van de statische startpagina

Nu is het tijd om de content binnen die pagina te bekijken om ervoor te zorgen dat uitgelichte afbeeldingen goed te zien zijn.

Om content toe te voegen en de instellingen voor de blogfeed op de pagina aan te passen, ga je naar Pages > All Pages binnen het dashboard.

Ga naar ‘Pages > All Pages’ in WordPress admin
Ga naar ‘Pages > All Pages’ in WordPress admin

Scrol door de lijst met pagina’s tot je de pagina vindt die je als startpagina hebt aangewezen. Er zou ook een label met Front Page bij moeten staan. Zoals gezegd hebben we deze pagina in deze tutorial “Homepage” genoemd, maar dit kan bij jou een andere naam zijn.

Klik op de pagina die als Front Page is aangewezen.

Pas nu de startpagina aan
Pas nu de startpagina aan

Toevoegen van nieuwste artikelen

Je hebt wellicht het Latest Posts block al geactiveerd op je startpagina, maar zo niet dan kan je deze vinden in de Gutenberg block verzameling. Het block heet Latest Posts. Het enige dat je moet doen is op het icoon voor invoegen te klikken, en dan komt het ergens op je startpagina.

Daarna kan je het verslepen naar de gewenste plek op je startpagina.

Toevoegen van de Latest Posts block aan de
Toevoegen van de Latest Posts block aan de “Homepage”

Terug naar uitgelichte afbeeldingen: de standaardinstellingen laten nog geen uitgelichte afbeeldingen van je blogartikelen zien wanneer je de Latest Posts block toevoegt aan een pagina. Je ziet gewoon een lijst met linkjes, samen met beschrijvingen van die artikelen.

Om ook de uitgelichte afbeeldingen toe te voegen, klik je op het Latest Posts block. Hiermee selecteer je het hele block en krijg je de instellingen voor de block aan de rechterkant te zien.

Zorg ervoor dat het op het tabblad met Block instellingen staat. Het kan zijn dat je geswitcht bent van Page naar Block.

Het openen van het tabblad met instellingen voor het block
Het openen van het tabblad met instellingen voor het block

Scrol naar beneden op het tabblad van de Block om de beschikbare opties te zien. De eerste paar instellingen hebben niks te maken met de uitgelichte afbeeldingen, maar bepalen hoe de artikelen getoond worden in het block en kunnen ervoor zorgen dat je uitgelichte afbeelding gek getoond worden.

We raden je aan om wat te spelen met de instellingen voor content, zoals het tonen van Post Content, Display Author Name of Display Post Date. Deze instellingen hebben allemaal invloed op het tonen van je recente artikelen en helpen je om ervoor te zorgen dat alles er goed uitziet, samen met je uitgelichte afbeeldingen.

Het tabblad
Het tabblad “Post content settings”

Het volgende deel is het belangrijkste element aangezien het de uitgelichte afbeeldingen binnen de Latest Posts block activeert.

Zoek het deel met de titel Featured image settings.

Hier activeer je de optie Display featured image. Hierdoor worden de uitgelichte afbeelding aangezet voor alle artikelen die getoond worden. Wanneer er geen uitgelichte afbeelding is gebruikt in een artikel, zal er alleen een lege ruimte in de block te zien zijn.

De optie
De optie “Display featured image”

Daarnaast zijn er nog enkele instellingen beschikbaar om de uitgelichte afbeeldingen professioneler weer te geven. Dit is vooral belangrijk wanneer je de nadruk probeert te leggen op recente artikelen binnen je startpagina.

Zo bepaalt het veld Image Size bijvoorbeeld hoe groot je uitgelichte afbeeldingen moeten zijn binnen de lijst of galerij. Wanneer je switcht naar de Thumbnail optie, worden de afbeeldingen wat kleiner, en worden het meestal perfecte vierkanten.

Instellen van de grootte van uitgelichte afbeeldingen
Instellen van de grootte van uitgelichte afbeeldingen

Door te kiezen voor Large of Medium wordt de maat van alle uitgelichte afbeeldingen in de block aangepast, en krijg je meer een horizontale oriëntatie, afhankelijk van de afmetingen van je uitgelichte afbeeldingen.

Maak de afbeeldingen
Maak de afbeeldingen “Large”

We raden je ook aan om naar Image Dimensions te kijken. Deze instelling bepaalt de maat van alle uitgelichte afbeeldingen die in het block Latest Posts getoond worden. Je kan zelf een hoogte en breedte bepalen, of een percentage instellen waarmee de tool automatisch alle afmetingen van de uitgelichte afbeeldingen instelt op basis van dit percentage. Zo kan je bijvoorbeeld elke uitgelichte afbeelding verkleinen tot 25% van de originele grootte.

Er is ook een instelling Image Alignment om te bepalen of de afbeeldingen naar links, rechts of het midden uitgelijnd moeten worden.

Instellen van de afmetingen voor uitgelichte afbeeldingen
Instellen van de afmetingen voor uitgelichte afbeeldingen

Eén van de laatste plekken die je kan bekijken binnen de Featured Image instellingen in het Latest Posts block, is het aantal items dat je wil tonen binnen het block, en hoeveel kolommen je wil gebruiken.

Zoals met de meeste WordPress instellingen, hebben ze ook een invloed op hoe je uitgelichte afbeeldingen te zien zijn. Dat komt doordat bijvoorbeeld vier kolommen meer ruimte innemen (en dus minder ruimte voor afbeeldingen overlaten) dan een block met maar twee of drie kolommen.

Test de velden voor Number of Items en Columns om ervoor te zorgen dat je uitgelichte afbeeldingen er goed en aantrekkelijk uitzien op de startpagina.

Instellen van
Instellen van “Number of items” en “Columns”

Nadat je tevreden bent met de instellingen, druk je op Publish. Je nieuwste artikelen zouden nu op de ingestelde plek op je startpagina te zien moeten zijn. Daarnaast zouden de uitgelichte afbeeldingen getoond moeten worden boven de relevante post title en link.

Recente artikelen met uitgelichte afbeeldingen
Recente artikelen met uitgelichte afbeeldingen

WordPress uitgelichte afbeelding wordt niet getoond op Facebook

De uitgelichte afbeeldingen verschijnen ook in de embeds wanneer een artikel of pagina gedeeld wordt op social media.

Elk sociaal netwerk heeft een eigen weergave voor gedeelde content, maar Facebook is altijd een goed beginpunt, aangezien het zo populair is. Wanneer de uitgelichte afbeelding te zien is op Facebook, dan is er een goede kans dat het ook werkt op andere sociale websites.

De grote vraag is of de uitgelichte afbeeldingen van een artikel ook goed weergegeven wordt wanneer je een link deelt op Facebook. Zo niet, hoe kan je dat probleem dan oplossen? Uiteindelijk levert een gedeeld artikel op Facebook zonder afbeelding weinig aandacht op.

Bij uitgelichte afbeeldingen op Facebook, zien we vaak de volgende problemen:

  • De verkeerde uitgelichte afbeelding is te zien op Facebook.
  • Er wordt helemaal geen uitgelichte afbeelding getoond bij artikelen wanneer je die deelt op Facebook.
  • Er worden diverse afbeeldingen opgehaald uit het artikel, maar je moet dan kiezen welke je wil gebruiken.

Alle problemen hierboven komen voort uit vergelijkbare oorzaken. Het betekent namelijk bij allemaal dat Facebook de Open Graph data van je website niet goed kan openen, of dat deze Open Graph data überhaupt niet bestaat.

Zo test je of je uitgelichte afbeelding goed te zien is op Facebook

Er is geen enkele reden om tijd te besteden aan probleemoplossing als je uitgelichte afbeeldingen en content van je artikelen allemaal goed te zien zijn op Facebook wanneer je artikel gedeeld wordt.

We raden je dus aan om eerst even te testen of de uitgelichte afbeeldingen al dan niet te zien zijn op Facebook.

Je kan dit doen door je Facebook account te openen en te doen alsof je een statusupdate gaat delen.

Het enige wat je hoeft te doen is het plakken van de link van je artikel in het statusveld van Facebook (je kan dit ook doen op persoonlijke of zakelijke pagina’s), en even wachten op te zien of de content van je artikel samen met de uitgelichte afbeelding getoond wordt.

Het volgende screenshot laat zien dat een artikel prima werkt op Facebook, aangezien er een samenvatting van de content te zien is, samen met een link, titel en de uitgelichte afbeelding.

Opmerking: Uitgelichte afbeeldingen worden opgehaald van WordPress en op social media sites weergegeven door middel van zogeheten Open Graph. Kinsta Hosting biedt zelf al ondersteuning voor Open Graph, samen met de mogelijkheid om dit te beheren via Yoast SEO. Daarom blokkeert Kinsta de meeste Open Graph plugins aangezien ze conflicten kunnen opleveren. Maar we zullen enkele Open Graph plugins aanraden om problemen op te lossen als je een website hebt bij een andere webhost.

WordPress uitgelichte afbeelding niet te zien op Facebook
WordPress uitgelichte afbeelding niet te zien op Facebook

Een andere manier om te zien of het werkt is het gebruiken van social sharing knoppen op je website. Ga naar het artikel dat je wil testen, en klik op de link Share to Facebook, en kijken of de uitgelichte afbeelding getoond wordt in het pop-upvenster.

Als laatste kan je ook de Developers Debug Tool op Facebook gebruiken. Deze tool bekijkt elke gewenste URL en vertelt je of er fouten optreden wanneer Facebook informatie van de URL probeert op te halen. Je krijgt ook een helder overzicht te zien van wat je kan verwachten als je deze URL op Facebook zou plakken of delen.

Wanneer je op de pagina Developers Debug Tool bent, zoek dan het tabblad Sharing Debugger, en plak de URL in kwestie.

Klik op Debug om verder te gaan.

Het tabblad
Het tabblad “Sharing Debugger” in het Facebook for Developers portaal

Bekijk onze gids om meer te lezen over de Facebook Debug Tool.

Er is vrij veel informatie te zien over wat je URL zal doen op Facebook, maar je hoeft momenteel alleen maar naar de preview te kijken. De Link Preview laat je precies zien hoe je artikel eruit zal zien wanneer jij of iemand anders deze deelt op Facebook.

Het screenshot hieronder laat ons zien dat de uitgelichte afbeelding goed te zien is. Maar wat als dat niet het geval is? Wat als het de verkeerde uitgelichte afbeelding is, of je helemaal geen afbeelding kan zien?

Dat is natuurlijk een probleem, dus volg onderstaande stappen om ervoor te zorgen dat je uitgelichte afbeelding altijd klaar staat om gedeeld te worden op social media.

Controleren van de
Controleren van de “Link Preview” van een URL op Facebook

Opmerking: Sommige nieuwere websites hebben problemen met Facebook en andere sociale websites omdat Facebook de website nog niet gecrawld heeft. Daarom kan het plakken van de URL in de Sharing Debugger Tool van Facebook dit probleem in één keer oplossen.

Een makkelijke manier om te zien of de Open Graph code geactiveerd is op je website is door een SEO plugin te gebruiken. Veel van deze plugins bieden tools om previews te bekijken van hoe je artikelen eruitzien op Facebook of andere sociale netwerken.

Je kan meestal de Open Graph markup ook direct activeren vanuit de instellingen van je SEO plugin.

Voor deze deel laten we je zien hoe je de Open Graph markup kan activeren voor twee van de meest populaire SEO plugins: AIO (All in One) SEO en Yoast SEO.

Voor de AIOSEO plugin ga je naar het All in One SEO menu en klik je op het tabblad Social Networks.

Kies de optie Facebook en scrol naar beneden om het veld te vinden met Enable Open Graph Markup. Standaard zou deze feature al aan moeten staan, maar mogelijk heb je het zelf op een gegeven moment uitgezet.

Je kan de instellingen ook zo aanpassen dat je een standaard Post Image Source hebt, bijvoorbeeld dat altijd de eerste afbeelding van een artikel gebruikt wordt, of juist de Featured Image.

Daarna klik je op Save Changes en test je of Facebook de uitgelichte afbeelding nu inderdaad laat zien.

AIOSEO Facebook instellingen
AIOSEO Facebook instellingen

Yoast SEO is een andere SEO plugin met functies voor social sharing en opties om de Open Graph functionaliteit in en uit te schakelen.

Het mooie van Yoast SEO is dat gewoon het installeren van de plugin er al voor kan zorgen dat het Open Graph protocol voor sociaal delen geactiveerd wordt.

Heb je toch nog problemen, ga dan naar SEO > Social in het WordPress dashboard.

De
De “Social” instellingen van Yoast SEO

Hier selecteer je het tabblad Facebook. Je kan dit ook testen voor andere sociale netwerken, zoals Twitter en Pinterest.

Zoek de Add Open Graph Meta Data schakelaar en zorg ervoor dat die op Enabled staat.

Wellicht wil je ook een Default Image URL instellen die moet verschijnen wanneer een artikel geen toegewezen uitgelichte afbeelding heeft.

Zorg ervoor dat je op Save Changes klikt, en probeer een ander artikel te delen om te zien of de uitgelichte afbeeldingen nu te zien zijn in de gedeelde posts.

Facebook tab - WordPress uitgelichte afbeelding wordt niet getoond

Wanneer je iets verandert, is het handig om even terug te gaan naar de Facebook Sharing Debugger Tool om Facebook aan te moedigen meer data voor het artikel te zoeken.

Je kan op Scrape Again klikken of de pagina gewoon verversen en de URL van je artikel nog eens plakken.

Debuggen van meerdere URL’s tegelijk op Facebook

Je hebt mogelijk allerlei oude artikelen die geen uitgelichte afbeeldingen laten zien op Facebook. Dat is natuurlijk een probleem.

Wanneer dit zo is, dan raden we je aan om terug te gaan naar de Facebook Sharing Debugger Tool en op de Batch Invalidator optie te klikken.

plakken in bulk - uitgelichte afbeelding wordt niet getoond WordPress

Hier kan je tot 50 URL’s in één keer in plakken en de tool laten draaien, zodat Facebook voor alle metadata hiervoor goed ophaalt.

Je hebt twee mogelijkheden voor het ophalen van URL’s van je site. De eerste optie is gewoon handmatig, door te klikken op elk artikel en elke pagina op je website en de URL’s in een document te verzamelen.

Een alternatief is het installeren en activeren van een plugin zoals Export All URLs. Deze plugin pakt elke URL op je website en exporteert ze naar een eenvoudig document. Op die manier kan je ze allemaal eenvoudig kopiëren en plakken naar de Facebook Sharing Debugger Tool.

Nadat dat allemaal klaar is, druk je op Debug om alle URL’s in de lijst te verwerken zodat alle uitgelichte afbeeldingen en andere belangrijke data verschijnen wanneer ze gedeeld worden op Facebook.

Extra opties om de uitgelichte afbeeldingen van WordPress te tonen op social media

Het activeren van Open Graph voor je WordPress website is essentieel in het tonen van je uitgelichte afbeeldingen op platforms zoals Facebook.

Heb je problemen met bovenstaande SEO plugins, of wil je gewoon geen SEO plugin gebruiken (en heb je dus geen toegang tot handige activatie van Open Graph), dan zijn er een paar andere manieren om Open Graph te

De OG Plugin

De eerste optie is OG, een handige plugin voor het toevoegen van het Open Graph protocol om van elke webpagina een verrijkt object te maken voor social media. De plugin is lichtgewicht en biedt geen andere features, waardoor het ideaal is als je alleen het Open Graph probleem wil oplossen.

Om te beginnen installeer en activeer je de OG plugin op je WordPress website

De OG plugin
De OG plugin

Het grote voordeel van een plugin als OG is dat er geen configuratie nodig is na het installeren. Je hoeft dus niet met instellingen te knoeien om de boel te laten werken.

Het Open Graph protocol wordt automatisch geactiveerd voor alle WordPress artikelen en pagina’s.

Ga vervolgens naar je Facebook pagina (persoonlijk of zakelijk) en plak een link met een uitgelichte afbeelding in het Status veld.

Uitgelichte afbeelding te zien op Facebook
Uitgelichte afbeelding te zien op Facebook

Nu de OG plugin geactiveerd is zou je de informatie en uitgelichte afbeelding van het artikel moeten zien in de preview.

Lukt het nog steeds niet, kijk dan nog eens bij de Facebook Sharing Debugger om te controleren dat Facebook je website kan crawlen, aangezien dat meestal het enige probleem is wanneer Open Graph al geactiveerd is.

De Open Graph and Twitter Card Tags Plugin

Onze laatste optie voor het aanzetten van het Open Graph protocol om uitgelichte afbeeldingen te tonen heet de Open Graph en Twitter Card Tags plugin. Naast het activeren van Open Graph voor alle sociale netwerken, biedt deze plugin ook Twitter tags om het delen op Twitter te verbeteren.

Nogmaals, Kinsta blokkeert de meeste Open Graph plugins, waaronder ook deze plugin. Dat is omdat je geen Open Graph plugin nodig hebt bij Kinsta. Maar gebruik je een andere hostingprovider, dan kan het toch een goede optie.

Om te beginnen installeer en activeer je de Open Graph and Twitter Card Tags plugin op je WordPress site.

Open Graph and Twitter Card Tags plugin
Open Graph and Twitter Card Tags plugin

Ga vervolgens naar Settings > Open Graph and Twitter Card Tags. Hierdoor kom je bij de instellingen die je nodig hebt om het Open Graph protocol te activeren en te bepalen welke content elementen je graag wil zien wanneer je artikelen en pagina’s gedeeld worden op social media.

Open Graph and Twitter Card Tags instellingen
Open Graph and Twitter Card Tags instellingen

Selecteer het tabblad General en vind het deel Description Settings. Hier moet je enkele velden invullen zoals Description LengthHomepage Description, en Default Description. Deze hebben geen invloed op je uitgelichte afbeelding, maar zijn wel direct onder de afbeelding te zien, en zijn dus belangrijk voor de presentatie van je content.

Het tabblad ‘General’ bij Open Graph and Twitter Card Tags
Het tabblad ‘General’ bij Open Graph and Twitter Card Tags

Scrol naar beneden tot Image Settings. Er is een veld waarin je kan kiezen waar de afbeelding vandaan moet komen wanneer een artikel of pagina gedeeld wordt op social media.

Selecteer de eerste twee selectievakjes om de Open Graph afbeelding op te halen, terwijl de andere wordt gebruikt voor de uitgelichte afbeelding van de pagina of post.

Dit zijn algemene instellingen voor alle social media, zodat Facebook en Twitter geen willekeurige foto’s selecteren uit je artikelen of website.

Instellen waar de uitgelichte afbeelding vandaan komt
Instellen waar de uitgelichte afbeelding vandaan komt

Vervolgens klik je op het tabblad Facebook Open Graph. Hier kan je alles instellen voor het Open Graph protocol, en enkele specifieke eigenschappen voor Facebook.

Zo kan je bijvoorbeeld zaken opnemen als de Site Name en Post Title, maar niet de URL gebruiken. Er zijn allerlei instellingen waar je mee kan experimenteren.

Het belangrijkste voor dit moment is het veld Include Image. Vink dit vakje aan zodat de uitgelichte afbeelding van een WordPress artikel of pagina gebruikt wordt bij het delen op Facebook.

Instellingen voor Open Graph
Instellingen voor Open Graph

Een andere specifieke Open Graph module van deze plugin is voor Twitter. Selecteer het tabblad Twitter Cards om de instellingen te bapelen voor je Twitter Card Tags.

Twitter Cards zijn net wat anders dan de deelmodules van Facebook, dus ga deze instellingen ook even bij langs tot je tevreden bent. We raden je aan om TitleURL, en Description aan te vinken.

Als laatste moet je het vakje Include Image aanvinken, zodat Twitter ook je uitgelichte afbeelding van de pagina of het artikel ophaalt.

Zorg ervoor dat je op Save drukt zodat de nieuwe instellingen opgeslagen worden.

Tabblad met instellingen voor
Tabblad met instellingen voor “Cards”

In het algemeen is de beste manier om Open Graph te activeren voor het goed delen van content en uitgelichte afbeeldingen op social media het installeren van een plugin als Yoast SEO of OG. Het beste alternatief is een managed host als Kinsta te gebruiken die Open Graph al voor je regelen.

Ervoor zorgen dat uitgelichte afbeeldingen altijd worden weergegeven in artikelen en pagina’s

De uitgelichte afbeelding is gevoelig voor menselijke fouten, omdat je als auteur handmatig een uitgelichte afbeelding moet uploaden wanneer je een nieuw artikel of pagina maakt.

Alhoewel het automatiseren van het proces niet voor iedereen weggelegd is, zijn er alsnog wel trucjes om ervoor te zorgen dat WordPress uitgelichte afbeeldingen altijd getoond worden bij artikelen en pagina’s, zodat de kans dat een auteur het vergeet geminimaliseerd wordt.

Het instellen van standaard uitgelichte afbeeldingen voor heel WordPress

Je kan ervoor zorgen dat het veld met uitgelichte afbeeldingen in ieder geval nooit leeg is door een standaardafbeelding in te stellen voor alle artikelen.

Het mooie van de volgende plugin is dat de uitgelichte afbeeldingen die je al op je website hebt niet vervangen worden. In plaats daarvan worden artikelen zonder uitgelichte afbeeldingen gedetecteerd en wordt daarvoor een standaard uitgelichte afbeelding toegevoegd.

Begin door de Default Featured Image plugin te installeren en activeren.

Ga vervolgens naar Settings > Media in je WordPress dashboard.

Ga naar Settings > Media in het WordPress dashboard.
Ga naar Settings > Media in het WordPress dashboard.

Dit is het enige deel van het dashboard dat veranderd wordt door de Default Featured Image plugin.

Scrol naar beneden om een nieuw veld te zien met de titel Default Featured Image.

Klik op de Select Default Featured Image knop.

Selecteer de standaard uitgelichte afbeelding
Selecteer de standaard uitgelichte afbeelding

Hierdoor krijg je de Media Library te zien waar je een afbeelding kan kiezen die voortaan je standaardafbeelding is bij alle uitgelichte afbeeldingen.

Na het kiezen van een afbeelding, klik je op Set Default Featured Image.

Selecteer de standaard uitgelichte afbeelding
Selecteer de standaard uitgelichte afbeelding

Je zou nu een thumbnail van de gekozen afbeelding moeten zijn bij alle artikelen die nog geen uitgelichte afbeelding hadden.

Let op dat je op Save Changes klikt zodat de standaardafbeelding overal toegepast wordt.

Instellen van een standaard uitgelichte afbeelding
Instellen van een standaard uitgelichte afbeelding

Het is altijd belangrijk om te testen of er nu inderdaad een standaard uitgelichte afbeelding is op je site.

Ga hiervoor naar Posts > All Posts.

Ga naar
Ga naar “All Posts”

Selecteer één van je artikelen die nog geen uitgelichte afbeelding had.

Ga voor dit artikel naar de Post Settings en open het deel Featured Image.

Dit zou leeg moeten zijn, met een verzoek om een uitgelichte afbeelding te uploaden.

Selecteer de uitgelichte afbeelding
Selecteer de uitgelichte afbeelding

Maar met de geactiveerde Default Featured Image plugin zou je alleen maar op Update bij het artikel hoeven te klikken.

Klik op
Klik op “Update”

De module voor de uitgelichte afbeelding van het artikel zou dan gevuld moeten worden met de standaard uitgelichte afbeelding.

Het goede nieuws is dat voortaan alle artikelen zonder uitgelichte afbeelding automatisch deze afbeelding zullen krijgen. Maar het kan wel zijn dat je oudere artikelen eerst moet updaten voordat de uitgelichte afbeelding gebruikt wordt.

De standaard uitgelichte afbeelding is te zien
De standaard uitgelichte afbeelding is te zien

Laten we als test eens gaan naar een artikel dat al wel een uitgelichte afbeelding in het artikel had.

Zoals je kan zien is daar een andere afbeelding te zien bij de uitgelichte afbeelding. Dit betekent dat de plugin goed werkt door de standaard uitgelichte afbeelding alleen toe te voegen aan de goede artikelen, en de artikelen die al een afbeelding hebben te negeren.

De standaard uitgelichte afbeelding is niet te zien
De standaard uitgelichte afbeelding is niet te zien

Zo upload en bewerk je alle uitgelichte afbeeldingen op je website in één keer

Op een gegeven moment kan je bedenken dat meerdere oudere artikelen wel nieuwe uitgelichte afbeeldingen kunnen gebruiken. Het kan ook zijn dat je graag een bepaalde categorie met artikelen of pagina’s wil vervangen die allemaal dezelfde uitgelichte afbeelding hebben, bijvoorbeeld om aan te geven dat het tutorials zijn, of omdat je je logo op al je webpagina’s gebruikt.

Hoe het ook zij, op zo’n moment is het handig als je al deze uitgelichte afbeelding in één keer tegelijk kan wijzigen, in plaats van ze allemaal stuk voor stuk bij langs te moeten gaan. Sommige websites hebben zomaar honderden of duizenden uitgelichte afbeeldingen, dus dan is een bulk bewerkingstool onontbeerlijk.

De Quick Featured Images plugin kan meerdere uitgelichte afbeeldingen bewerken, naast allerlei andere functies, zoals het toevoegen van een standaard uitgelichte afbeelding of standaardinstellingen.

Quick Featured Images plugin
Quick Featured Images plugin

Binnen dit artikel is vooral de bulk bewerkingstool interessant. Hiermee kan je meerdere uitgelichte afbeeldingen vervangen die je eerder hebt geüpload, waarbij ze allemaal vervangen worden door dezelfde afbeelding.

Na het installeren en activeren van de plugin ga je naar Featured Images > Bulk Edit.

Ga naar ‘Featured Images > Bulk Edit’
Ga naar ‘Featured Images > Bulk Edit’

Hier zie je bovenaan een Progress Bar. Deze voortgangsbalk geeft aan waar in het proces van het bewerken van meerdere uitgelichte afbeelding je bent.

Dit is belangrijk, aangezien de bewerking meteen definitief is, dus je wil zeker weten wat er bij elke stap gebeurt.

Om te beginnen met het in bulk bewerken van uitgelichte afbeeldingen scrol je naar beneden

In bulk bewerken van uitgelichte afbeeldingen
In bulk bewerken van uitgelichte afbeeldingen

Vind het stuk met de titel Actions with a single image. Daar heb je drie mogelijkheden om de uitgelichte afbeeldingen in bulk te bewerken:

  • Set the selected image as the new featured image.
  • Replace featured images with the selected image.
  • Remove the selected image as the featured image.

Kies de gewenste optie afhankelijk van wat je wil bereiken. Zo kan het zijn dat je bijvoorbeeld alle oude uitgelichte afbeeldingen wil verwijderen, of dat je wil dat één afbeelding voortaan alle nieuwe uitgelichte afbeeldingen vervangt. In die gevallen ga je voor de eerste of derde optie.

Maar meestal zal je voor de optie “Replace featured image by the selected image” willen gaan. Hiermee kan je een afbeelding uploaden die zoveel uitgelichte afbeeldingen zal vervangen als je wil. Die afbeeldingen selecteer je dan zometeen, en kan je dan in één keer vervangen met de gewenste afbeelding.

Klik op Choose Image om verder te gaan.

‘Actions with a single image’ instellingen
‘Actions with a single image’ instellingen

In deze stap kies je de afbeelding die je wil gebruiken als nieuwe uitgelichte afbeelding voor meerdere artikelen of pagina’s.

Selecteer de gewenste afbeelding en klik op Choose Image.

Klik op
Klik op “Choose Image”

Je zal deze afbeelding nu in het dashboard zien. Zorg ervoor dat dit inderdaad de goede afbeelding is, en dat de plugin de afbeelding herkent.

Gebruik de ‘Replace featured images by the selected image’ optie
Gebruik de ‘Replace featured images by the selected image’ optie

Scrol naar beneden tot onderaan de pagina en klik op Next

Klik op
Klik op “Next”

De volgende stap is Add a Filter, die in feite vraagt welke afbeeldingen je wil vervangen. Daarom klik je op Choose Images onder de sectie met de titel “Select the featured images you want to replace by the selected image.”

Klik op
Klik op “Choose Images”

In deze module kan je meerdere afbeeldingen selecteren in je Media Library. Het enige probleem is dat je dus niet kan zien welke afbeeldingen in je Media Library eerder zijn gebruikt als uitgelichte afbeelding.

Desalniettemin kan je één of meerdere afbeeldingen kiezen (meerdere door op Shift te drukken), en op Choose Images klikken om verder te gaan.

Kiezen van de afbeeldingen die je wil bewerken
Kiezen van de afbeeldingen die je wil bewerken

Alle geselecteerde afbeeldingen verschijnen als thumbnail previews in het dashboard van de plugin. Je kan eventueel teruggaan en meer afbeeldingen kiezen.

Klik op Preview Filtering om te zien welke afbeeldingen vervangen zouden worden.

Selecteer
Selecteer “Preview Filtering”

De volgende pagina legt uit welke huidige uitgelichte afbeeldingen vervangen worden door de afbeelding die je aan het begin gekozen hebt. Hier lijkt het erop dat er slechts twee van de geselecteerde afbeeldingen gebruikt worden als uitgelichte afbeeldingen in onze artikelen. Alleen die specifieke afbeeldingen zullen dus vervangen worden.

Als alles er verder goed uitziet en je wil de oude uitgelichte afbeeldingen inderdaad vervangen, dan klik je op Apply om het proces af te ronden.

Klik op
Klik op “Apply”

De laatste pagina laat de resultaten zien van de massa-bewerking, met details over de artikelen die nu nieuwe uitgelichte afbeeldingen hebben. Je kan zien dat twee van mijn artikelen nu een nieuwe uitgelichte afbeelding hebben, die allebei hetzelfde zijn. Precies wat we van plan waren.

Controleer de resultaten van de
Controleer de resultaten van de “Bulk Edit”

Je kan nu naar Posts > All Posts in je dashboard gaan om de artikelen in een lijst te zien, en controleren dat de uitgelichte afbeeldingen inderdaad vervangen zijn.

Zoals je kan zien hebben de twee artikelen die we eerder lieten zien nu inderdaad de nieuwe uitgelichte afbeelding.

Bekijk de uitgelichte afbeeldingen
Bekijk de uitgelichte afbeeldingen

Onthoud dat de initiële Select pagina in de Quick Featured Images plugin allerlei acties biedt voor je uitgelichte afbeeldingen. Hier zitten handige tools bij voor het vervangen van lelijke uitgelichte afbeeldingen of het oplossen van problemen met uitgelichte afbeeldingen die niet te zien zijn.

Je kan hiermee een actie voor meerdere pagina’s in één keer toepassen. In dit geval zou je willekeurig verschillende uitgelichte afbeeldingen instellen voor je artikelen, op basis van de foto’s die je in je Media Library hebt gekozen.

Een andere mogelijkheid is om een actie uit te voeren zonder geselecteerde afbeelding, waardoor je bijvoorbeeld een uitgelichte afbeelding die meerdere keren gebruikt wordt kan verwijderen, of wanneer je alle uitgelichte afbeeldingen zonder afbeeldingsbestand wil verwijderen.

Acties met één afbeelding of meerdere afbeeldingen
Acties met één afbeelding of meerdere afbeeldingen

De Quick Featured Images plugin biedt allerlei mogelijkheden, dus test de tools en kijk welke oudere of lelijke uitgelichte afbeeldingen je graag wil bewerken om je website eens goed op te ruimen.

Plugins om problemen met uitgelichte afbeeldingen in WordPress te repareren

Problemen met uitgelichte afbeeldingen kunnen verschillende oorzaken hebben. Soms is de beste oplossing het installeren van een nieuwe plugin en hopen dat die alle functies heeft om het op te lossen.

Uiteindelijk kan een thema of plugin het probleem ook veroorzaken. Dan kan je beter een plugin gebruiken die het conflict overschrijft dan je hele thema te moeten wisselen en je website opnieuw te moeten ontwerpen, alleen omdat je uitgelichte afbeeldingen niet goed werken.

Alhoewel niet alle plugins die uitgelichte afbeeldingen herstellen hetzelfde doen, zijn er een paar die het overwegen waard zijn voordat je je hele website overhoop gaat halen.

Featured Image from URL (FIFU)

FIFU plugin
FIFU plugin

De Featured Image from URL, of FIFU, plugin maakt het mogelijk om een externe afbeelding te gebruiken als uitgelichte afbeelding op artikelen en pagina’s. Hierdoor omzeil je het probleem van het uploaden van een afbeelding naar je WordPress Media Library en deze vervolgens te activeren als uitgelichte afbeelding.

Daardoor kan het problemen rond bestandsgrootte of verkeerde toegangsrechten oplossen. De plugin biedt een veld waar je een URL in kan plakken van een afbeelding, en die afbeelding vervolgens kan gebruiken als uitgelichte afbeelding.

Je moet hiervoor de afbeelding hosten op een externe plek en ervoor zorgen dat die afbeelding daar ook gehost blijft. We raden je aan om daarom alleen een media hosting platform te gebruiken, of een andere website die je zelf beheert. Het kan problemen opleveren en zelfs illegaal zijn om gewoon een afbeelding online op te zoeken, de URL te kopiëren en de afbeelding als uitgelichte afbeelding op je website te gebruiken, als je niet weet waar deze gehost wordt.

De FIFU plugin biedt ook functies voor het automatisch instellen van uitgelichte afbeeldingen vanuit afbeeldingen en video’s door het gebruiken van iframe tags en andere elementen. Je kan ook uitgelichte afbeeldingen instellen vanuit unieke bronnen, zoals een boek API of een ISBN, of zelfs via een artikeltitel of zoekmachine.

Quick Featured Images

Quick Featured Images plugin
Quick Featured Images plugin

We zagen de Quick Featured Images plugin al eerder in dit artikel. Het is vooral handig voor het vervangen van meerdere uitgelichte afbeeldingen in één keer. Dat is de voornaamste reden om deze plugin te gebruiken. Dit bespaart je namelijk een hoop tijd als je anders alles handmatig doet.

We vinden ook de mogelijkheid om regels in te stellen voor oude en toekomstige uitgelichte afbeeldingen erg handig. Zo kan je bijvoorbeeld voortaan altijd de eerste afbeelding in je content als uitgelichte afbeelding instellen. Ook kan je uitgelichte afbeeldingen toewijzen op basis van de auteur, tags of artikeltypen.

Of je nou je bestaande uitgelichte afbeelding overschrijft of nieuwe toevoegt de Quick Featured Images plugin kan je daar allemaal bij helpen.

Default Featured Image

De Default Featured Image plugin biedt een eenvoudige oplossing voor alle gevallen waarbij een uitgelichte afbeelding niet is ingesteld voor een artikel of pagina. Het maakt het opruimen van die artikelen erg makkelijk. De Default Featured Image plugin biedt namelijk enkele handige tools voor het toevoegen van een standaard uitgelichte afbeelding voor al je artikelen.

Default Featured Image plugin
Default Featured Image plugin

De plugin zoekt alle artikelen met een leeg veld voor de uitgelichte afbeelding en vult dit veld met de standaard afbeelding. Alhoewel dit meestal een tijdelijke oplossing is, kan het handig zijn voor het instellen van permanente uitgelichte afbeeldingen voor pagina’s of algemene artikelen. Je hebt alleen een eenvoudige foto nodig die relevant is voor je website op die pagina’s.

De instellingen van de plugin kan je vinden in de WordPress Media Settings, maar er is maar één veld dat je hoeft in te vullen. Upload daar de gewenste afbeelding en klik op Save.

Auto Featured Image

De Auto Featured Image plugin biedt een unieke optie voor het oplossen van problemen met uitgelichte afbeeldingen. Het maakt het uploaden van de uitgelichte afbeelding net wat makkelijker.

De plugin maakt een uitgelichte afbeelding op basis van de eerste afbeelding in een artikel, maar alleen als de uitgelichte afbeelding nog niet handmatig is ingesteld. Handig dus als een back-up voor de uitgelichte afbeelding wanneer je deze vergeet te uploaden, maar geen leeg veld wil hebben.

Auto Featured Image plugin
Auto Featured Image plugin

Het voordeel van deze methode is dat je niet afhankelijk bent van een standaard uitgelichte afbeelding die mogelijk niet relevant is voor je artikel. We kunnen aannemen dat de eerste afbeelding in een artikel eigenlijk altijd relevant is voor het onderwerp, dus dan hoef je je geen zorgen te maken dat de standaard uitgelichte afbeelding opgehaald wordt uit een bestand en dezelfde afbeelding op meerdere artikelen te zien is.

De plugin heeft ook een goede ingebouwde zoekmachine om op bijvoorbeeld Google, Pixabay en Unsplash te zoeken. Het werkt ook soepel samen met page builders zoals Gutenberg en Elementor. Auto Featured Image heeft zelfs een bulk tool voor uitgelichte afbeeldingen.

Multiple Featured Images

De Multiple Featured Images plugin biedt diverse features die handig zijn bij het oplossen van je problemen met uitgelichte afbeeldingen. Allereerst biedt het een alternatief voor het standaard limiet van WordPress van één uitgelichte afbeelding per artikel. Je kan dus diverse uitgelichte afbeeldingen uploaden en kiezen welke waar getoond wordt op je website.

De plugin gebruikt een widget en shortcode die beide vragen welke uitgelichte afbeelding je wil gebruiken wanneer je één van de tools gebruikt. Zo kan je bijvoorbeeld een verschillende uitgelichte afbeelding in je zijbalk gebruiken dan in de lijst met artikelen op je startpagina.

Multiple Featured Images plugin
Multiple Featured Images plugin

De plugin werkt zowel met artikelen als pagina’s, en ook met custom artikelen en WooCommerce producten. Je kan zoveel afbeeldingen uploaden als je wil, en kiezen welke uitgelichte afbeelding waar moet komen en hoe groot die moet zijn.

Deze plugin is dus ideaal voor mensen die twijfelen welke uitgelichte afbeelding ze willen gebruiken, of wanneer een bepaalde uitgelichte afbeelding perfect is voor het begin van het artikel, maar niet voor een zijbalk.

Best practices voor uitgelichte afbeeldingen

Een belangrijk deel van het ervoor zorgen dat uitgelichte afbeelding er goed uitziet is het begrijpen van de best practices voordat je ze überhaupt uploadt naar je WordPress website. Je kan problemen oplossen wanneer een uitgelichte afbeelding niet te zien is, of elke afbeelding handmatig bewerken.

Maar het is veel handiger om een standaardaanpak te hebben voor uitgelichte afbeeldingen om problemen zoveel mogelijk te voorkomen. Deze best practices beslaan van alles, van aanbevelingen voor het ontwerp tot strategieën voor het uploaden, zodat je uitgelichte afbeeldingen er altijd goed uitzien terwijl het je tegelijk minder tijd kost.

Maak je uitgelichte afbeeldingen relevant

Het nadeel van een standaard uitgelichte afbeelding is dat er een kans is dat je verschillende uitgelichte afbeeldingen hebt die niet relevant zijn voor een artikel. Het hele idee van een uitgelichte afbeelding is dat het een visuele introductie is voor het artikel, net zoals een titel en de eerste alinea dat doen, zodat de lezers weten wat ze kunnen verwachten van het artikel.

Wanneer je artikel bijvoorbeeld tips heeft over het gebruik van Instagram, is het logisch dat de uitgelichte afbeelding elementen bevatten die over Instagram gaan (zonder copyright natuurlijk), naast creatieve items die het artikel aantrekkelijker maken.

Buffer website
Buffer website

Relevantie is ook belangrijk wanneer je handmatig afbeeldingen toevoegt voor elk artikel. Het is nogal makkelijk om gewoon snel een willekeurige afbeelding te kiezen om tijd te besparen. Maar je kan beter genoeg tijd besteden aan het bepalen van de uitgelichte afbeelding, aangezien het vergelijkbaar is met de voorkant van een boek, dat ervoor zorgt dat mensen al dan niet geïnteresseerd raken.

Zorg dat je de rechten hebt voordat je een uitgelichte afbeelding post

Een goede manier om flinke problemen te krijgen met je afbeelding is door willekeurige afbeeldingen te gebruiken die je online gevonden hebt. Dit kan er namelijk voor zorgen dat de eigenaar van de afbeelding contact met je opneemt en je vraagt om uitgelichte afbeeldingen te verwijderen, of meteen een zaak aanspant.

Een goede vuistregel: Als je de foto niet zelf hebt gemaakt of ervoor betaald hebt, kan je deze waarschijnlijk niet gebruiken.

Er zijn natuurlijk uitzonderingen.

Het kan zijn dat je een afbeelding op je website kan gebruiken wanneer je deze van een website als Pexels of Unsplash vandaan haalt.

Maar zelfs bij die websites wordt je meestal gevraagd om de maker te vermelden, wat lastig kan zijn omdat uitgelichte afbeeldingen meestal geen ruimte voor bijschriften hebben.

Het vermelden van de maker is cruciaal om probleem met copyright te voorkomen.
Het vermelden van de maker is cruciaal om probleem met copyright te voorkomen.

Volg deze richtlijnen om ervoor te zorgen dat je uitgelichte afbeeldingen legaal zijn:

  1. Neem een foto met je eigen camera. Dat is natuurlijk de makkelijkste manier om alle juridische problemen te voorkomen.
  2. Kijk naar foto websites met een Creative Commons Dit zijn bijvoorbeeld Unsplash en Pexels.
  3. Aangezien WordPress uitgelichte afbeelding meestal bijschriften blokkeren, moet je de bronvermelding ergens anders in je artikel gebruiken.
  4. Betaal voor foto’s op websites zoals Shutterstock en iStockphoto.
  5. Maak je eigen graphics met gratis ontwerptools zoals Canva of Adobe Spark.
  6. Wanneer je een mooie foto ziet, kan je ook contact met de maker opnemen en vragen of je hun werk op je website mag gebruiken. Zij het gratis, tegen een prijs, of alleen met bronvermelding. Zorg ervoor dat je deze afspraak op schrift hebt (kan ook een e-mail zijn).

Hou het thema van je uitgelichte afbeeldingen consistent

Het belangrijkste is dat alle uitgelichte afbeeldingen relevant zijn voor de artikelen waar ze bij horen.

Maar je wil er ook voor zorgen dat er een consistent thema ontstaat. Dit maakt het maken en kiezen van uitgelichte afbeeldingen sneller, en verduidelijkt je merk en onderwerp.

Zo kunnen al je uitgelichte afbeeldingen bijvoorbeeld zwart-wit zijn. Of je kan juist kleurrijke animaties gebruiken, die natuurlijk nog steeds gaan over de artikelen.

Hou je huisstijl consistent in je uitgelichte afbeeldingen
Hou je huisstijl consistent in je uitgelichte afbeeldingen

Gebruik goede afbeeldingen die je kan verkleinen

Een uitgelichte afbeelding is niet anders dan de andere foto’s op je website. Je plaatst de afbeelding op een digitaal medium waar de resolutie van de foto niet zo hoog hoeft te zijn dat je deze perfect kan printen.

In het algemeen zullen de foto’s op je website een significant deel van de schijfruimte innemen, wat je laadtijden kan vertragen. Maar je wil er wel voor zorgen dat de foto’s er echt goed uitzien, dus je moet altijd zoveel mogelijk gaan voor foto’s met een hoge resolutie.

Wanneer je een uitgelichte afbeelding zoekt, moet je altijd eerst naar een grotere en betere foto kijken. Op die manier kan je dit vervolgens verkleinen voor de digitale toepassing, terwijl je de resolutie bewaart.

Het vergroten van een foto is een absolute no-go. Maar ook het opslaan van je grotere foto’s met hoge resolutie in het originele format zal problemen bij het laden opleveren.

Gebruik een snelle tool voor resizen en optimaliseren van afbeeldingen

Aangezien je altijd afbeeldingen met een hoge resolutie wil gebruiken als uitgelichte afbeeldingen, kan je de optimalisatie goed automatiseren. Het is immers een hoop werk om elke keer handmatig de afbeelding te verkleinen, bij te snijden en op te slaan wanneer je aan het uploaden bent.

Afbeeldingsoptimalisatie door Imagify
Afbeeldingsoptimalisatie door Imagify

Een plugin voor afbeeldingsoptimalisatie doet al het vervelende werk voor je, zodat je uitgelichte afbeelding er mooi uit zien maar je website niet trager maken.

We hebben hier een goede gids voor je over het optimaliseren van WordPress afbeeldingen. In het algemeen kan je het beste kiezen voor een plugin die je afbeeldingen optimaliseert op een externe server. Dit voorkomt problemen met je eigen server. We raden oplossingen aan zoals Optimole en Imagify.

Optimaliseer de uitgelichte afbeelding voor SEO

Een ander element van het optimaliseren van je afbeeldingen gaat over hoe die afbeeldingen te zien zijn in zoekmachines. Ze zijn namelijk erg belangrijk om hoger in de rankings te komen. Elke gehoste afbeelding, dus inclusief uitgelichte afbeeldingen, bevat metadata die zoekmachines gebruiken om te bepalen waar je artikel of pagina over gaat.

Wanneer je je richt op een keyword, dan is deze metadata een goede plek om zoekmachines te laten zien dat de afbeelding relevant is voor het onderwerp. Je moet geen keywords erin gaan proppen. In plaats daarvan kan je beter kort uitleggen wat er in de afbeelding te zien is, en eventueel één keyword toevoegen om je rankings te verbeteren.

Het belangrijkste stuk metadata van afbeelding is de Alt Text, die je kan vinden door een afbeelding te openen in de Media Library.

Instellen van de
Instellen van de “Alt Text” van afbeeldingen

Of een goede alternatieve tekst voor afbeelding je SEO nou helpt of niet, je moet het sowieso doen vanwege de toegankelijkheid.

Toegankelijkheid is cruciaal voor elke website
Toegankelijkheid is cruciaal voor elke website

Many blind people are using the internet through screen readers. Make your site accessible to them.

Zorg dat Open Graph actief is

We hebben Open Graph al uitgebreid behandeld. Maar hierbij nogmaals een herinnering dat je ervoor moet zorgen dat je hostingprovider de tools moet bieden om uitgelichte afbeelding weer te geven, of dat je een plugin gebruikt die Open Graph activeert.

De uitgelichte afbeelding moet snel verschijnen wanneer iemand je artikel of pagina wil delen op een sociaal netwerk. Anders loop je een groot risico dat iemand de post helemaal niet plaats, of dat je merk er onprofessioneel uitziet wanneer gebruikers een link toch delen.

Overweeg een plugin die lege velden voor uitgelichte afbeeldingen vult

We hebben ook deze oplossing eerder behandeld, maar ook dit past binnen de best practices. Een fout zit in een klein hoekje, en kan ervoor zorgen dat er geen uitgelichte afbeelding voor je website is.

Overweeg het gebruiken van een plugin die een standaard uitgelichte afbeelding toewijst aan al je artikelen wanneer je dit vergeet te doen. Het helpt ook voor oudere artikelen die geen goede uitgelichte afbeeldingen hebben.

Samenvatting

Het maken van een website met geweldige content, om er vervolgens achter te komen dat je uitgelichte afbeeldingen niet werken is zowel frustrerend als schadelijk voor je merk. We hopen dat je met deze gids in de hand de meeste problemen met uitgelichte afbeeldingen die niet te zien zijn kan oplossen. Zorg ervoor dat je altijd je uitgelichte afbeelding test na het uploaden, en dat alle instellingen goed staan voordat je doorgaat naar ingewikkeldere oplossingen.

Je hebt inmiddels ook al veel tips gekregen om je afbeeldingen beter te kunnen bewerken en je workflow te verbeteren. Voor meer tips over afbeeldingsoptimalisatie kan je onze uitgebreide gids over het optimaliseren van afbeeldingen lezen. Dit is ook verplicht leesvoer als je een snellere WordPress website wil.

Nu je de uitgelichte afbeeldingen klaar hebt staan, kan je naar hartelust gaan delen!

Hebben we nog iets belangrijks gemist? Laat een reactie achter als je nog vragen hebt over uitgelichte afbeeldingen of andere problemen hebt met uitgelichte afbeeldingen bij WordPress.

Salman Ravoof

Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.