Open Graph-tags: zo bepaal je hoe je link eruitziet bij delen

Open Graph-tags zijn een paar regels code in je website. Ze bepalen welke titel, beschrijving en afbeelding verschijnen als iemand je pagina deelt op Facebook, LinkedIn of in een chat-app. Staan ze er niet, dan kiest het platform zelf wat het laat zien. Dat is vaak een willekeurig logo, een afgeknipte zin of helemaal geen beeld. Hieronder lees je welke tags je nodig hebt, hoe groot je afbeelding moet zijn, hoe je de tags toevoegt en hoe je een verkeerd Facebook-linkvoorbeeld rechtzet.

Kort samengevat

• Met vijf tags ben je er bijna altijd: og:title, og:description, og:image, og:url en og:type.
• Maak je deelafbeelding 1200 × 630 pixels. Kleiner dan 200 × 200 pixels accepteert Facebook niet, groter dan 8 MB ook niet.
• De tags horen in de head van elke pagina, niet alleen op je homepage.
• Zie je na een wijziging nog de oude preview? Dan zit het meestal in de cache van het platform. De Sharing Debugger van Facebook laat de pagina opnieuw ophalen.
• Controleer je preview altijd voordat je een link deelt in een advertentie, nieuwsbrief of post.

Inhoudsopgave

• Wat Open Graph-tags precies doen
• Zo maakt Facebook een linkvoorbeeld
• De tags die je echt nodig hebt
• De deelafbeelding: formaat en eisen
• Zo voeg je Open Graph-tags toe
• Een Facebook-linkvoorbeeld controleren en herstellen
• Hoe wij naar Open Graph kijken
• Een website waarbij je eerst kijkt en dan beslist
• Veelgestelde vragen
• Bronnen

Wat Open Graph-tags precies doen

Open Graph is een protocol dat Facebook heeft bedacht. Volgens de officiële documentatie van het Open Graph-protocol maakt het van een gewone webpagina een "rijk object" dat sociale netwerken kunnen begrijpen. In gewone taal: je vertelt het platform zelf wat de titel is, wat de pagina inhoudt en welk plaatje erbij hoort.

Dat gebeurt met meta-tags in de code van je pagina. Bezoekers zien ze niet. Ze zijn bedoeld voor de crawlers van sociale netwerken: de programma's die je pagina even ophalen zodra iemand de link plakt. web.dev legt uit dat deze og-tags precies die crawlers van semantische informatie voorzien.

Waarom zou je dat zelf regelen? De stijlgids van de Duitse federale overheid zegt het nuchter: zonder Open Graph-tags stelt een sociale app de preview zelf samen, en dat levert vaak ongeschikte resultaten op. Denk aan:

• de tekst van je cookiebanner als beschrijving;
• een klein pictogram uit je footer als afbeelding;
• de titel "Home" in plaats van je bedrijfsnaam en wat je doet.

Een linkvoorbeeld is je etalage op andermans tijdlijn. Iemand beslist in een seconde of hij klikt. Een scherpe titel en een goede foto maken dat verschil.

Zo maakt Facebook een linkvoorbeeld

Plakt iemand jouw link in een bericht, dan gebeurt er dit:

1. Facebook stuurt zijn crawler naar je pagina.
2. De crawler leest de code in de head en zoekt naar og-tags.
3. Uit die tags bouwt Facebook de preview: afbeelding, titel, beschrijving en domeinnaam.
4. Facebook bewaart het resultaat in zijn cache. Wie de link daarna deelt, krijgt dezelfde preview.

Die laatste stap verklaart de meeste problemen. Pas je later je titel of afbeelding aan, dan blijft Facebook de oude versie tonen tot de pagina opnieuw wordt opgehaald. Kontentino beschrijft dat wijzigingen pas zichtbaar worden na een nieuwe crawl. Een verouderde preview is dus meestal geen fout in je code. Het platform heeft gewoon nog oude informatie.

LinkedIn, WhatsApp, Slack en de meeste andere apps lezen grotendeels dezelfde og-tags. Regel je ze één keer goed, dan heb je er overal profijt van.

De tags die je echt nodig hebt

Het Open Graph-protocol noemt vier verplichte eigenschappen: og:title, og:type, og:image en og:url. De Duitse stijlgids raadt daarnaast og:description aan. Samen zijn dat de vijf tags die op elke pagina horen.

Een paar toelichtingen:

og:title mag afwijken van de title-tag die Google gebruikt. In Google wil je vaak een zoekwoord en je plaatsnaam erin. Op Facebook werkt een titel die nieuwsgierig maakt of een probleem benoemt meestal beter. Hulp nodig bij het schrijven? Met onze checklist voor websiteteksten loop je elke pagina snel na.

og:url is volgens ogp.me de canonieke URL die als permanente ID dient. Likes en deelacties worden aan dat adres gekoppeld. Verander je dit adres steeds, dan raak je die versnipperd kwijt.

og:type laat je meestal op website staan. Het protocol zegt dat een pagina zonder type als website wordt behandeld. Voor blogartikelen kun je article gebruiken, met extra tags zoals de publicatiedatum.

Handige extra tags

Wil je het netjes afmaken, voeg dan deze toe:

• og:site_name: de naam van je bedrijf, los van de paginatitel.
• og:locale: de taal en regio. Voor een Nederlandse site is dat nl_NL.
• og:image:width en og:image:height: de afmetingen van je afbeelding in pixels. Zo weet het platform direct hoe groot het beeld is, ook voordat het bestand binnen is.
• og:image:alt: een korte beschrijving van de afbeelding voor mensen die een schermlezer gebruiken.

Voor X (voorheen Twitter) bestaan aparte twitter-tags, zoals twitter:card. Zet twitter:card op summary_large_image als je daar een grote afbeelding wilt. Voor titel en beschrijving valt X doorgaans terug op je og-tags, dus die hoef je niet dubbel te schrijven.

De deelafbeelding: formaat en eisen

De afbeelding bepaalt of iemand stopt met scrollen. Hier gaat het het vaakst mis, dus eerst een paar harde getallen.

Facebook noemt zelf in zijn richtlijnen voor afbeeldingen bij gedeelde links:

• minimaal 200 × 200 pixels, anders wordt de afbeelding niet gebruikt;
• maximaal 8 MB per bestand;
• minimaal 1200 × 630 pixels voor de beste weergave op scherpe schermen;
• minimaal 600 × 315 pixels als je de grote weergave wilt in plaats van een klein vierkantje naast de tekst.

De Duitse overheidsstijlgids adviseert exact 1200 × 630 pixels (verhouding 1,9:1) of 1200 × 1200 pixels voor een vierkante versie, in jpg.

Onze vuistregels voor een afbeelding die overal goed uitpakt:

1. Maak hem 1200 × 630 pixels. Dat formaat werkt op Facebook, LinkedIn en in de meeste chat-apps.
2. Houd tekst en logo in het midden. Sommige apps snijden de randen af of tonen een vierkante uitsnede.
3. Gebruik weinig tekst. Vijf woorden zijn genoeg. De titel staat er al onder.
4. Kies jpg voor foto's. Gebruik png alleen voor beelden met strakke vlakken of tekst.
5. Houd het bestand licht. 8 MB is de grens, maar een bestand van een paar honderd kilobyte laadt sneller en ziet er net zo goed uit. Hoe je dat doet, lees je in ons stappenplan voor afbeeldingen optimaliseren.
6. Gebruik alleen beeld waar je de rechten op hebt. Een gedeelde link verspreidt je afbeelding veel verder dan je eigen site. Twijfel je? Lees dan eerst wanneer je foto's op je website mag gebruiken.

Geef liefst elke belangrijke pagina een eigen afbeelding. Een dienstpagina over badkamers met een foto van een badkamer werkt beter dan overal hetzelfde logo.

Zo voeg je Open Graph-tags toe

In de HTML van je pagina

Open Graph-tags zijn meta-elementen in de head van je pagina, met een property- en een content-attribuut. Zo ziet een complete set voor een dienstpagina eruit:

<head>
  <title>Loodgieter Hengelo | Bakker Installatie</title>
  <meta property="og:title" content="Loodgieter in Hengelo, vandaag nog geholpen">
  <meta property="og:description" content="Lekkage of verstopping? Bel en we komen binnen twee uur.">
  <meta property="og:image" content="https://bakkerinstallatie.nl/img/deel-loodgieter.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Monteur repareert een lekkende kraan">
  <meta property="og:url" content="https://bakkerinstallatie.nl/loodgieter-hengelo/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Bakker Installatie">
  <meta property="og:locale" content="nl_NL">
  <meta name="twitter:card" content="summary_large_image">
</head>

Let op het verschil: og-tags gebruiken property, twitter-tags gebruiken name. Bakker Installatie is een verzonnen voorbeeld. Vervang de teksten en adressen door die van jezelf.

In een websitebouwer of CMS

Beheer je je pagina's zelf in een systeem, dan typ je deze code zelden met de hand. De meeste systemen hebben per pagina een veld voor "social" of "delen", vaak in de SEO-instellingen of via een SEO-plugin. Daar vul je titel, beschrijving en afbeelding in. Vul je niets in, dan neemt het systeem vaak je gewone paginatitel en de eerste afbeelding op de pagina over. Soms gaat dat goed, maar controleer het.

Wat je beter niet doet

• Tags via JavaScript invoegen. Veel crawlers voeren geen scripts uit. De tags moeten in de HTML staan die de server meteen levert.
• Een relatief pad bij og:image. Schrijf niet /img/foto.jpg, maar het volledige adres met https.
• Dubbele tags. Twee plugins die allebei og:title schrijven, geven onvoorspelbare previews. Kies er één.
• Een afbeelding achter een login of blokkade. Kan de crawler het bestand niet ophalen, dan krijg je geen beeld.
• Overal dezelfde titel. Elke pagina verdient een eigen preview.

Open Graph is iets anders dan structured data. Open Graph regelt je preview op sociale media. Structured data helpt zoekmachines en AI-assistenten je bedrijf te begrijpen. Allebei de moeite waard. Hoe je dat tweede aanpakt, lees je in onze gids over structured data op je bedrijfswebsite.

Een Facebook-linkvoorbeeld controleren en herstellen

Deel nooit blind een link in een betaalde advertentie of een nieuwsbrief aan je hele klantenbestand. Controleer eerst. Zo doe je dat:

1. Open de Sharing Debugger van Facebook. Volgens de handleiding van Meta voor webmasters laat die tool zien welke tags de crawler oppikt, inclusief fouten en waarschuwingen.
2. Plak de exacte URL. Let op https of http, www of geen www, en een slash aan het eind. Voor Facebook zijn dat verschillende adressen.
3. Bekijk de preview en de waarschuwingen. Mist er een tag of is de afbeelding te klein, dan staat dat erbij.
4. Klik op opnieuw ophalen. De debugger haalt de pagina dan opnieuw op, en daarmee ververs je de cache. Zo los je een verouderde preview op.
5. Herhaal dit voor LinkedIn. LinkedIn heeft een eigen controletool, de Post Inspector, die op dezelfde manier werkt.

Veelvoorkomende problemen en de oplossing

Die laatste is een handige truc: geef een nieuwe deelafbeelding ook een nieuwe bestandsnaam, bijvoorbeeld deel-home-v2.jpg. Dan weet elk platform zeker dat het om een ander bestand gaat.

Een link in een bericht dat je al eerder plaatste, past zich niet altijd aan. Mag de oude preview echt niet blijven staan, verwijder de post dan en plaats hem opnieuw.

Hoe wij naar Open Graph kijken

Wij zien Open Graph als onderdeel van de basis, net als een werkend contactformulier. Niemand merkt het als het goed is. Iedereen merkt het als het fout is. Een ondernemer deelt trots zijn nieuwe site in een LinkedIn-post, en de preview toont een grijs vlak met "Home". Dat eerste moment krijg je niet terug.

Daarom stellen we bij elke pagina drie vragen. Wat moet iemand in één oogopslag snappen? Welk beeld laat dat zien? En klopt de tekst ook als hij buiten je site staat, tussen berichten van vrienden en collega's? Een goede preview is geen technisch klusje achteraf. Het is dezelfde tekst en hetzelfde beeld als je hero, maar dan in het klein. Daar schreven we eerder over in onze best practices voor de hero section.

We merken ook dat ondernemers Open Graph verwarren met vindbaarheid in Google. Dat zijn twee aparte dingen. Je hebt ze allebei nodig, en voor allebei geldt: regel het bij de bouw, dan hoef je er later niet meer naar om te kijken.

— Patrick

Een website waarbij je eerst kijkt en dan beslist

Heb je geen zin om zelf met tags, afbeeldingen en debugtools aan de slag te gaan? Wij bouwen je website eerst helemaal af en zetten hem op een testadres. Daar bekijk je alles rustig: ontwerp, teksten, elke pagina. Wil je hem houden, dan betaal je. Wil je hem niet, dan betaal je niets.

De prijzen zijn eenmalig en vooraf bekend:

• Start: € 350 eenmalig, een onepager.
• Compleet: € 500 eenmalig, een site met meerdere pagina's.

Geen abonnement. Na betaling zijn broncode en ontwerp van jou. Hosting doe je bij ons of ergens anders. Elke site krijgt ontwerp en teksten op maat en is technisch vindbaar vanaf de eerste dag, in Google en in AI-assistenten zoals ChatGPT. Benieuwd hoe jouw site eruit kan zien? Laat mij mijn website zien.

Veelgestelde vragen

Helpen Open Graph-tags mijn positie in Google?

Niet direct. Google gebruikt voor zijn zoekresultaten vooral je title-tag, meta-description en de inhoud van de pagina. Open Graph bepaalt hoe je link eruitziet op sociale media. Een aantrekkelijke preview kan wel meer klikken en bezoekers opleveren, en dat is ook wat waard.

Moet ik op elke pagina Open Graph-tags zetten?

Ja, op elke pagina die iemand zou kunnen delen. Mensen delen niet alleen je homepage, maar ook een dienstpagina, een blog of een vacature. Zonder eigen tags krijgt die pagina een preview die het platform zelf in elkaar zet.

Waarom toont Facebook nog steeds mijn oude afbeelding?

Facebook bewaart de preview van een link in zijn cache. Haal de pagina opnieuw op in de Sharing Debugger. Werkt dat niet, geef de afbeelding dan een nieuwe bestandsnaam, pas og:image aan en haal de pagina nog een keer op.

Wat is het verschil tussen og:title en de gewone paginatitel?

De title-tag gebruikt Google in de zoekresultaten, og:title gebruiken sociale netwerken in de preview. Ze mogen hetzelfde zijn, maar dat hoeft niet. Op sociale media werkt een titel die een probleem of voordeel benoemt vaak beter dan een titel vol zoekwoorden.

Werken Open Graph-tags ook voor WhatsApp en LinkedIn?

Ja. LinkedIn, WhatsApp en de meeste andere apps die een linkvoorbeeld tonen, lezen dezelfde og-tags. Met één goede set tags en een afbeelding van 1200 × 630 pixels zit je op vrijwel alle platforms goed.

Bronnen

• The Open Graph protocol
• Open-Graph-Tags, stijlgids van de Duitse federale overheid
• Social discovery, web.dev
• Hoe bewerk je een Facebook Link Preview?, Kontentino
• Images in Link Shares, Meta for Developers
• A Guide to Sharing for Webmasters, Meta for Developers

Aanbevelingen

• Checklist voor websitetekst: zo beoordeel je elke pagina in 30 minuten
• Afbeeldingen optimaliseren website: praktisch stappenplan voor snelheid en SEO
• MKB: zet deze week gestructureerde data op je bedrijfswebsite zonder gedoe
• AI-content op website: dit moet je technisch regelen