Hoe Maak Je de Perfecte WordPress Uitgelichte Afbeelding (Gids voor Grootte & Ontwerp)

Gepubliceerd: door Ian Hernandez
Hoe Maak Je de Perfecte WordPress Uitgelichte Afbeelding (Gids voor Grootte & Ontwerp) thumbnail

Om nieuwe bezoekers naar je site te trekken, kun je overwegen om regelmatig blogposts te publiceren. Echter, zonder uitgelichte afbeeldingen, zien je posts er waarschijnlijk niet uitnodigend genoeg uit om klikken te verdienen.

Gelukkig kun je gemakkelijk goed ontworpen uitgelichte afbeeldingen voor je artikelen maken. Zodra je weet hoe je de juiste foto’s kunt vinden, ze correct kunt dimensioneren en ze kunt optimaliseren voor zoekmachines, kun je jouw WordPress berichten direct nieuw leven inblazen.

In deze post leggen we uit wat een uitgelichte afbeelding is. Daarna delen we enkele tips over hoe je ze kunt gebruiken. Laten we beginnen!

In WordPress is de uitgelichte afbeelding de visuele vertegenwoordiging van een specifieke post, pagina of aangepast berichttype. Wanneer iemand je website bezoekt, verschijnen deze afbeeldingen meestal bovenaan de berichten of in je blogfeed:

WordPress uitgelichte afbeeldingen

Essentieel is de uitgelichte afbeelding de standaardminiatuur van je bericht. Als iemand het bericht deelt op sociale media, zal deze afbeelding verschijnen bij de link:

Uitgelichte afbeelding van sociale media

In WordPress worden de instellingen voor de uitgelichte afbeelding bepaald door je thema. Dit omvat de locatie en grootte van je afbeeldingen.

Doorgaans worden uitgelichte afbeeldingen op de volgende plaatsen getoond:

  • Het bovenste gedeelte van berichten of pagina’s
  • Pagina’s op je website die linken naar blogberichten, zoals je WordPress-startpagina, aanbevolen berichtensectie, of zoekresultaten
  • Miniaturen voor sociale media links

Soms kunnen uitgelichte afbeeldingen worden opgenomen in afbeeldingsgalerijen of sliders. Je kunt ze ook zien als achtergrondafbeeldingen.

Als je nieuw bent bij WordPress, vraag je je misschien af waarom je een uitgelichte afbeelding nodig hebt voor elke post op je website. Echter, deze kunnen de sleutel zijn tot het maken van een goede eerste indruk bij nieuwe bezoekers.

Nadat gebruikers op een link naar een van je berichten hebben geklikt, zijn de uitgelichte afbeeldingen vaak het eerste wat ze zien en dit kan hen genoeg boeien om verder te lezen:

Uitgelichte afbeelding van bericht

Je hebt waarschijnlijk een lijst van je gepubliceerde berichten op je startpagina. Je kunt bezoekers motiveren om je inhoud te lezen door goed ontworpen uitgelichte afbeeldingen te gebruiken.

Plus, het hebben van een uitgelichte afbeelding voor elke post kan je helpen visuele consistentie op je website te creëren:

Uitgelichte afbeeldingen op de startpagina

Wanneer je jouw berichten op sociale media deelt, kunnen uitgelichte afbeeldingen helpen om je inhoud te adverteren aan gebruikers die door hun feeds bladeren. Een goed ontworpen afbeelding kan de betrokkenheid vergroten en meer klikken naar je site genereren.

Zoals we eerder vermeldden, kunnen verschillende WordPress-thema’s verschillende formaten hebben voor uitgelichte afbeeldingen. Het algemene formaat is echter 1200 x 628 pixels.

Zo ziet dit eruit met het standaard Twenty Twenty-Two thema:

Grootte van uitgelichte afbeelding

Deze grootte werkt effectief met veel WordPress-thema’s. Echter, de grootte van je uitgelichte afbeelding kan variëren op basis van je persoonlijke voorkeur en de lay-out van je thema.

Het is belangrijk om op te merken dat WordPress je afbeeldingen zal aanpassen naar de standaardinstellingen. Telkens wanneer je een afbeelding uploadt, worden er drie verschillende versies gecreëerd:

  • Miniatuur: 150 x 150 px
  • Middelgroot: 300 x 300 px
  • Groot: 1024 x 1024 px

Als je de originele grootte van de uitgelichte afbeelding wilt behouden, wordt dit de ‘Volledige Grootte.’ Om een van deze afmetingsopties te bewerken, kun je navigeren naar Instellingen > Media:

WordPress media-instellingen

Hier kun je de breedte en hoogte bijwerken met nieuwe waarden. Zodra je je wijzigingen opslaat, zullen geüploade afbeeldingen naar deze afmetingen worden aangepast.

Je kunt ook een aangepaste uitgelichte afbeeldingsgrootte toevoegen. Voordat je dit doet, is het een goed idee om je website te back-uppen. Na deze stap kun je de volgende code toevoegen aan je functions.php bestand:

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

Zorg ervoor dat je deze waarden bijwerkt met de nieuwe afmetingen van je uitgelichte afbeeldingen. Hier is een voorbeeld van hoe dit eruit zou kunnen zien:

add_image_size( 'post-thumbnail size', 800, 1500 );

Vervolgens moet je de nieuwe grootte in je thema weergeven. In je themasjabloonbestand, werk de the_post_thumbnail() functie bij:

if ( has_post_thumbnail() ) {
the_post_thumbnail( 'your-custom-size' );
}

Zodra je het bestand opslaat, heb je een nieuwe aangepaste uitgelichte afbeelding!

Ontvang inhoud rechtstreeks in uw inbox

Meld u nu aan om alle laatste updates rechtstreeks in uw inbox te ontvangen.

Om een uitgelichte afbeelding in te stellen, open je WordPress-dashboard en maak je een nieuwe post. Kijk dan in de rechterzijbalk naar de Featured Image-sectie:

Voeg WordPress uitgelichte afbeelding toe

Hier, klik op Set Featured Image. Dit opent een pop-up waar je jouw mediabestand kunt uploaden. Je kunt ook een afbeelding selecteren uit je Media Library:

Selecteer uitgelichte afbeelding

Als je de grootte moet aanpassen, zoek dan de Edit Image-knop. Gebruik vervolgens de verschillende bewerkingsopties om de afbeelding te schalen, bijsnijden, roteren of spiegelen zoals nodig:

Uitgelichte afbeelding bewerken

Wanneer je klaar bent, klik op Instellen als uitgelichte afbeelding. Je ziet nu een voorbeeld van de afbeelding terwijl je de post maakt:

Nieuwe uitgelichte afbeelding van WordPress

Voordat je het bericht publiceert, wil je het voorvertonen om te zorgen dat de uitgelichte afbeelding wordt getoond. Bedenk dat je thema mogelijk specifieke afmetingen vereist om correct te werken. Je kunt verwijzen naar de documentatie van je thema als je problemen ondervindt tijdens dit proces.

Daarnaast kun je een paar plugins installeren om dit proces gemakkelijker te maken. Bijvoorbeeld, Auto Featured Image zal automatisch de eerste foto in je bericht gebruiken als de uitgelichte afbeelding. Je kunt ook Default featured image gebruiken om een afbeelding te selecteren die wordt gebruikt als uitgelichte afbeelding voor het geval je vergeet er een toe te voegen aan een bericht.

Uitgelichte afbeeldingen kunnen je website veranderen in een boeiende, media-rijke ervaring. Laten we enkele beste praktijken bespreken voor het maken ervan!

1. Wees Relevant en Consistent

Wanneer correct gebruikt, kunnen uitgelichte afbeeldingen je blogposts verbeteren en ze aantrekkelijker maken voor bezoekers, maar er zijn een paar dingen waar je rekening mee moet houden.

Als eerste wil je willekeurige afbeeldingen vermijden. Een uitgelichte afbeelding moet dienen als een introductie tot een bericht, dus het moet relevant zijn voor de inhoud.

Bijvoorbeeld, als je een foodblog beheert, publiceer je waarschijnlijk berichten met nieuwe recepten. In dit geval kan je uitgelichte afbeelding een foto zijn van de bereide maaltijd:

Relevante uitgelichte afbeelding

Het is ook een goede gewoonte om je uitgelichte afbeeldingen consistent te houden door je hele website. Aangezien deze getoond zullen worden op je homepage, archief en blog, wil je foto’s die overeenkomen met je webontwerp:

Consistente uitgelichte afbeeldingen

Om de juiste uitgelichte afbeelding te vinden, overweeg je huidige WordPress-thema en lay-out. Kies vervolgens een afbeelding met hoge resolutie die gemakkelijk verkleind kan worden. Nadat je de post hebt gemaakt, zorg ervoor dat je een voorbeeld bekijkt om te beoordelen hoe goed de afbeelding in je website past.

2. Gebruik Geen Auteursrechtelijk Beschermde Afbeeldingen

Terwijl je op het internet afbeeldingen bekijkt, kun je een foto tegenkomen die geweldig zou staan als uitgelichte afbeelding. Voordat je deze echter uploadt naar je WordPress-site, moet je ervoor zorgen dat deze niet auteursrechtelijk beschermd is om juridische problemen te voorkomen.

Bij het zoeken naar afbeeldingen kun je meestal alles gebruiken onder een Creative Commons licentie. Deze zijn gratis te downloaden en te gebruiken op je website, behalve als ze voor commerciële doeleinden zijn.

Om afbeeldingen van Creative Commons te vinden, open je Google Afbeeldingen. Klik vervolgens op Gereedschap > Gebruiksrechten > Creative Commons-licenties. Zodra je je zoekopdracht verfijnt, krijg je een schat aan gratis afbeeldingen om uit te kiezen:

Afbeeldingen met Creative Commons-licentie

Er zijn ook hele websites met deze stockfoto’s. Op een platform zoals Unsplash, kun je foto’s in hoge resolutie downloaden die vrij zijn van auteursrechtclaims:

Unsplash website

Een ander alternatief is om je eigen uitgelichte afbeeldingen te maken. Door zelf foto’s te nemen of graphics te creëren in Canva, kun je ervoor zorgen dat je geen auteursrechtschendingen begaat. Bovendien zijn deze volledig origineel!

Als je regelmatig berichten publiceert, zullen uitgelichte afbeeldingen veel ruimte in beslag gaan nemen in je Mediabibliotheek. Als ze niet goed geoptimaliseerd zijn, kunnen deze foto’s de prestaties van je site negatief beïnvloeden.

In wezen houdt het optimaliseren van je afbeeldingen het verkleinen van hun bestandsgrootte in. Door je uitgelichte afbeeldingen te comprimeren, kun je de laadtijd minimaliseren.

Als je dit niet doet, kun je eindigen met een slechte Core Web Vitals score. Afbeeldingen kunnen te lang duren om te renderen, en je zult prestatieproblemen zien in je PageSpeed Insights rapporten:

Mislukt Core Web Vitals rapport

Gelukkig is er een eenvoudige oplossing voor dit veelvoorkomende afbeeldingsprobleem. Een plugin zoals TinyPNG kan afbeeldingen automatisch comprimeren als je ze uploadt:

TinyPNG plugin

Bovendien kun je zelfs alle afbeeldingen die je al naar je website hebt geüpload comprimeren. TinyPNG maakt het mogelijk om alle JPEG, PNG of WebP afbeeldingen in je Mediatheek in bulk te optimaliseren.

4. Oude Thumbnails Opnieuw Genereren

Wanneer je afbeeldingen uploadt naar WordPress, worden ze aangepast aan de pixelrichtlijnen in je instellingen. Zodra je nieuwe standaardafmetingen instelt, behouden je eerder geüploade afbeeldingen nog steeds de verouderde afmetingen.

Als je jouw uitgelichte afbeeldingen wilt aanpassen, kun je ze handmatig opnieuw uploaden. Dit zal echter enige tijd in beslag nemen.

Om dit probleem op te lossen, kun je een WordPress plugin zoals reGenerate Thumbnails Advanced installeren. Deze tool kan de miniatuurafbeeldingen voor elk van de afbeeldingen in je mediabibliotheek opnieuw genereren:

Regenerate Thumbnails Advanced plugin

Nadat je de plugin hebt geïnstalleerd en geactiveerd, ga naar Tools > Regenerate Thumbnails. Onder Regenerate Options, selecteer het vakje naast Regenerate only Featured Images:

Regenereer uitgelichte afbeeldingen

Ten slotte, klik op Regenerate. Dit zal automatisch al je uitgelichte afbeeldingen bijwerken met de juiste grootte.

5. Optimaliseer Afbeeldingen Voor Zoekmachines

Als website-eigenaar weet je waarschijnlijk al hoe ontzettend belangrijk Zoekmachineoptimalisatie (SEO) is. Als je dure advertentiemethoden wilt vermijden, wil je bovenaan de zoekresultaten komen door je inhoud te optimaliseren. Dit kan je helpen meer organisch verkeer aan te trekken.

Het hebben van uitgelichte afbeeldingen kan je helpen de SEO van je site te verbeteren. Door slechts een paar elementen aan te passen, kun je je afbeeldingen aantrekkelijker maken voor zoekmachines en gebruikers.

Eerst wil je ervoor zorgen dat je alt-tekst toevoegt. Dit zal de hoofdafbeelding beschrijven aan zoekmachines en schermlezers. Je zou bijvoorbeeld kunnen schrijven “Oranje en witte kat staande in een pompoenveld”:

Uitgelichte afbeelding alt tekst

Denk eraan om het trefwoord van de post op te nemen in de alt-tekst. Op deze manier kan Google begrijpen waar de post over gaat en deze hoger rangschikken voor gerelateerde zoekopdrachten. Op dezelfde wijze kun je deze doel-trefwoorden opnemen in de titel, onderschrift en beschrijving voor de uitgelichte afbeelding.

6. Verbeter Sociale Post Miniaturen

Social media kan het perfecte platform zijn voor het promoten van je blogposts. Voordat je sociale deling aanmoedigt, is het cruciaal om je uitgelichte afbeeldingen voor deze platforms te optimaliseren.

Je kunt eenvoudig je sociale media links aanpassen met een plugin zoals Yoast SEO. Bijvoorbeeld, de premium versie stelt je in staat om voorbeelden te zien van je Twitter en Facebook thumbnails.

Om te beginnen, installeer en activeer Yoast SEO. Vervolgens, zoek naar Yoast SEO > Social. Op deze pagina, vul de URL’s in voor je verschillende sociale media pagina’s:

Voeg sociale media-accounts toe

Open dan een nieuw bericht en scroll naar beneden naar de Yoast SEO-instellingen. In het tabblad Social kun je op Selecteer afbeelding klikken om je uitgelichte afbeelding te uploaden.

Uitgelichte afbeelding voor sociale berichten

Je kunt ook een titel en beschrijving toevoegen voor elk sociaal mediaplatform. Dit geeft bezoekers een voorproefje van je inhoud. Zodra je het bericht op sociale media publiceert, zal het een uitgelichte afbeelding en een fragment bevatten die precies overbrengen waar het artikel over gaat.

Uitgelichte afbeeldingen kunnen je berichten laten opvallen. Of mensen je inhoud nu bekijken op sociale media of op je website, ze kunnen naar de uitgelichte afbeelding kijken om te zien waar het bericht over gaat voordat ze beginnen met lezen.

Om te herzien, hier is hoe je de perfecte WordPress uitgelichte afbeelding kunt maken:

  1. Wees relevant en consistent.
  2. Zoek auteursrechtvrije afbeeldingen op platforms zoals Unsplash.
  3. Comprimeer uitgelichte afbeeldingen met TinyPNG.
  4. Regenereer oude thumbnails met reGenerate Thumbnails Advanced.
  5. Optimaliseer afbeeldingen voor zoekmachines met op trefwoorden gerichte alt-teksten.
  6. Verbeter thumbnails van sociale berichten met de sociale instellingen van Yoast SEO.

Wanneer je je eigen uitgelichte afbeeldingen maakt, kun je een originele website bouwen zonder te maken te krijgen met auteursrechtkwesties. Bij DreamHost kunnen onze diensten voor aangepast webdesign je helpen de juiste afbeeldingen op je site te gebruiken.

Ad background image

DreamHost Maakt Webdesign Eenvoudig

Onze ontwerpers kunnen een prachtige website vanaf NUL creëren die perfect aansluit bij je merk en visie u2014 allemaal gecodeerd met WordPress zodat je je inhoud in de toekomst kunt beheren.

Meer Leren