Je plakt de link van je website in een Facebook-post, een WhatsApp-bericht of een LinkedIn-bericht. In plaats van een mooie preview met jouw logo en een aantrekkelijke afbeelding verschijnt er een vage cirkel, een lege witte tile of erger: helemaal niets. We zagen het deze week nog gebeuren bij circularmedia.nl. Een paar instellingen later stond Sunny netjes als thumbnail in elke gedeelde link. In dit artikel leggen we precies uit hoe je dat zelf doet op een WordPress-site.
Het instellen van je Open Graph image is een van die taken die makkelijk drie jaar blijft liggen, omdat hij nergens in een waarschuwing oppopt. Geen plugin die rood knippert, geen Google die je belt. Maar elke keer dat iemand jouw site deelt, krijgt die persoon de keuze om een lelijke preview wel of niet door te sturen. Vaak doen ze het dan maar niet. Een gemiste kans, en goedkoop op te lossen.
Wat is een Open Graph image en waarom heb je er een nodig?
Open Graph is een protocol dat Facebook in 2010 introduceerde om webpagina's te laten beschrijven hoe ze er in een gedeelde preview uit moeten zien. Inmiddels lezen vrijwel alle grote platforms deze tags: Facebook, LinkedIn, WhatsApp, Slack, Discord, X (Twitter), Telegram, Microsoft Teams en zelfs iMessage. Ze pakken drie dingen uit je HTML:
- og:title, de titel die in de preview verschijnt
- og:description, het korte beschrijvinkje eronder
- og:image, de thumbnail die het meeste opvalt
Plus een paar technische varianten zoals og:image:width, og:image:height en og:image:type. En voor X is er een aparte familie van twitter:image-tags, maar die regelt elke fatsoenlijke SEO-plugin tegenwoordig automatisch mee.
Als er geen og:image-tag in je HTML staat, gokt het platform zelf. Facebook valt vaak terug op je favicon (het kleine pictogrammetje in de browser-tab). Bij ons was dat een ronde groene logomark van 32 pixels. Op de preview-tile van 500 pixels breed wordt dat een vlekje. Niemand klikt op een vlekje.
Welke afmetingen en specs moet een Open Graph image hebben?
Een Open Graph image moet aan drie eisen voldoen om er overal goed uit te zien:
- Afmeting: 1200 bij 630 pixels. Dat is de aspectratio 1.91:1 die Facebook en LinkedIn gebruiken. Kleiner mag (minimaal 600 bij 315), maar je verliest scherpte. Groter is verspilling.
- Bestandsformaat: PNG of JPG. WebP wordt op steeds meer platforms ondersteund, maar nog niet overal betrouwbaar. Hou het simpel met PNG (transparantie mogelijk) of JPG (kleiner bestand).
- Bestandsgrootte: onder 8 MB. In de praktijk wil je onder 500 KB blijven, anders laadt de preview traag of valt hij weg. Onze Sunny-thumbnail is 186 KB.
Belangrijk om te onthouden: platforms croppen vaak rondom de randen. Wat in het midden staat is altijd zichtbaar. Wat aan de randen zit, kan worden afgesneden in bepaalde weergaven (mobiele apps cropt strakker dan desktop-browsers). Plaats je belangrijkste boodschap dus binnen het centrale 1100 bij 580 vlak.
Wat je nodig hebt om dit te doen
Voor het hele proces heb je twee dingen nodig:
- Een ontworpen Open Graph image die jouw merk goed uitstraalt. Hier zit het echte werk.
- Een SEO-plugin op je WordPress-site die de Open Graph-tags voor je in de HTML zet. RankMath (gratis, wat wij gebruiken) of Yoast SEO (gratis) doen dit allebei prima. Vrijwel elke WordPress-site heeft al een van de twee draaien.
Als je nog geen SEO-plugin hebt, installeer dan eerst RankMath via Plugins → Nieuw → RankMath SEO. De installatie-wizard duurt 5 minuten en regelt meteen ook andere zaken zoals XML-sitemap, schema-markup en meta-titles. Voor lezers die meer willen weten over wat een SEO-plugin allemaal regelt: lees ons artikel Bloggen met SEO-resultaat.
Stap 1: Ontwerp je Open Graph image
Dit is veruit de belangrijkste stap, en tegelijk de stap waar de meeste MKB-ondernemers stranden. Een Open Graph image is een mini-poster die jouw bedrijf in één oogopslag moet vertellen wat je doet en waarom iemand zou moeten klikken. In de preview-tile op een feed concurreer je met katjes-video's en nieuws-koppen, dus de drempel ligt hoger dan je denkt.
Een paar harde regels die wij hanteren:
- Eigen brand-elementen domineren. Logo, kleur of mascotte moet in het oog springen, niet een stockfoto.
- Maximaal 6 woorden tekst. Op een mobiele tile van 350 pixels breed wordt alles boven die hoeveelheid onleesbaar.
- 1 of 2 contrastrijke kleuren. Subtiele pasteltinten verdwijnen in de feed. Werk met één donkere of felle accent-kleur.
- Geen kleine letters of fijne details. Een platform comprimeert je afbeelding voordat hij in de feed verschijnt. Dunne lettertypes worden wazig.
Bij ons zelf ging het zo: we hebben Sunny (onze gele robot-mascotte) rechts in beeld geplaatst, links staat de wordmark Circular Media in dik zwart, daaronder een gele accent-stripe, daaronder de regel “Websites that convert.” en helemaal onderaan ons domein in een mono-lettertype. Cream-kleurige achtergrond zodat hij past bij de tone of voice van de homepage. Het is geen gelikte studio-foto, maar hij vertelt in 1 seconde wat we doen.
Geen designer in huis? Canva heeft een gratis template-categorie Facebook Post in 1200 bij 630 pixels. Sleep je logo erin, kies een achtergrondkleur, typ een tagline. Klaar in 15 minuten. Belangrijker dan perfect is consistent: gebruik dezelfde kleuren en lettertypes als op je website.
Stap 2: Upload de afbeelding naar je WordPress media-bibliotheek
Sla je ontwerp op als PNG op je computer, met een logische bestandsnaam zoals bedrijfsnaam-og-1200x630.png. Een goede bestandsnaam helpt Google ook bij het indexeren als afbeelding.
In WordPress: ga naar Media → Nieuwe toevoegen en upload het bestand. Klik na de upload op de afbeelding en check twee dingen:
- Alt-tekst: vul een korte beschrijving in (“Logo van Bedrijfsnaam op cream achtergrond met mascotte rechts”). Dit is voor toegankelijkheid én voor zoekmachines.
- Bestandsgrootte: controleer dat de afbeelding onder de 500 KB blijft. Zo niet, comprimeer hem via TinyPNG.com voor je hem opnieuw uploadt.
Kopieer de volledige URL van de afbeelding (rechts op het scherm, onder “Bestand-URL”). Die heb je in stap 3 nodig.
Stap 3: Stel de afbeelding in als standaard Open Graph image
Nu komt het cruciale deel. Hier vertel je je SEO-plugin: dit is de afbeelding die overal mee mag wanneer iemand een link van mijn site deelt. Hieronder per plugin:
In RankMath SEO
Ga in WordPress naar Rank Math → Algemene instellingen → Social Meta. Je ziet een veld “Default Open Graph thumbnail”. Klik op “Add or Upload Image”, kies je net-geuploade afbeelding en sla op.
RankMath voegt dan automatisch een tag toe op alle pagina's van je site die er ongeveer zo uitziet:
<meta property="og:image" content="https://jouwsite.nl/wp-content/uploads/jouw-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content="https://jouwsite.nl/wp-content/uploads/jouw-image.png" />Plus voor je homepage afzonderlijk: scroll iets verder naar “Homepage” en zet daar dezelfde afbeelding in “Facebook image”. Anders pakt RankMath voor de homepage soms een andere afbeelding op.
In Yoast SEO
Ga naar Yoast SEO → Algemeen → Social. Onder het tabblad “Facebook” vink je “Open Graph metadata toevoegen” aan. Daaronder zie je een veld “Standaardafbeelding”. Klik op “Afbeelding uploaden” en kies je bestand. Sla op.
Yoast doet daarna hetzelfde als RankMath, alleen via iets andere meta-tag-namen. Het effect voor het delen is identiek.
Test dat het werkt
Open je homepage in een nieuw tabblad. Klik rechts op een lege plek, kies “Paginabron bekijken” (Cmd+U op Mac, Ctrl+U op Windows). Zoek met Cmd+F naar og:image. Je moet minimaal drie regels zien staan met dezelfde URL als die je net hebt opgeslagen. Geen treffer? Plugin-cache flushen of even controleren of je de afbeelding wel hebt opgeslagen.
Stap 4: Hoe forceer je een re-scrape van eerder gedeelde URLs?
Hier zit een valkuil waar bijna iedereen tegenaan loopt: Facebook en LinkedIn cachen Open Graph-data agressief. Zodra zij een URL één keer hebben gescraped, blijven ze 24 tot 48 uur dezelfde preview tonen, zelfs als je intussen alles hebt aangepast.
Voor nieuwe shares is dat geen probleem, je nieuwe afbeelding pakken ze meteen op. Maar voor URLs die je in het verleden al eens hebt gedeeld (denk aan oude LinkedIn-posts, een homepage die je in je e-mailhandtekening hebt staan, of een link in een eerdere nieuwsbrief), heb je een force-refresh nodig.
Voor Facebook:
- Ga naar de Facebook Sharing Debugger.
- Plak de URL die je wilt vernieuwen.
- Klik op “Scrape Again”. Onder “Link Preview” zie je live wat Facebook vanaf nu zal tonen.
- Herhaal voor je belangrijkste pagina's (homepage, diensten-pagina, een paar populaire blog-artikelen).
Voor LinkedIn werkt het iets anders. Ga naar de LinkedIn Post Inspector, vul de URL in en klik op “Inspect”. LinkedIn re-scrapet meteen en toont de nieuwe preview. Een gratis tool die werkt als een handgranaat in de juiste richting.
WhatsApp heeft geen eigen tool, maar je kunt forceren door ?v=1 achter de URL te plakken in een test-bericht. Dat ziet WhatsApp als een nieuwe URL en hij scrapet vanaf nul. Daarna verwijder je het bericht en deel je de echte URL.
Stap 5: Per-pagina overrides als je dat wilt
Wat we tot nu toe hebben opgezet is een default: voor elke pagina op je site die geen eigen Open Graph-image heeft, gebruikt het platform de afbeelding die je net hebt ingesteld. Maar voor specifieke pagina's kun je een afwijkende afbeelding instellen.
Bij een blog-artikel bijvoorbeeld: WordPress' Featured image (de uitgelichte afbeelding) wordt door RankMath en Yoast automatisch als Open Graph-image gebruikt. Dat is precies wat je wilt. Zo verschijnt bij het delen van een artikel niet je generieke logo, maar de hero-afbeelding van dat specifieke artikel. Veel persoonlijker en relevanter.
Voor een belangrijke landingspagina (denk aan je diensten-pagina of een speciale aanbieding) kun je ook een eigen Open Graph-image instellen. Open de pagina in je WordPress-editor, scroll naar de RankMath of Yoast meta-box onderaan, klik op het “Social” tabblad en upload daar een aparte afbeelding. Die wint dan van de default.
Onze ervaring: voor de meeste MKB-sites is één default Open Graph-image plus het automatisch oppikken van featured images voor blog-artikelen al meer dan genoeg. Pas wanneer je echt grote campagne-pagina's hebt, loont het om er extra werk in te steken.
Eerlijke caveats
Dit proces werkt in 95% van de gevallen meteen. Maar er zijn een paar dingen die we tegenkomen bij audits van MKB-sites:
- Caching plugins kunnen de oude HTML serveren. WP Rocket, W3 Total Cache, of WP-Optimize bewaren je pagina's in een statisch bestand. Na het instellen van je Open Graph-image: flush de cache. Zonder dat blijven scrapers je oude tags zien.
- Niet alle clients tonen Open Graph. Outlook desktop-mail laat geen preview zien. Sommige Slack-werkruimten hebben link-previews uitgeschakeld via admin-instelling. Dat is hun keuze, niet jouw probleem.
- iMessage en Apple-clients zijn raar. Apple gebruikt een eigen Link Preview-systeem dat soms Open Graph leest en soms hun eigen heuristieken toepast. Wij hebben gemerkt dat het meestal werkt, maar accepteer dat er soms een afwijking is.
- De afbeelding kan nog steeds wazig overkomen. Mobiele apps comprimeren previews extra. Zorg dat je hoofdelementen groot en met sterke kleur-contrasten zijn, dan blijft hij ook na compressie scherp.
Als de preview na een Facebook-scrape nog steeds niet klopt, controleer dan via de paginabron of je og:image-URL daadwerkelijk de juiste afbeelding bevat. 9 van de 10 gevallen waar de fix “niet werkt”, blijkt er een cache-probleem of een verkeerde plugin-instelling onder te liggen.
Wat levert een goede Open Graph image jouw bedrijf op?
De directe winst is moeilijk in cijfers te vangen, want je meet niet hoeveel mensen niet doorklikten op een vage preview. Maar de indirecte effecten zijn duidelijk:
- Brand-herkenning. Elke keer dat iemand jouw link deelt, ziet zijn netwerk een consistent visueel beeld. Over een jaar is dat tientallen tot honderden “mini-advertenties” in feeds en chats.
- Hogere click-through. Onze ervaring uit audits: een professionele preview-tile verdubbelt grofweg de click-through-rate van een gedeelde link. Niet op alle posts evenredig, maar gemiddeld zeker.
- Vertrouwen. Een lege of generieke preview signaleert “deze ondernemer let niet op details”. Voor B2B-leads die nog beslissen of ze je willen leren kennen, weegt dat zwaarder dan je denkt.
Een goede Open Graph-image instellen is een avond werk, maximaal. Daarna staat hij er en doet hij zijn werk, jaar in jaar uit. Een van die zeldzame online-marketing-taken waar je één keer iets goed doet en blijvend profiteert.
Lees ook ons artikel over blogposts die niet in Google staan, voor een ander veel-voorkomend probleem waar je achter komt door je website serieus te bekijken. Of het 4-mechanismen-model, waarin we uitleggen hoe een blog daadwerkelijk klanten oplevert, plus waarom de eerste indruk (zoals een link-preview) zwaar telt.
Veelgestelde vragen
Wat zijn de ideale afmetingen voor een Open Graph image?
De ideale afmeting is 1200 bij 630 pixels (aspectratio 1.91:1). Dat is het formaat dat Facebook en LinkedIn als referentie gebruiken. Houd de bestandsgrootte onder de 500 KB en gebruik PNG of JPG. Plaats je belangrijkste boodschap binnen het centrale 1100 bij 580 vlak, want mobiele apps croppen strakker rondom de randen.
Heb ik RankMath of Yoast nodig om Open Graph in te stellen op WordPress?
Niet per se, maar het is veruit de makkelijkste route. Zowel RankMath SEO (gratis) als Yoast SEO (gratis) regelen alle Open Graph-tags automatisch voor je in de HTML, inclusief de Twitter-varianten. Zonder zo’n plugin moet je de tags handmatig in je theme’s header.php zetten, wat foutgevoelig is. Vrijwel elke WordPress-site heeft al een van de twee draaien.
Waarom toont Facebook nog steeds mijn oude preview na een wijziging?
Facebook en LinkedIn cachen Open Graph-data 24 tot 48 uur agressief. Ga naar de Facebook Sharing Debugger (developers.facebook.com/tools/debug/), plak je URL en klik op ‘Scrape Again’. Voor LinkedIn gebruik je de LinkedIn Post Inspector. Werkt het daarna nog steeds niet? Flush dan eerst je caching-plugin (WP Rocket, W3 Total Cache of WP-Optimize), want die kan de oude HTML serveren.
Krijgt elke blogpost automatisch zijn eigen Open Graph image?
Ja, mits je de WordPress Featured image (uitgelichte afbeelding) van die post hebt ingesteld. RankMath en Yoast gebruiken die automatisch als og:image voor het artikel. De standaard Open Graph image die je in je SEO-plugin hebt ingesteld, geldt alleen voor pagina’s zonder eigen featured image. Voor belangrijke landingspagina’s kun je via de Social-tab in de meta-box een afwijkende afbeelding kiezen.
Welke gratis tools heb ik nodig om een Open Graph image te maken?
Voor het ontwerp werkt Canva uitstekend, met een gratis template-categorie ‘Facebook Post’ in precies 1200 bij 630 pixels. Om de bestandsgrootte onder de 500 KB te krijgen comprimeer je de PNG via TinyPNG.com. Voor het testen of alles werkt gebruik je de Facebook Sharing Debugger en de LinkedIn Post Inspector. Alle vier zijn gratis en vragen geen account.
Tot slot
Het instellen van een Open Graph-image is niet sexy. Geen plugin doet alarm. Niemand wijst je erop. Maar elke gedeelde link is gratis reclame, en als die reclame een groene cirkel toont, doe je jezelf tekort. Een avond werk, één keer goed, daarna jarenlang resultaat.
Zit je vast op een van de stappen, of weet je niet zeker of jouw site het al goed heeft staan? Vraag een gratis website-analyse aan via circularmedia.nl/#website-audit. Wij kijken binnen 1 werkdag wat er gebeurt als jouw site wordt gedeeld, en wat het zou kosten om het op te lossen. Geen verkooppraat, gewoon een eerlijk overzicht.
