In het eerste jaar dat ik de SEOJuice-blog draaide, dacht ik eigenlijk nauwelijks na over Open Graph-afbeeldingen. We publiceerden posts, deelden ze op LinkedIn en Twitter, en lieten het daarbij. De previews zagen er voor mij prima uit — dacht ik tenminste, want ik had nooit echt gecontroleerd wat andere mensen zagen als ze op "delen" klikten.
Toen stuurde een klant me een screenshot van onze blogpost die in de Slack van hun bedrijf was gedeeld. De preview was ons logo van 50x50 pixels, uitgerekt in een grijze rechthoek. De titel was afgekapt. Het zag er stuk uit. Die post had twee dagen gekost om te schrijven, maar in de social preview leek het net spam.
Ik heb vervolgens een weekend besteed aan het toevoegen van aangepaste Open Graph-afbeeldingen aan onze top 20 posts. Binnen een maand steeg de doorklikratio vanuit social op die posts van gemiddeld 1.8% naar 4.1%. Dat is een verbetering van 2.3x voor iets wat eerlijk gezegd ongeveer 15 minuten werk per post kost. (Wel even erbij zeggen: dit zijn onze eigen data uit LinkedIn- en Twitter-analytics, geen gecontroleerde studie. Je resultaten kunnen verschillen per doelgroep en platform.)
Open Graph is een protocol dat Facebook in 2010 heeft gemaakt, waarmee je bepaalt hoe je pagina's eruitzien wanneer ze op social worden gedeeld. De Open Graph-afbeelding is de visuele preview — de grote afbeelding die verschijnt in de linkpreview op Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord of elk ander platform dat linkvoorbeelden ondersteunt. Zonder OG-tags gokken platforms. Met OG-tags ontwerp jij in feite de advertentie voor je content.
Elk platform leest OG-tags, maar toont ze net iets anders. Daar kwam ik op een pijnlijke manier achter toen een perfect goede Facebook-preview ineens bijgesneden opdook op LinkedIn. Dit is de referentietabel die ik zelf als bladwijzer heb opgeslagen:
| Platform | Aanbevolen formaat | Beeldverhouding | Bestandstype | Max. bestandsgrootte | Opmerkingen |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | Toont geen afbeeldingen onder 200x200px. 600x315 is het minimum voor een grote previewkaart. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | Toont geen grote previewkaart voor afbeeldingen onder 300x157px. Gebruikt twitter:image als die is ingesteld, en valt anders terug op og:image. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Hard minimum: 1200x627. Daaronder toont LinkedIn de afbeelding helemaal niet. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB aanbevolen | Heeft moeite met afbeeldingen boven 300KB op trage mobiele verbindingen. Mik op minder dan 200KB voor betrouwbare weergave. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Toont automatisch linkvoorbeelden in kanalen. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Ondersteunt geanimeerde GIF's in previews. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N.v.t. | Gebruikt OG-tags voor linkvoorbeelden in chatballonnen. |
De iets hogere beeldverhouding van Twitter (16:9 versus 1.91:1) betekent dat je 1200x630-afbeelding licht kan worden bijgesneden. In de praktijk heb ik daar nooit verschil door gezien. Maak geen aparte afbeeldingen per platform tenzij je een grote campagne draait waarbij elke pixel telt.
Eén ding wil ik expliciet noemen omdat ik hier zelf over struikelde: het minimum van LinkedIn is echt een hard minimum. Als je afbeelding 1199 pixels breed is, toont LinkedIn niets. Geen kleinere versie — niets. Ik ben hier een half uur mee bezig geweest om het probleem te achterhalen voordat ik de daadwerkelijke afmetingen van de afbeelding mat.
OG-tags horen in de <head>-sectie van je HTML. Dit is de complete set die je voor elke pagina nodig hebt:
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Belangrijke technische details, waarvan ik de meeste minstens één keer fout heb gedaan:
og:image. Relatieve paden breken op de meeste platforms. Dit was veruit mijn meest voorkomende fout toen we dit voor het eerst instelden.og:image:width en og:image:height helpen platforms de preview sneller te tonen zonder eerst de volledige afbeelding te downloaden.twitter:card op summary_large_image voor een previewkaart met een afbeelding over de volle breedte. Zonder dit toont Twitter een piepkleine vierkante thumbnail. Die had ik in onze eerste implementatie gemist, en ik snapte maar niet waarom Twitter-previews zo klein bleven.WordPress: Plugins zoals Yoast SEO, RankMath en SEOPress voegen OG-tagvelden toe aan elke editor voor posts en pagina's. Je uploadt de afbeelding, vult titel en beschrijving in, en de plugin genereert de meta tags. Dit is de simpelste route als je op WordPress zit.
Next.js / React: Gebruik de next/head-component of de Metadata API (App Router) om OG-tags per pagina in te stellen. Als je met de App Router bouwt, maakt de metadata-export dit vrij rechttoe rechtaan.
Statische sites: Voeg de meta tags direct toe aan je HTML-template. De meeste static site generators (Hugo, Eleventy, Jekyll) ondersteunen front matter-variabelen waarmee OG-tags automatisch worden ingevuld.
Een technisch correcte Open Graph-afbeelding die er slecht uitziet, is erger dan helemaal geen afbeelding. Ik heb waarschijnlijk vijf keer aan onze OG-afbeeldingstemplate gesleuteld, en dit is wat ik heb geleerd dat werkt:
Elk platform snijdt net iets anders bij. Houd alle belangrijke content — tekst, logo's, belangrijke visuals — binnen de middelste 80% van de afbeelding. Dat betekent minimaal 120px ademruimte vanaf elke rand op een canvas van 1200x630. Dat heb ik geleerd nadat LinkedIn de eerste letter van een titel afsneed in een van onze OG-afbeeldingen.
Als je Open Graph-afbeelding tekst bevat (en meestal zou dat zo moeten zijn — de titel van het artikel of de pagina), maak die dan groot. Minimaal 48px bij een canvasbreedte van 1200px. Deze afbeeldingen worden op mobiele feeds vaak maar op 300px breed getoond. Als je de tekst niet kunt lezen wanneer de afbeelding 300px breed is, dan is hij te klein. Ik test dit zelf door in Figma uit te zoomen naar ongeveer 25% — als ik de headline dan nog steeds kan lezen, werkt het.
Gebruik je merkkleuren, lettertypes en plaatsing van je logo consequent. Als iemand je OG-afbeelding in een feed ziet, moeten ze meteen herkennen dat die van jou is, nog vóór ze de tekst lezen. Wij hebben een Canva-template gemaakt met onze merkkleuren en vaste logopositie en hergebruiken die voor elke post. Kost nu ongeveer 5 minuten per afbeelding.
Wat niet werkt: generieke stockfoto's, alleen je logo op een witte achtergrond, of een afbeelding die niets met de content te maken heeft. Ik heb alle drie getest. Mensen scrollen er elke keer gewoon langs.
Ik check OG-tags als onderdeel van elke website-audit die we door SEOJuice halen. Dezelfde problemen komen steeds weer terug:
og:image detecteren platforms automatisch een afbeelding van je pagina. Het resultaat is meestal je logo van 100x100 pixels of een willekeurige sidebar-afbeelding. Controleer je pagina's met onze SEO audit tool — die markeert ontbrekende OG-tags.http://, wordt die niet getoond.Test je OG-tags altijd vóór en na wijzigingen. Ik haal elke post voor publicatie door minstens twee van deze tools:
| Tool | Platform | URL | Opmerkingen |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
Leegt ook Facebook's OG-cache. Klik op "Scrape Again" nadat je tags hebt bijgewerkt. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Bekijk vooraf hoe je previewkaart wordt weergegeven. Leegt ook Twitter's cache. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Controleer en leeg de OG-cache van LinkedIn. | |
| OpenGraph.xyz | Multi-platform | opengraph.xyz |
Preview op meerdere platforms tegelijk. Genereert ook OG-afbeeldingen. |
| SEOJuice Screenshot Generator | Creatie | /tools/screenshot-generator/ | Genereer automatisch OG-afbeeldingen en screenshots in je huisstijl vanuit je pagina's. |
yoursite.com/page/?v=2. Verwijder die weer zodra de cache is bijgewerkt.
Ik wil hier precies in zijn, omdat dit vaak overdreven wordt: OG-afbeeldingen hebben geen directe invloed op rankings in Google. Google gebruikt je og:image-tag niet als rankingsignaal. Punt.
Maar de indirecte effecten zijn echt, en ik heb ze uit eerste hand gezien op onze eigen content:
<img>-elementen op je pagina verkiest, kan een hoogwaardige OG-afbeelding als fallback geen kwaad.De CTR-data in de markt zijn overtuigend: pagina's met geoptimaliseerde social preview-afbeeldingen zien tot 70% hogere doorklikratio's vanuit social vergeleken met pagina's zonder afbeelding of met automatisch gegenereerde thumbnails. Zelfs conservatieve schattingen komen uit op 20%+ verbetering voor pagina's die van geen OG-afbeelding naar een goed ontworpen variant gaan. Onze eigen cijfers zitten ongeveer in het midden van die bandbreedte.
Nee. Een afbeelding van 1200x630 werkt op allebei. Twitter geeft technisch gezien de voorkeur aan 1200x675, maar dat verschil van 45 pixels is in de praktijk onzichtbaar. Maak alleen platformspecifieke afbeeldingen als je betaalde social campagnes draait waarbij elk detail telt.
JPEG voor foto's en complexe afbeeldingen (kleinere bestandsgrootte). PNG voor graphics met tekst, logo's of transparantie (scherpere randen). Voor de meeste OG-afbeeldingen die tekst over een achtergrond combineren, geeft JPEG op 80-85% kwaliteit de beste verhouding tussen grootte en kwaliteit. Dat is wat wij voor al onze afbeeldingen gebruiken.
Twitter ondersteunt WebP. Facebook en LinkedIn doen dat niet betrouwbaar. Houd het bij JPEG of PNG voor maximale compatibiliteit. Zodra elk platform WebP consequent ondersteunt, kun je overstappen — maar per maart 2026 zijn we daar nog niet.
Alleen wanneer de content wezenlijk verandert. Als je een artikel vernieuwt en "2026 Guide" aan de titel toevoegt, update dan ook de OG-afbeelding zodat die overeenkomt. Update OG-afbeeldingen niet om het updaten zelf — je moet dan caches legen op elk platform, en die moeite is het niet waard tenzij de content materieel is veranderd.
Controleer dit in deze volgorde: (1) Is de URL absoluut en HTTPS? (2) Is de afbeelding op die URL echt bereikbaar? (3) Voldoet de afbeelding aan de minimale afmetingen? (4) Is de platformcache verouderd? Gebruik de tools hierboven om het probleem te vinden. De meest voorkomende oorzaak, in mijn ervaring, is een relatieve URL in plaats van een absolute.
Ja, voor contentpagina's (blogposts, artikelen, gidsen). De titel over een branded achtergrond is het effectiefste formaat voor OG-afbeeldingen. Voor productpagina's werkt een strakke productscreenshot met je logo beter. De enige uitzondering: zet geen tekst op afbeeldingen waarbij de titel al in de linkpreview zelf verschijnt — sommige platforms tonen beide, en dan is dat dubbelop.
no credit card required
No related articles found.