Open Graph-tags: zo stel je og:image in voor nette linkvoorbeelden

Door SEOgrinder · Gepubliceerd 4 november 2026 · 10 min leestijd

Kort antwoord: Open Graph-tags zijn metatags in de head van een pagina die sociale netwerken en berichtenapps vertellen welke titel, beschrijving en afbeelding ze moeten tonen als iemand een link deelt. Het protocol vereist er vier (og:title, og:type, og:image en og:url), en og:description is de moeite waard om toe te voegen. Gebruik een afbeelding van minimaal 1200 × 630 pixels en kleiner dan 8 MB, geef het volledige https-adres op en zet elke tag in de HTML die je server levert, niet in JavaScript dat later pas draait. Een effect op rankings is niet bewezen: de tags bepalen hoe een gedeelde link eruitziet.

Wat zijn Open Graph-tags?

Open Graph is een protocol waarmee een webpagina zichzelf als object beschrijft: met een titel, een type, een afbeelding en een adres. Volgens ogp.me is het protocol oorspronkelijk bij Facebook bedacht. Je gebruikt het door meta-tags in de head van de pagina te zetten. Plakt iemand je link in een bericht of chat, dan haalt het platform de pagina op, leest deze tags en bouwt daar de voorbeeldkaart van. Zonder tags moet het platform raden welke titel, beschrijving en afbeelding het gebruikt.

Het protocol noemt voor elke pagina vier verplichte eigenschappen, plus één die optioneel is maar algemeen wordt aanbevolen:

Tag	Wat erin staat	Status
og:title	De titel van het object zoals die in het voorbeeld moet verschijnen	Verplicht
og:type	Het soort object, bijvoorbeeld `website` of `article`	Verplicht
og:image	Het adres van de afbeelding die de pagina vertegenwoordigt	Verplicht
og:url	Het canonieke adres van de pagina, dat dient als permanente id	Verplicht
og:description	Een beschrijving van een à twee zinnen	Optioneel, algemeen aanbevolen

De waarde van og:type is meer dan een label. Volgens ogp.me kan het gekozen type extra eigenschappen met zich meebrengen. Voor article noemt het protocol velden als article:published_time en article:modified_time. Andere optionele tags zijn og:site_name (de naam van de hele site) en og:locale (de taal van de tags, standaard en_US).

De minimale HTML voor Open Graph-tags

Dit is een complete set die je kunt aanpassen. (Het voorbeeld op ogp.me zet ook een prefix-attribuut op het html-element; de grote platforms lezen de tags ook zonder.) De set hoort in het head-element, naast je gewone title-tag:

<head>
  <title>Open Graph-tags: og:image instellen</title>
  <meta property="og:title" content="Open Graph-tags: og:image instellen">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/afbeeldingen/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Een linkvoorbeeld met afbeelding, titel en beschrijving">
  <meta property="og:description" content="De vier verplichte Open Graph-tags, de eisen aan de afbeelding en het testen van een linkvoorbeeld.">
  <meta property="og:site_name" content="Voorbeeld">
</head>

Een paar opmerkingen over de details:

og:url is een permanente id. ogp.me definieert het als de canonieke URL van het object. Gebruik hetzelfde adres als in je canonical-link, zonder trackingparameters.
Schrijf het afbeeldingsadres volledig uit. Elk voorbeeld op ogp.me gebruikt een volledig adres. Een relatief pad als /afbeeldingen/kaart.png hangt ervan af hoe elke crawler het oplost, dus reken daar niet op.
Breedte en hoogte helpen. Volgens de documentatie van Facebook kan de crawler de afbeelding met deze twee tags meteen weergeven, zonder haar eerst te hoeven downloaden en verwerken.
Voeg og:image:alt toe. ogp.me zegt dat een pagina die een afbeelding opgeeft, ook een beschrijving moet geven van wat erop staat (een beschrijving, geen onderschrift).

Regels voor og:image: formaat, bestand en adres

Facebook publiceert de duidelijkste getallen, op de pagina over afbeeldingen in gedeelde links. Ze vormen de referentie voor de rest van dit onderdeel:

Het minimaal toegestane formaat is 200 × 200 pixels.
Het bestand mag niet groter zijn dan 8 MB.
Gebruik voor de beste weergave op apparaten met een hoge resolutie minimaal 1200 × 630 pixels.
Gebruik minstens 600 × 315 pixels om linkberichten met een grote afbeelding te krijgen. Kleinere afbeeldingen worden nog steeds getoond, maar veel kleiner.
Houd de beeldverhouding zo dicht mogelijk bij 1,91 : 1, zodat de hele afbeelding zonder bijsnijden verschijnt. 1200 × 630 komt neer op ongeveer 1,905 : 1, en daarom is dat formaat de gebruikelijke keuze.
De crawler accepteert alleen de coderingen gzip en deflate, dus controleer of je server of CDN met een van beide antwoordt.

Dit zijn de regels van Facebook. Andere apps en berichtendiensten lezen dezelfde tags, maar hun grenzen worden in dit artikel niet gedocumenteerd, dus test op de plekken die voor jou tellen. Ter vergelijking: de blogpagina’s van SEOgrinder gebruiken een voorbeeldafbeelding van 1200 × 630 pixels.

Twee andere voorwaarden gaan over toegang, niet over formaat. De afbeelding moet openbaar zijn: geen login ervoor en geen robots.txt-regel die de map blokkeert waarin ze staat. Kan een crawler het bestand niet ophalen, dan heeft het voorbeeld geen afbeelding, hoe goed het bestand ook is.

Geef elke pagina eigen Open Graph-tags

Omdat og:url de permanente id van een object is, moet het op elke pagina anders zijn. Hetzelfde geldt voor de rest:

og:title moet noemen waar deze pagina over gaat, niet de naam van de hele site.
og:description moet deze pagina in een of twee zinnen samenvatten.
og:image moet iets tonen dat bij de pagina past. Houd een standaardafbeelding achter de hand voor pagina’s die er geen eigen hebben.
og:type kan ook verschillen: website voor een homepage, article voor een blogbericht of nieuwsitem.

Welke techniek je ook gebruikt, genereer de tags uit de gegevens van elke pagina in plaats van ze met de hand te typen. Een klein voorbeeld in Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(pagina) {
  return [
    ['og:title', pagina.titel],
    ['og:type', pagina.type || 'website'],
    ['og:url', `https://example.com${pagina.pad}`],
    ['og:image', pagina.afbeelding || 'https://example.com/afbeeldingen/standaard-kaart.png'],
    ['og:description', pagina.beschrijving],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

De functie esc is belangrijk: een titel met een aanhalingsteken zou anders het attribuut te vroeg afsluiten en de tag breken. Gebruik je een CMS, zoek dan het veld waarmee je de deelafbeelding per pagina instelt. Wat je controleert, blijft hetzelfde: de tags in de geleverde HTML.

Open Graph-tags moeten in de geleverde HTML staan

Veel moderne sites sturen een bijna lege HTML-schil en laten JavaScript de pagina in de browser opbouwen. Google kan daarmee overweg: volgens de JavaScript-documentatie rendert Zoeken pagina’s met een evergreen-versie van Chromium. Op dezelfde pagina staat ook dat server-side rendering of pre-rendering nog steeds een goed idee is, omdat niet alle bots JavaScript kunnen uitvoeren.

Voor AI-crawlers bestaat er een meting: in december 2024 ontdekten Vercel en MERJ dat geen van de grote AI-crawlers die ze onderzochten JavaScript uitvoerde. Dat is een momentopname uit 2024 en is sindsdien niet opnieuw bevestigd. Voor linkvoorbeelden volgt uit dezelfde logica een veilige regel: verschijnen je tags pas nadat een script is uitgevoerd, dan ziet een crawler die geen scripts uitvoert ze nooit. SEOgrinder meldt zulke pagina’s als “De pagina wordt pas in de browser opgebouwd”, met de opmerking dat veel AI-crawlers geen JavaScript uitvoeren en een vrijwel lege pagina zien.

Je kunt dit in tien seconden testen:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

Komen de tags terug, dan staan ze in de HTML zoals die is geleverd. Komt er niets terug, maar zie je de tags wel in de ontwikkelaarstools van de browser, dan voegt een script ze te laat toe. Gebruik “Paginabron weergeven” in de browser voor dezelfde test; die toont de geleverde HTML, niet de live pagina die de ontwikkelaarstools laten zien. De oplossing is om op de server te renderen of de pagina’s vooraf te genereren, zodat titel, tekst en tags in het eerste antwoord staan.

Zo test je het linkvoorbeeld

De Sharing Debugger van Facebook laat zien welke tags de crawler las en meldt eventuele fouten. Hij vraagt om een Facebook-login. Volgens de afbeeldingsdocumentatie van Facebook haalt hij, als je er een URL doorheen haalt, ook de metadata vooraf op, en dat is belangrijk vanwege de cache:

Facebook zet elke afbeelding in de cache onder haar adres. Vervang je een afbeelding, gebruik dan een nieuwe URL voor de nieuwe, anders blijft de oude staan.
Verwijder de oude afbeelding niet, want bestaande berichten kunnen er nog naar verwijzen.
Een andere afbeelding bij een URL werkt het voorbeeld van oude deelacties niet bij. Die moeten opnieuw worden opgehaald.
De crawler moet een afbeelding minstens één keer gezien hebben voordat hij haar kan weergeven. Zonder voorafgaand ophalen ziet de eerste persoon die een link deelt de afbeelding mogelijk niet.

Loop vóór het publiceren deze lijst door:

Haal de pagina op met curl en controleer dat de vijf tags in het eerste antwoord staan.
Open het afbeeldingsadres los. Het moet zonder login laden, met status 200.
Controleer het formaat: minimaal 1200 × 630 pixels, kleiner dan 8 MB.
Haal de pagina door de Sharing Debugger en lees de fouten en waarschuwingen.
Herhaal dit voor één pagina van elk type: de homepage, een bericht, een product.

Zo controleert SEOgrinder Open Graph-tags

Voer in SEOgrinder het adres van een openbare pagina in en het rapport bevat een sociale voorvertoning, die laat zien hoe de pagina eruitziet als ze wordt gedeeld. De tool leest je tags en laadt de afbeelding, en meldt wat hij vindt. Je hebt er geen account voor nodig en het kost niets. Dit zijn de bevindingen die hier tellen:

Voorvertoning bij delen onvolledig noemt welke van afbeelding, titel en beschrijving ontbreken.
Voorbeeldafbeelding laadt niet verschijnt als de afbeelding met een foutstatus antwoordt. De bevinding noemt die status en wijst op de gebruikelijke oorzaken: een verkeerd adres, een login voor het bestand of een blokkade in robots.txt. Volgens de bevinding verschijnen links dan zonder afbeelding op LinkedIn, WhatsApp en X.
Voorbeeldafbeelding is erg klein verschijnt onder 600 × 315 pixels (Facebook toont dan alleen een kleine miniatuur) en markeert afbeeldingen onder het minimum van 200 × 200 apart.
De pagina wordt pas in de browser opgebouwd is de bevinding voor pagina’s die hun interface pas in de browser opbouwen.

SEOgrinder kan je niet laten zien hoe elk netwerk de kaart tekent. Het controleert de tags en het bestand, het deel dat je zelf in de hand hebt. Gebruik voor de definitieve weergave de debugger.

Veelgemaakte fouten

Een relatief afbeeldingspad. Gebruik het volledige adres met https://.
Een afbeelding die niet op te halen is. Een login, een firewallregel of een robots.txt-regel op de afbeeldingenmap laat het voorbeeld zonder afbeelding.
Een te kleine afbeelding. Onder 600 × 315 pixels wordt ze klein getoond; onder 200 × 200 misschien helemaal niet.
Geen beschrijving. og:description is in het protocol optioneel, maar zonder die tag gokt het platform.
Dezelfde tags op elke pagina. Dan ziet elk bericht er bij het delen uit als de homepage, en identificeert og:url niets meer.
De afbeelding vervangen onder hetzelfde adres. Facebook slaat op URL in de cache op, dus publiceer het nieuwe bestand onder een nieuwe naam.
Tags die pas bestaan nadat JavaScript is uitgevoerd. Zet ze in de geleverde HTML.
Niet geëscapete aanhalingstekens in waarden. Ze beëindigen het attribuut en kappen de tag af.
Een trackingadres in og:url. De tag hoort het canonieke adres te bevatten.

Veelgestelde vragen

Zijn Open Graph-tags een rankingfactor?

Daar is geen bewijs voor. Open Graph bepaalt hoe een gedeelde link eruitziet op sociale netwerken en in berichtenapps. Niets in de hier gebruikte bronnen verbindt het met rankings.

Welk formaat moet og:image hebben?

1200 × 630 pixels, met een beeldverhouding dicht bij 1,91 : 1 en kleiner dan 8 MB. Dat voldoet aan de aanbeveling van Facebook en is het formaat van de voorbeeldafbeelding op de blogpagina’s van SEOgrinder.

Heb ik og:description nodig?

Het protocol noemt het optioneel en algemeen aanbevolen. Zonder die tag moet het platform een beschrijving uit je pagina bij elkaar raden, dus schrijf er een.

Waarom toont mijn oude afbeelding nog steeds?

Facebook zet afbeeldingen in de cache onder hun adres. Publiceer de nieuwe afbeelding onder een nieuwe URL en haal de pagina daarna door de Sharing Debugger. Oude deelacties worden niet automatisch bijgewerkt.

Hoe zit het met twitter:card?

Die tag hoort niet bij het Open Graph-protocol. Het verbeteradvies van SEOgrinder bij een onvolledige voorvertoning stelt ook voor om twitter:card op summary_large_image te zetten. De regels van X komen in dit artikel niet aan bod, dus lees ze na in de eigen documentatie van X.

Kan een AI coding agent de tags voor me toevoegen?

Het mechanische deel kan hij doen: de tags in je sjablonen zetten en met curl controleren. In het rapport maakt Overdragen aan AI van de bevindingen een werkopdracht in Markdown, met voor elke taak een controleerbare eindvoorwaarde. De afbeelding kiezen en de tekst formuleren blijft jouw werk. Hoe je dat veilig opzet, lees je in het artikel over SEO-fouten oplossen met een AI coding agent.

Je volgende stap

Voer de gratis scan uit op je homepage en bekijk de sociale voorvertoning en de bevindingen hierboven. Los ze op volgorde op, publiceer een nieuwe afbeelding onder een nieuw adres als je er een moet vervangen, en haal de pagina door de Sharing Debugger. Scan daarna opnieuw om te bevestigen dat de voorvertoning compleet is. Wil je daarna de rest van je site nalopen, gebruik dan de SEO-audit checklist.