OG-afbeelding maken:zo blijft je logo zichtbaar op WhatsApp en sociale media

Je deelt een pagina via WhatsApp en verwacht een mooie brede afbeelding. In plaats daarvan verschijnt links een klein vierkant vakje. Je logo staat net buiten beeld, de titel is half afgesneden en de contactgegevens zijn zo klein dat niemand ze kan lezen. Op Facebook ziet dezelfde link er vervolgens wel goed uit. Dat lijkt willekeurig, maar het komt doordat ieder platform de afbeelding in een eigen kaart, verhouding en beschikbare ruimte plaatst.

De oplossing is niet voor ieder kanaal een compleet andere websiteafbeelding maken. De oplossing is één sterke Open Graph afbeelding ontwerpen met een duidelijke hiërarchie en een veilige middenzone. Zo blijft de essentie herkenbaar, ook wanneer een app de linker- en rechterkant wegsnijdt.

Deze gids legt in gewone taal uit wat een OG-afbeelding is, waarom WhatsApp vaak een vierkante uitsnede toont, welke afmetingen je best gebruikt en waar logo, tekst en onderwerp moeten staan. We bekijken WhatsApp, Facebook, LinkedIn, X en Instagram en sluiten af met de technische tags en een praktische controlelijst.

Wie de volledige website tegelijk wil aanpakken, kan ook de gids over een website laten maken in Limburg en de checklist voor een nieuwe website gebruiken.

Wat is een OG-afbeelding in gewone woorden?

Een OG-afbeelding is de afbeelding die een website meegeeft wanneer iemand een link deelt. OG staat voor Open Graph. De website plaatst daarvoor informatie in de broncode, zoals de titel, omschrijving, URL en afbeelding van de pagina.

Wanneer iemand daarna een link in WhatsApp, Facebook of LinkedIn plakt, probeert het platform die informatie op te halen en er een linkvoorbeeld van te maken. Dat voorbeeld bestaat meestal uit:

• een afbeelding;
• de titel van de pagina;
• een korte omschrijving;
• de domeinnaam;
• soms extra informatie over het type pagina.

De officiële Open Graph specificatie gebruikt onder andere og:title, og:type, og:image en og:url. Voor de afbeelding kunnen ook breedte, hoogte, bestandstype en een beschrijvende alt-tekst worden opgegeven.

Een OG-afbeelding is dus niet automatisch dezelfde afbeelding als je hero, uitgelichte foto of Instagram-post. Ze mag dezelfde fotografie gebruiken, maar de compositie moet speciaal rekening houden met kleine previews en verschillende uitsneden. Sterke basisfotografie voor zulke beelden plan je via wat is bedrijfsfotografie.

Waarom dezelfde deelafbeelding niet overal hetzelfde verschijnt

Een website kan de bronafbeelding en metadata aanbieden, maar bepaalt niet exact hoe iedere app het eindresultaat rendert. Een platform moet rekening houden met schermbreedte, lijstweergave, chatballonnen, feedkaarten, desktop, mobiel en nieuwe interfacevarianten.

Een brede afbeelding van 1200 bij 630 pixels heeft een verhouding van ongeveer 1,91 op 1. Die verhouding werkt uitstekend voor brede linkkaarten. Een compacte WhatsApp-weergave kan echter een bijna vierkante thumbnail links van de tekst tonen. Om dat vierkant te vullen, moet de app delen van de brede afbeelding wegsnijden.

Wanneer het logo linksboven staat en het onderwerp rechts, kan een uitsnede uit het midden beide missen. Wanneer alle belangrijke informatie in een compacte zone rond het centrum staat, blijft minstens de kern behouden.

Daarom moet je niet vragen: "Waar staat mijn logo mooi in de brede banner?" De betere vraag is: "Wat blijft zichtbaar wanneer alleen het midden van deze afbeelding wordt getoond?"

De praktische standaard: 1200 x 630 pixels

Voor één algemene deelafbeelding is 1200 x 630 pixels nog steeds een sterke en breed ondersteunde basis. Meta adviseert voor gedeelde links afbeeldingen van minstens 1200 x 630 pixels voor een goede weergave op schermen met hoge resolutie. Een breedte van minstens 600 pixels wordt als minimum genoemd voor grotere linkkaarten.

Gebruik de verhouding niet als excuus om het volledige vlak vol tekst te zetten. Een brede afbeelding moet ook overeind blijven wanneer links en rechts een groot deel verdwijnen.

De veiligste indeling voor een canvas van 1200 x 630 pixels is:

Volledige OG-afbeelding: 1200 x 630 px
Centrale vierkante crop: 630 x 630 px
Binnenste kritieke veilige zone: ongeveer 500 x 500 px

De centrale vierkante zone begint bij een 1200 pixels brede afbeelding ongeveer 285 pixels vanaf de linkerkant en eindigt ongeveer 285 pixels vóór de rechterkant. De volledige hoogte van 630 pixels blijft beschikbaar.

De binnenste zone van ongeveer 500 bij 500 pixels geeft extra ademruimte. Plaats daarin wat absoluut herkenbaar moet blijven:

• het logo of compacte beeldmerk;
• één korte titel of onderwerpregel;
• het belangrijkste product, gezicht of ontwerp;
• een herkenbare kleur of grafisch element;
• eventueel één korte ondersteunende regel.

Plaats lange tekst, telefoonnummers, URL's en kleine details niet als essentiële informatie in de afbeelding. In een kleine WhatsApp-thumbnail worden die toch onleesbaar. De titel, beschrijving en domeinnaam worden al naast of onder de afbeelding weergegeven.

Waar plaats je het logo op een OG-afbeelding?

Plaats het logo niet automatisch linksboven omdat dat in een gewone advertentie of presentatie vertrouwd aanvoelt. Bij een vierkante middenuitsnede is linksboven vaak een van de eerste zones die verdwijnt.

Voor maximale herkenbaarheid zijn drie composities bruikbaar.

1. Compact logo boven of onder het midden

Plaats een klein logo net boven of net onder het centrale onderwerp. Het logo blijft zichtbaar zonder het hoofdbeeld te bedekken. Dit werkt goed voor artikels, cases en dienstenpagina's.

2. Logo als onderdeel van een centrale kaart

Zet in het midden een compacte kaart, badge, scherm, boekcover of kader met daarin:

• het logo;
• een korte titel;
• één herkenbare afbeelding;
• eventueel een korte categorie.

De screenshot van een linkvoorbeeld in WhatsApp toont waarom dat krachtig is. De brede afbeelding kan aan beide zijden sfeer bevatten, terwijl de centrale kaart als zelfstandig vierkant overeind blijft.

3. Beeldmerk in het midden, woordmerk als extra

Heeft het logo een compact icoon en een breder woordmerk? Zet het icoon of monogram in de kritieke zone. Het volledige woordmerk kan breder worden gebruikt als extra laag. Als de zijkanten verdwijnen, blijft het merk toch herkenbaar.

Hoeveel tekst zet je op de deelafbeelding?

Een OG-afbeelding is geen folder. Het platform toont meestal al een titel en korte omschrijving naast de afbeelding. Herhaal daarom niet de volledige SEO-titel, meta description, URL, telefoon, e-mailadres en vijf diensten in het beeld.

Gebruik als vuistregel:

• één hoofdzin van ongeveer drie tot zeven woorden;
• eventueel één klein categorie- of merklabel;
• een zichtbaar logo;
• voldoende lege ruimte.

Voor een pagina over een sitemap is bijvoorbeeld Sitemap als centrale titel sterker dan een volledige zin met alle diensten. De tekst naast het WhatsApp-beeld kan vervolgens uitleggen dat het om de volledige sitemap van VisualVibe gaat.

Contactgegevens kunnen op een groot ontwerp nuttig lijken, maar verdwijnen in kleine previews. Zet ze alleen in de afbeelding als aanvullende branding. Vertrouw voor bereikbaarheid op de landingspagina, het domein en de tekst van het linkvoorbeeld.

WhatsApp: ontwerp voor het kleine vierkant

WhatsApp is het duidelijkste voorbeeld van waarom een veilige middenzone nodig is. Afhankelijk van toestel, schermbreedte en weergave kan een link verschijnen met een compacte, bijna vierkante thumbnail links en titel, omschrijving en domein rechts.

In die situatie wordt een brede afbeelding niet volledig verkleind. Ze kan als vierkant worden uitgesneden. Wat buiten het midden staat, verdwijnt uit de thumbnail.

Voor WhatsApp is deze aanpak het meest betrouwbaar:

1. Maak de bronafbeelding 1200 x 630 pixels.
2. Teken tijdelijk een gecentreerd vierkant van 630 x 630 pixels.
3. Plaats logo, hoofdonderwerp en korte titel binnen dat vierkant.
4. Houd de belangrijkste inhoud binnen een kleinere marge van ongeveer 500 x 500 pixels.
5. Verwijder de hulplijnen vóór export.
6. Test de echte link op minimaal één Android- en één iOS-toestel wanneer het belangrijk is.

Meta vermeldt voor WhatsApp-linkpreviews dat og:image een absolute afbeeldings-URL moet zijn. Voor de gedocumenteerde Business Messaging-linkpreview wordt een afbeelding van minstens 300 pixels breed, een verhouding van maximaal 4 op 1 en een bestand kleiner dan 600 KB genoemd. Een geoptimaliseerde 1200 x 630 JPEG of PNG blijft ruim binnen de verhouding en geeft voldoende resolutie.

Wat moet in de WhatsApp-thumbnail zichtbaar blijven?

De thumbnail moet zelfs zonder kleine tekst nog betekenis hebben. Controleer op sterk uitgezoomde weergave:

• is VisualVibe herkenbaar;
• is het onderwerp van de pagina duidelijk;
• blijft het belangrijkste beeld intact;
• heeft de afbeelding voldoende contrast;
• lijkt het niet op een willekeurige foto;
• werkt de thumbnail ook zonder contactgegevens.

Wanneer het antwoord op die vragen ja is, kan de bredere versie op Facebook en LinkedIn extra context tonen zonder dat WhatsApp onbruikbaar wordt.

Facebook: breed beeld, maar houd de kern centraal

Facebook gebruikt Open Graph om een link te begrijpen en adviseert een beeld van minstens 1200 x 630 pixels voor de beste weergave op schermen met hoge resolutie. In veel feedkaarten wordt het brede beeld bijna volledig getoond.

Toch is het verstandig de kern centraal te houden. Links kunnen ook in compactere lijsten, notificaties, mobiele kaarten, berichten en nieuwe interfacevarianten verschijnen. Bovendien kan Facebook een oudere versie van de afbeelding in cache hebben.

Gebruik voor Facebook:

• 1200 x 630 pixels;
• een absolute HTTPS-URL;
• een duidelijke og:image:width en og:image:height;
• een passende og:image:alt;
• een snelle afbeelding die zonder login bereikbaar is;
• de Meta Sharing Debugger om de pagina opnieuw te laten ophalen.

Een brede foto mag op Facebook meer verhaal tonen, maar laat essentiële tekst niet tegen de linker- of rechterrand staan. De centrale veilige zone blijft de verzekering voor andere plaatsingen.

LinkedIn: Open Graph, professionele rust en caching

LinkedIn gebruikt Open Graph of oEmbed om titel, beschrijving en afbeelding van een gedeelde URL te bepalen. Dat maakt dezelfde 1200 x 630 master bruikbaar voor LinkedIn.

Voor LinkedIn werkt een rustige afbeelding meestal beter dan een overvolle advertentie. Denk aan:

• herkenbaar logo;
• één zakelijke titel;
• een sterk projectbeeld of helder grafisch concept;
• voldoende negatieve ruimte;
• geen onleesbare rij met diensten.

LinkedIn kan een eerder opgehaalde versie bewaren. De officiële Post Inspector laat je een URL opnieuw controleren en vernieuwen voor nieuwe posts. Bestaande posts met die URL veranderen daardoor niet automatisch.

Controleer daarom vóór publicatie:

1. Staat de definitieve afbeelding live?
2. Is de URL publiek bereikbaar?
3. Kloppen og:title, og:description en og:image?
4. Toont Post Inspector de juiste preview?
5. Is de afbeelding nog herkenbaar wanneer ze kleiner wordt weergegeven?

X: gebruik dezelfde veilige master en aparte card-tags

X verwerkt links in posts en kan een kaart rond een gedeelde URL tonen. Gebruik naast de Open Graph-tags ook de specifieke card-tags, zodat titel, beschrijving en afbeelding duidelijk worden aangeboden.

Voor een brede kaart gebruik je doorgaans:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titel van de pagina">
<meta name="twitter:description" content="Korte omschrijving van de pagina">
<meta name="twitter:image" content="https://visualvibe.media/images/voorbeeld-og.jpg">

Dezelfde 1200 x 630 afbeelding kan hiervoor worden hergebruikt. Houd de belangrijkste inhoud centraal, omdat kaartweergave en crop per scherm en interface kunnen verschillen.

De naam twitter:* blijft in veel webimplementaties gebruikt worden voor deze metadata, ook al heet het platform X. Controleer na wijzigingen altijd een echte gedeelde link, omdat oude validators en documentatielinks kunnen veranderen.

Instagram: een OG-afbeelding is niet hetzelfde als je Instagram-post

Instagram wijkt af van Facebook, LinkedIn en WhatsApp. Een link in een gewone feedcaption wordt niet als een grote klikbare Open Graph-kaart weergegeven. Voor een feedpost, Reel-cover of Story upload je meestal aparte media in de gewenste verhouding.

Een OG-afbeelding blijft wel nuttig wanneer een link buiten Instagram wordt gedeeld of in een bericht een preview krijgt, maar bouw je Instagram-content niet uitsluitend rond de OG-master.

Gebruik daarom twee aparte producties:

• OG-master: 1200 x 630 pixels voor gedeelde websitelinks;
• social varianten: bijvoorbeeld 1080 x 1080, 1080 x 1350 en 1080 x 1920 pixels voor Instagram.

De merkstijl kan gelijk blijven, maar de compositie wordt opnieuw geschikt gemaakt voor het kanaal. Met brandingfotografie en een herbruikbaar visueel systeem hoef je niet telkens vanaf nul te beginnen. Hoe je zo'n beeldenset efficiënt in één opnamedag verzamelt, lees je in hoe bereid je een bedrijfsshoot voor.

Overzicht per belangrijk platform

Zo bouw je een deelafbeelding die in meerdere formaten werkt

Een schaalbare aanpak begint niet bij exporteren, maar bij lagen.

Een voorbeeld van een robuuste compositie

Stel dat je een artikel over de sitemap van VisualVibe deelt.

In de kritieke middenzone

• een compacte kaart of schermmockup;
• het VisualVibe-logo;
• het woord Sitemap;
• één herkenbare oranje accentkleur.

In de buitenste zones

• subtiele sfeerbeelden van website, fotografie en video;
• extra iconen;
• zachte achtergrondpatronen;
• informatie die niet nodig is om het onderwerp te begrijpen.

Naast de afbeelding via metadata

• titel: Sitemap | VisualVibe;
• omschrijving: Volledige sitemap van VisualVibe: alle diensten, regio's, realisaties en kennisartikels.;
• domein: visualvibe.media.

Wanneer WhatsApp alleen het centrale vierkant toont, blijven logo en Sitemap zichtbaar. Wanneer Facebook de volledige breedte gebruikt, ontstaat een rijker beeld met extra context.

Technische Open Graph-tags voor een correcte preview

Een sterke afbeelding helpt alleen wanneer de website de juiste metadata uitvoert. Een basisimplementatie ziet er zo uit:

<meta property="og:type" content="article">
<meta property="og:title" content="OG-afbeelding maken: logo zichtbaar op WhatsApp en sociale media">
<meta property="og:description" content="Ontdek hoe je logo en belangrijkste content zichtbaar houdt in verschillende social media previews.">
<meta property="og:url" content="https://visualvibe.media/be/kennisbank/webdesign/og-afbeelding-maken-veilige-zone-whatsapp-facebook-linkedin">
<meta property="og:site_name" content="VisualVibe">
<meta property="og:locale" content="nl_BE">

<meta property="og:image" content="https://visualvibe.media/images/kennisbank/webdesign/og-afbeelding-veilige-zone-social-media.jpg">
<meta property="og:image:secure_url" content="https://visualvibe.media/images/kennisbank/webdesign/og-afbeelding-veilige-zone-social-media.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph afbeelding met centrale vierkante veilige zone voor WhatsApp Facebook LinkedIn en X">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Waar plaats je je logo op een OG-afbeelding?">
<meta name="twitter:description" content="Gebruik een centrale veilige zone zodat je logo zichtbaar blijft op WhatsApp Facebook LinkedIn en X.">
<meta name="twitter:image" content="https://visualvibe.media/images/kennisbank/webdesign/og-afbeelding-veilige-zone-social-media.jpg">

Gebruik altijd een absolute URL met https://. Een relatief pad zoals /images/og.jpg kan in je eigen browser werken, maar externe scrapers hebben een volledige URL nodig.

De afbeelding moet publiek bereikbaar zijn zonder login, cookies, JavaScript of tijdelijke token die snel vervalt. Controleer ook of de server het juiste MIME-type retourneert.

JPEG, PNG of WebP voor een OG-afbeelding?

Voor brede compatibiliteit zijn JPEG en PNG nog steeds veilige keuzes voor deelafbeeldingen.

JPEG

Geschikt voor fotografie en ontwerpen met veel kleurverloop. De bestandsgrootte blijft meestal laag. Gebruik voldoende kwaliteit zodat tekst en logo niet blokkerig worden.

PNG

Geschikt voor scherpe grafische ontwerpen, vlakke kleuren en transparantie. Het bestand kan groter worden, vooral bij fotografie.

WebP

WebP is efficiënt voor websites, maar ondersteuning door externe scrapers en oudere tools kan minder voorspelbaar zijn dan bij JPEG of PNG. Gebruik voor de OG-versie bij twijfel een geoptimaliseerde JPEG of PNG, zelfs wanneer je op de webpagina zelf WebP of AVIF gebruikt.

Houd de afbeelding licht. Voor WhatsApp noemt Meta in de gedocumenteerde linkpreview een bovengrens van 600 KB. Ook andere platforms halen een compacte afbeelding sneller en betrouwbaarder op.

Veelgemaakte fouten bij OG-afbeeldingen

Waarom een mooie OG-afbeelding ook commercieel belangrijk is

Een linkvoorbeeld is vaak de eerste indruk van een pagina. Dat geldt in een WhatsApp-gesprek met een potentiële klant, in een LinkedIn-post, in Facebook Messenger of wanneer een medewerker een realisatie doorstuurt.

Een consistente deelafbeelding helpt met:

• merkherkenning;
• vertrouwen;
• duidelijkheid over het onderwerp;
• professionelere social posts;
• meer kans dat iemand de link opent;
• een consistente uitstraling tussen website en campagne.

De afbeelding zelf is geen directe SEO-rankingfactor zoals een inhoudelijke pagina, maar een goede preview kan wel de distributie en doorklik naar je content ondersteunen. De technische metadata helpt platforms bovendien de juiste titel, beschrijving en afbeelding te begrijpen.

Daarom hoort OG-ontwerp bij professioneel webdesign en niet bij een laatste controle vijf minuten vóór publicatie. De technische implementatie sluit aan op SEO en online vindbaarheid, terwijl sterke eigen beelden uit professionele fotografie zorgen dat de preview niet op een generieke stockkaart lijkt.

Controlelijst vóór je een pagina publiceert

Bekijk na publicatie niet alleen de broncode. Deel de echte URL in de apps die voor je klanten belangrijk zijn. Een preview kan technisch correct zijn en toch visueel beter kunnen.

Veelgestelde vragen over OG-afbeeldingen

Eén afbeelding, meerdere uitsneden, één herkenbaar merk

Een sterke OG-afbeelding probeert niet ieder platform pixel voor pixel te controleren. Ze is zo ontworpen dat verschillende platforms er een bruikbare uitsnede van kunnen maken.

Gebruik 1200 x 630 pixels als brede basis. Beschouw het centrale vierkant van 630 x 630 pixels als je beschermde compositie en houd de echt kritieke inhoud binnen ongeveer 500 x 500 pixels. Zet daar je logo, hoofdonderwerp en korte kernboodschap. Laat de buitenste delen sfeer en context toevoegen, zonder dat ze noodzakelijk zijn om de afbeelding te begrijpen.

Zo ziet de link er breed professioneel uit op Facebook en LinkedIn, terwijl het kleine WhatsApp-vakje nog altijd duidelijk VisualVibe en het onderwerp van de pagina toont.