Open Graph-metatags: de complete gids voor social linkvoorbeelden
Open Graph-metatags zijn <meta property="og:…">-tags die je in de <head> van een HTML-pagina zet. Ze bepalen de titel, beschrijving en afbeelding die verschijnen wanneer iemand jouw link deelt op Facebook, LinkedIn, Slack, Discord, WhatsApp en de meeste andere platforms. Definieer ze één keer en vrijwel elk netwerk toont een rijk voorbeeld in plaats van een kale URL. X (Twitter) leest zijn eigen Twitter Card-tags, maar valt terug op je Open Graph-tags zodra de bijbehorende ontbreekt, waardoor één goed opgebouwde set tags bijna overal werkt waar een link terechtkomt.
Dat ene protocol is het verschil tussen een link die een kop, een samenvatting en een scherpe 1200×630-afbeelding toont, en een kaal adres waar niemand op klikt.
Deze gids loopt de volledige set metatags voor social sharing door: de vier verplichte Open Graph-tags, de regels voor og:image-formaten, de Twitter Card-fallback, hoe elk platform voorbeelden weergeeft en cachet, de fouten waardoor gedeelde links leeg blijven, en hoe je het resultaat debugt nadat je hebt gepubliceerd.
Wat zijn Open Graph-metatags?
Open Graph is een open protocol, oorspronkelijk gemaakt bij Facebook en gedocumenteerd op ogp.me, waarmee elke webpagina zichzelf als een rijk object kan beschrijven. In plaats van te gokken waar je link over gaat, leest een platform een handvol tags en maakt daar een voorbeeldkaart van.
De syntaxis is een gewone HTML-metatag met een property-attribuut en een content-waarde, geplaatst in de <head> van het document:
<meta property="og:title" content="How Open Graph Tags Work">Let op het property-attribuut. Klassieke HTML-metatags voor SEO (de meta description, robots, viewport) gebruiken name. Open Graph gebruikt property, en Twitter Card gebruikt weer name. Dat attribuut goed krijgen is belangrijk; een crawler die property="og:title" verwacht, leest name="og:title" niet.
Bijna elk platform dat een link in een kaart verandert, leest Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest en Telegram spreken het allemaal. X is de opvallende uitzondering. Het geeft de voorkeur aan zijn eigen twitter:*-tags, maar valt terug op je og:*-tags voor alles wat het niet vindt, en daarom hoef je ze zelden te dupliceren.
Open Graph staat naast de klassieke SEO-metatags in plaats van ze te vervangen. De <title> en de canonieke link sturen nog steeds de zoekresultaten; de meta description bepaalt nog steeds je zoeksnippet. Open Graph-tags raken je ranking niet; zij bezitten de social kaart. Een complete <head> bevat meestal alle drie de families samen.
Deze met de hand schrijven is repetitief en je maakt er snel een subtiele fout in. De Open Graph- & metatags-generator bouwt het hele blok op basis van een kort formulier, toont het live en houdt de lastige details (attribuutnamen, absolute URL’s, afbeeldingsafmetingen) consistent, zodat je ze niet hoeft te onthouden.
De essentiële Open Graph-tags die je echt nodig hebt
Open Graph definieert tientallen properties, maar een goede gedeelde link heeft er maar een handvol nodig. Begin met de verplichte vier, voeg een beschrijving toe en stop daar voor de meeste pagina’s.
De vier verplichte tags: og:title, og:type, og:image, og:url
Vier tags zijn verplicht onder het protocol. Mis er één en platforms laten de kaart vallen of vullen een slechte gok in.
<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">og:title is de vetgedrukte kop op de kaart. og:type classificeert het object (meer daarover hieronder). og:image is de voorbeeldafbeelding, en het moet een absolute HTTPS-URL zijn. og:url is het canonieke adres van de pagina, dat platforms gebruiken om gedeelde links te ontdubbelen en engagement te bundelen.
og:description en hoe het verschilt van de SEO-meta-description
og:description is de korte samenvatting die onder de titel op een deelkaart wordt afgedrukt:
<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">Het is een andere tag dan de SEO-<meta name="description">, en het bedient een andere lezer. De meta description strijdt om kliks op een Google-resultatenpagina en wordt afgemeten aan ongeveer 155 tekens. De Open Graph-beschrijving wordt gelezen op een social kaart, waar de ruimte krapper is en de eerste zin het meeste gewicht draagt. Laat je og:description weg, dan vallen de meeste platforms terug op je meta description, dus vaak kun je hem overslaan. Schrijf alleen een aparte wanneer de social hook moet afwijken van de zoeksnippet.
og:type en wat het ontsluit
og:type vertelt platforms wat voor soort ding je pagina is. De gangbare waarden zijn website, article, product en profile. Een homepage of landingspagina is een website; een blogpost is een article.
Kies je article, dan ontsluit dat extra properties en functies die een gewoon website-type niet kan gebruiken:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">Die article:*-tags voeren publicatiedatums en auteursnamen aan kaarten toe, en ze maken de pagina geschikt voor Pinterest Rich Pins, die gestructureerde data rechtstreeks uit je Open Graph-markup halen. Zet og:type op article bij posts en op website bij al het andere, dan volgen de bijbehorende velden vanzelf.
De tags die de meeste pagina’s daadwerkelijk gebruiken:
| Tag | Wat het bepaalt | Voorbeeldwaarde |
|---|---|---|
og:title | Kop die op de kaart wordt getoond | How Open Graph Tags Work |
og:type | Objecttype: website, article, product, profile | article |
og:image | Voorbeeldafbeelding (absolute HTTPS-URL) | https://example.com/og/cover.png |
og:url | Canonieke URL van de pagina | https://example.com/open-graph-guide |
og:description | Samenvatting onder de titel | A practical guide to social meta tags. |
og:site_name | Naam van de hele site | Example |
og:locale | Taal en regio van de content | en_US |
og:image — formaten, verhouding en de regels die gedeelde links breken
De afbeelding is het deel van een voorbeeld dat mensen als eerste zien, en het is precies waar de meeste shares stuklopen. Krijg je het og:image-formaat en -bestandsformaat goed, dan werkt één bestand overal.
De universele standaard 1200×630 (1.91:1)
Het aanbevolen og:image-formaat is 1200×630 pixels, een beeldverhouding van 1.91:1. Die ene afbeelding wordt correct weergegeven op Facebook, LinkedIn, Slack, Discord en de summary_large_image-kaart van X, dus je hebt geen apart bestand per platform nodig.
Ook ondergrenzen doen ertoe. Facebook negeert elke afbeelding kleiner dan 200×200 en toont een krap vierkant thumbnail voor alles onder 600×315. Onder de 1200 pixels breed gaan grote kaarten er wazig uitzien. Mik op 1200×630 en je haalt in één keer elke drempel.
Waarom og:image:width en og:image:height ertoe doen
Wanneer een platform je link voor het eerst tegenkomt, heeft het de afbeelding nog niet gedownload; die haalt het asynchroon op. Als je de afmetingen vooraf opgeeft, kan het platform de juiste ruimte reserveren en de kaart meteen indelen:
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">Sla je deze over, dan kan de allereerste keer dat een pagina wordt gedeeld leeg blijven terwijl de crawler zijn achterstand inhaalt. Voeg je ze toe, dan klopt de kaart al bij de eerste keer plakken. De og:image:alt-tag beschrijft de afbeelding voor schermlezers op platforms die dat ondersteunen.
Bestandsformaat en grootte
Gebruik JPG of PNG. Beide decoderen betrouwbaar in elke crawler, en dat is precies waar het bij een og:image om draait: hij moet weergeven op servers die jij niet beheert. Houd het bestand als vuistregel onder 1 MB, en onder 300 KB voor WhatsApp, dat strenger is dan de rest. Is je export zwaarder, gebruik dan de afbeelding-comprimeertool om hem onder de 1 MB te brengen zonder de kwaliteit zichtbaar aan te tasten.
Het is verleidelijk om hier naar een modern formaat te grijpen, maar dit is de ene plek om dat te weerstaan. Nieuwere formaten besparen bytes voor browsers, maar sommige social crawlers decoderen ze inconsistent, dus een WebP- of AVIF-og:image kan leeg terugkomen op een platform dat het niet kan lezen. De afwegingen komen aan bod in de WebP vs AVIF vs JPEG: welk beeldformaat kies je in 2026?-gids; voor deelafbeeldingen specifiek blijf je bij JPG of PNG. Omdat platforms de randen verschillend bijsnijden, houd je je logo en kop binnen een gecentreerde 1080×600 veilige zone, zodat er niets belangrijks wordt afgeknipt.
De regel van de absolute HTTPS-URL
og:image en og:url moeten volledige https://…-URL’s zijn, geen relatieve paden. Een pad als /cover.png werkt prima in je editor en op je live pagina, maar een crawler die je URL ophaalt heeft geen basis om het tegen af te leiden, waardoor de gedeelde link leeg terugkomt. De afbeelding moet ook publiek bereikbaar zijn: blokkeert robots.txt de crawler of staat het bestand achter authenticatie, dan blijft het voorbeeld leeg.
Nog één beperking bepaalt alles hierboven: crawlers voeren geen JavaScript uit. Facebook, LinkedIn, WhatsApp, Telegram en Discord halen je ruwe HTML op en lezen wat daarin staat. Tags die een framework na het laden client-side injecteert, zijn voor hen onzichtbaar, dus je Open Graph-tags moeten in server-gerenderde of statische HTML staan.
Twitter/X Cards: één tag, en dan terugvallen op Open Graph
X gebruikt zijn eigen Twitter Card-metatags, maar door de overlap met Open Graph schrijf je veel minder dan je zou verwachten. In de praktijk voeg je één tag toe en laat je de rest terugvallen.
twitter:card is de enige verplichte Twitter-tag
X toont helemaal geen kaart tenzij twitter:card aanwezig is, zelfs als je een complete set Open Graph-tags hebt. Het is de enige verplichte Twitter Card-tag:
<meta name="twitter:card" content="summary_large_image">De waarde bepaalt de lay-out. summary_large_image geeft de grote bannerkaart die gebouwd is voor een 1200×630-afbeelding. summary geeft een compacte kaart met een klein vierkant thumbnail naast de tekst:
<meta name="twitter:card" content="summary">Let op het name-attribuut. Twitter Card-tags gebruiken name, niet de property die Open Graph gebruikt.
Hoe X terugvalt op og:* voor titel, beschrijving en afbeelding
Voor de titel, beschrijving en afbeelding leest X je og:title, og:description en og:image wanneer de bijbehorende twitter:*-tag ontbreekt. Daarom schrijf je zelden twitter:title of twitter:image. Zet twitter:card, houd je Open Graph-tags schoon, en X stelt de kaart daaruit samen.
De valkuil van een lege twitter:image
De fallback heeft één scherpe rand: een lege tag telt als aanwezig. Geef je twitter:image met een lege waarde mee, dan gebruikt X die lege waarde in plaats van terug te vallen op og:image, en verliest je kaart zijn afbeelding.
<!-- Wrong: blocks the fallback and leaves the card imageless -->
<meta name="twitter:image" content="">
<!-- Right: omit the tag entirely and X reads og:image -->De regel is simpel: geef nooit een lege social tag uit. Laat hem weg als je geen waarde hebt.
Slack- en Discord-bijzonderheden
Slack leest eerst de Twitter Card, daarna Open Graph, en kan twee extra velden tonen via twitter:label en twitter:data:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">Die verschijnen als kleine gelabelde details onder een Slack-unfurl. Discord leest Open Graph en voegt één extraatje toe dat niemand anders gebruikt: het kleurt de linker accentbalk van de embed met de theme-color van je pagina.
<meta name="theme-color" content="#5865F2">Hoe linkvoorbeelden op elk platform worden weergegeven
Dezelfde tags leveren verschillende social media-linkvoorbeelden op, afhankelijk van wie ze leest. Elk platform kiest zijn eigen deelverzameling tags, cachet gedurende zijn eigen periode en voegt een eigenaardigheid of twee toe. Deze tabel is het snelle naslagwerk.
| Platform | Tags die het leest | Cache | Opvallend gedrag |
|---|---|---|---|
| Open Graph | ~30 dagen | Negeert afbeeldingen onder 200×200; toont een klein vierkant onder 600×315 | |
| Open Graph | ~7 dagen | Wis een verouderd voorbeeld met de Post Inspector | |
| X (Twitter) | twitter:card + valt terug op og:* | kort | Geen twitter:card betekent helemaal geen kaart |
| Slack | Twitter Card, daarna Open Graph | per bericht | Toont twitter:label/twitter:data als extra velden |
| Discord | Open Graph | per bericht | Gebruikt theme-color voor de accentbalk van de embed |
og:title + og:image | per bericht | Wil metadata bovenaan; houd de afbeelding onder 300 KB | |
| Telegram | Open Graph | per bericht | Wordt alleen betrouwbaar weergegeven vanuit JPEG of PNG |
| Open Graph of Schema.org | — | Article Rich Pins hebben og:type=article nodig |
De cachekolom verklaart een veelvoorkomende verrassing: je corrigeert je tags, deelt opnieuw, en Facebook toont wekenlang nog steeds de oude titel. Facebook bewaart Open Graph-data ongeveer 30 dagen en LinkedIn ongeveer 7, dus een wijziging verschijnt pas als de cache verloopt of je een verversing forceert. De debuggers hieronder doen precies dat.
Veelgemaakte Open Graph-fouten (en hoe je ze opspoort)
De meeste kapotte voorbeelden zijn terug te voeren op een korte lijst fouten. Elk ervan ziet er lokaal prima uit en gaat pas mis wanneer een crawler de live pagina ophaalt.
Relatief og:image-pad
Een relatief pad wordt in je browser weergegeven en breekt bij het delen, omdat de crawler geen basis-URL heeft om het tegen af te leiden.
<!-- Blank when shared -->
<meta property="og:image" content="/cover.png">
<!-- Renders everywhere -->
<meta property="og:image" content="https://example.com/cover.png">Ontbrekende og:url of een canonical die er niet mee overeenkomt
Zonder og:url verspreiden deelaantallen en engagement zich over URL-varianten (met en zonder www, met trackingparameters, met een afsluitende slash). Wijs zowel je canonieke link als og:url naar dezelfde ene URL, zodat de signalen bij elkaar blijven.
Afbeelding te klein of de verkeerde beeldverhouding
Een afbeelding onder 200×200 wordt ronduit genegeerd, en één die ver van 1.91:1 afligt, wordt bijgesneden op manieren die je niet had gepland. Lever 1200×630 aan en de uitsnede is op elk platform voorspelbaar.
twitter:card vergeten
Een volledige set Open Graph-tags levert op X nog steeds geen kaart op zonder twitter:card. Dit is de meest voorkomende reden dat een link er op LinkedIn geweldig uitziet en op X niets toont.
Client-side gerenderde tags die een crawler niet kan zien
Als een single-page app na het laden Open Graph-tags injecteert, zien crawlers die geen JavaScript uitvoeren ze nooit. Render de tags server-side of pre-render de HTML.
charset na de eerste 1024 bytes geplaatst
De <meta charset="utf-8">-declaratie moet binnen de eerste 1024 bytes van het document verschijnen, anders negeert de browser hem en kan hij niet-ASCII-tekens in je titel en beschrijving verhaspelen. Zet hem als eerste in de <head>:
<head>
<meta charset="utf-8">
<!-- everything else follows -->
</head>Hoe je je Open Graph-tags test en debugt
Vertrouw nooit een voorbeeld dat je niet tegen een live URL hebt geverifieerd. Drie tools dekken de platforms die ertoe doen, en ze kunnen allemaal een cacheverversing forceren.
Facebook Sharing Debugger
De Facebook Sharing Debugger haalt je live URL op, laat precies zien wat Facebook heeft ingelezen en somt ontbrekende of misvormde tags op. De handigste knop is “Scrape Again”, die de ~30-daagse cache van Facebook op verzoek ververst. Dat is de snelste manier om een fix te laten verschijnen zonder een maand te wachten.
LinkedIn Post Inspector
De LinkedIn Post Inspector doet hetzelfde voor LinkedIn. Plak een URL en het haalt de pagina opnieuw op en wist de ~7-daagse cache van LinkedIn, zodat een bijgewerkte titel of afbeelding bij je volgende share verschijnt in plaats van dagen later.
X-kaartvalidatie is verhuisd naar het developer portal
X heeft zijn losse Card Validator uitgefaseerd. Sinds 2026 zit kaartvalidatie in het X developer portal in plaats van op een publieke URL, dus de meeste teams verifiëren X-kaarten op een andere manier: omdat X terugvalt op og:*, bevestigen de Facebook- en LinkedIn-debuggers al de tags die X zal lezen, en een externe voorbeeldtool vult het gat voor de twitter:card-lay-out zelf.
Bekijk het voorbeeld voordat je publiceert
Debuggers kunnen alleen een URL inspecteren die al live is, en dat is een slecht moment om een lege afbeelding te ontdekken. Bekijk de kaart terwijl je nog aan het bewerken bent. De Open Graph- & metatags-generator toont voorbeelden voor Google, Facebook, X, LinkedIn, Slack en Discord op basis van de waarden die je typt, leest de echte afmetingen van je og:image in de browser om een verkeerde verhouding op te sporen, en kan een bestaande <head> importeren, zodat je een kapotte share kunt diagnosticeren voordat hij live gaat.
Snelle checklist
Dit is het minimum dat elke pagina zou moeten bevatten. Kopieer het, vul je eigen waarden in en je hebt een voorbeeld dat overal wordt weergegeven:
<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">
<meta name="twitter:card" content="summary_large_image">Loop de essentie na voordat je publiceert: een absolute HTTPS-og:image op 1200×630, og:url die overeenkomt met je canonical, twitter:card aanwezig, en de tags server-side gerenderd. Wil je een uitgebreidere rondleiding langs de hulpmiddelen die dit versnellen, dan bundelt de essentiële developer tools-gids de rest. Ben je klaar om het hele blok in één keer te genereren en te bekijken, dan schrijft de Open Graph- & metatags-generator het, controleert het en toont elke kaart voordat je publiceert.
Veelgestelde vragen
Wat is het verschil tussen Open Graph- en Twitter Card-tags?
Open Graph is een platformoverstijgend protocol dat door Facebook, LinkedIn, Slack en meer wordt gelezen; Twitter Card-tags (twitter:*) zijn X-specifiek. X valt terug op je OG-tags wanneer de bijbehorende twitter:*-tag ontbreekt, dus meestal heb je OG plus één enkele twitter:card-waarde nodig.
Beïnvloeden Open Graph-tags de rankings in Google?
Nee. Open Graph- en Twitter Card-tags beïnvloeden de Google-rankings niet; ze bepalen hoe links eruitzien wanneer ze worden gedeeld en sturen zo social verkeer aan. De klassieke <title>- en canonical-tags doen ertoe voor SEO; de meta description bepaalt je snippet en doorklikratio, maar is geen directe rankingfactor.
Waar horen Open Graph-tags in de HTML?
In het <head>-element, in de server-gerenderde of statische HTML. De crawlers van Facebook, LinkedIn, WhatsApp en Telegram voeren geen JavaScript uit, dus client-side geïnjecteerde tags worden niet gezien. Zet <meta charset> als eerste, zodat het binnen de eerste 1024 bytes valt.
Kan één afbeelding werken voor Facebook, X en LinkedIn?
Ja. Eén enkele 1200×630-afbeelding (1.91:1) wordt correct weergegeven op Facebook, LinkedIn, Slack, Discord en de summary_large_image-kaart van X. Serveer hem via HTTPS op een publieke URL en geef og:image:width/og:image:height op, zodat de eerste share niet leeg is.
Waarom toont mijn linkvoorbeeld geen afbeelding?
Veelvoorkomende oorzaken: een relatief og:image-pad in plaats van een absolute HTTPS-URL, een afbeelding onder 200×200, een ontbrekende twitter:card op X, of tags die door JavaScript zijn geïnjecteerd en die de crawler niet kan uitvoeren. Scrape opnieuw met de Facebook Sharing Debugger nadat je het hebt opgelost.
Heeft elke pagina eigen Open Graph-tags nodig?
Idealiter wel. Elke pagina zou een og:title, og:description, og:image en canonieke og:url moeten hebben die die specifieke pagina weerspiegelen, zodat gedeelde links relevante voorbeelden tonen. Een sitebrede fallback is beter dan niets, maar tags per pagina winnen veel meer social kliks.