Wat zijn Open Graph Tags? Een gids voor linkvoorbeelden en sociaal delen

Wanneer je een link deelt op Facebook, LinkedIn, Slack of Twitter, verschijnt meestal een voorbeeldkaart — met een titel, beschrijving en afbeelding. Deze voorbeelden zijn niet magisch. Ze worden bestuurd door Open Graph (OG) tags in de HTML van je pagina.

Open Graph tags correct instellen betekent dat je gedeelde links professioneel eruitzien en meer klikken krijgen. Fout instellen betekent lelijke voorbeelden, ontbrekende afbeeldingen of generieke vervangingstekst.

Wat is het Open Graph Protocol?

Open Graph is een protocol dat door Facebook in 2010 is gemaakt en waarmee webpagina's kunnen bepalen hoe ze eruit zien wanneer ze op sociale platforms worden gedeeld. Het gebruikt meta tags in de HTML <head> sectie:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Wanneer een sociaal platform een gedeelde URL detecteert, haalt het de pagina op en leest deze tags om de voorbeeldkaart op te bouwen.

Essentiële Open Graph Tags

og:title

De titel die wordt weergegeven in de voorbeeldkaart. Houd deze onder de 60 karakters voor optimale weergave op alle platforms.

<meta property="og:title" content="How to Create Branded Short Links" />

Tips:

Dupliceer niet zomaar je <title> tag — optimaliseer voor sociale betrokkenheid
Plaats belangrijke woorden vooraan
Vermijd clickbait (platforms kunnen dit afstraffen)

og:description

Een korte samenvatting die onder de titel wordt weergegeven. Streef naar 120-160 karakters.

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

De afbeelding die in het voorbeeld wordt weergegeven. Dit is de meest impactvolle tag — berichten met afbeeldingen krijgen aanzienlijk meer betrokkenheid.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Afbeeldingsvereisten per platform:

Platform	Aanbevolen grootte	Beeldverhouding
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px min	Alle

Gebruik 1200 × 630 pixels om alle platforms te dekken.

og:url

De canonieke URL voor de pagina. Dit vertelt platforms welke URL moet worden weergegeven en helpt dubbele inhoud voorkomen.

<meta property="og:url" content="https://example.com/page" />

og:type

Beschrijft het type inhoud. Veelgebruikte waarden:

website — voor homepagina's en algemene pagina's
article — voor blogposts en artikelen
product — voor productpagina's

Twitter Card Tags

Twitter gebruikt zijn eigen meta tags (naast Open Graph) voor voorbeeldkaarten:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Als Twitter card tags niet aanwezig zijn, valt Twitter terug op Open Graph tags. De meeste sites stellen beide in voor maximale controle.

Hoe sociale platforms Open Graph-gegevens ophalen

Wanneer je een URL deelt:

1De crawler van het platform bezoekt de URL
2Het leest de HTML <head> voor OG tags
3Het cacht de voorbeeldkaartgegevens
4Volgende delingen van dezelfde URL gebruiken de gecachte versie

Belangrijk: Wijzigingen in OG tags worden niet onmiddellijk doorgevoerd. Platforms cachen agressief, dus je moet de cache mogelijk handmatig wissen (zie debugging hieronder).

Linkvoorbeelden aanpassen met Linkly

Wat als je een URL deelt die je niet beheert — of je wilt verschillende voorbeeldkaarten voor verschillende contexten?

Met de functie aangepaste sociale voorbeelden van Linkly kun je de Open Graph-gegevens voor elke verkorte link overschrijven:

Stel een aangepaste titel, beschrijving en afbeelding in
Verschillende voorbeelden voor verschillende doelgroepen
Geen behoefte om de HTML van de doelpagina te bewerken
Werkt voor elke URL, zelfs pagina's die je niet bezit

Dit is vooral handig wanneer:

Je inhoud van derden deelt met je eigen branding
Je A/B-test uitvoert op verschillende voorbeeldkaarten om te zien welke meer klikken oplevert
De doelpagina heeft slechte of ontbrekende OG tags

Open Graph Tags debuggen

Facebook's tool laat je voorbeelden bekijken en gecachte OG-gegevens vernieuwen:

1Voer je URL in
2Klik op Debug
3Zie wat Facebook van je pagina leest
4Klik op Scrape Again om de cache te wissen

Twitter Card Validator

Twitter's validator toont hoe je kaart eruit ziet en markert eventuele problemen.

LinkedIn Post Inspector

LinkedIn's tool geeft een voorbeeldweergave van je linkkaart en vernieuwt gecachte gegevens.

Algemene tips

Controleer de bron: Bekijk je paginabron en zoek naar og: om te verifiëren dat tags aanwezig zijn
Gebruik absolute URL's: Afbeeldings-URL's moeten absoluut zijn (beginnen met https://), niet relatief
Test na wijzigingen: Wis altijd de platformcache na het bijwerken van OG tags
Controleer op JavaScript-rendering: Sommige platforms kunnen JavaScript niet uitvoeren, dus OG tags moeten in het initiële HTML-antwoord staan

Veelgemaakte fouten

1Ontbrekende og:image: Berichten zonder afbeeldingen krijgen 2-3x minder klikken
2Afbeelding te klein: Gebruik minimaal 1200 × 630 pixels
3Verkeerde beeldverhouding: Afbeeldingen worden awkward bijgesneden
4Verouderde cache: Je hebt je OG tags bijgewerkt maar bent vergeten de platformcaches te wissen
5Dubbele tags: Meerdere OG tags van hetzelfde type veroorzaken onvoorspelbaar gedrag
6HTTP-afbeeldingen: Gebruik HTTPS voor afbeeldings-URL's — sommige platforms blokkeren HTTP-afbeeldingen
7Relatieve URL's: Platformcrawlers kunnen relatieve paden niet oplossen

Open Graph voor verschillende inhoudstypen

Blogposts

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

Producten

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Video's

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Conclusie

Open Graph tags zijn een kleine toevoeging aan je HTML die grote invloed hebben op hoe je inhoud op het sociale web verschijnt. Ze goed instellen — met de juiste titel, beschrijving en afbeelding — verhoogt direct de click-through rates wanneer je links worden gedeeld.

Wil je aangepaste linkvoorbeelden zonder HTML te bewerken? Ga aan de slag met Linkly en pas de sociale voorbeeldkaart voor elke verkorte link aan — stel je eigen titel, beschrijving en afbeelding in.