What are Open Graph tags?

Open Graph tags are HTML meta tags that tell social media platforms how to display your link when shared. They include og:title (the headline), og:description (the summary), og:image (the preview image), and og:url (the canonical URL).

Do I need Open Graph tags for my website?

If you share your website links on any social platform — X, LinkedIn, Slack, Discord, WhatsApp, or Reddit — you need Open Graph tags. Without them, platforms guess how to display your link, and they guess poorly.

Is Open Graph the same as Twitter Cards?

No. Open Graph was created by Facebook in 2010. Twitter Cards were created by Twitter separately. However, most platforms support both, and you should set both for maximum compatibility.

Wat is Open Graph? Een complete beginnershandleiding

Je deelt een link op sociale media. Het voorproefje ziet er verschrikkelijk uit. Dit is waarom — en hoe Open Graph-tags dit oplossen.

Wilt u zien hoe uw links er daadwerkelijk uitzien?

Controleer uw Open Graph-tags gratis met Proovd — plak een URL en bekijk het voorbeeld op X, LinkedIn, Slack, Discord, WhatsApp en Reddit voordat u deelt.

Snel antwoord

Open Graph is een set HTML-metatags die bepalen hoe links er op sociale media uitzien
Kerntags: og:title, og:description, og:image, og:url
Zonder OG-tags raden platforms – en ze raden slecht
Stel OG-tags + Twitter Card-tags in voor volledige dekking

Wat Open Graph eigenlijk is

Open Graph is een protocol uitgevonden door Facebook in 2010. Vóór Open Graph, toen iemand een link deelde op Facebook, was de preview onvoorspelbaar. Facebook scande de pagina op zoek naar afbeeldingen en tekst, en het resultaat was vaak willekeurig: soms een kleine favicon, soms een willekeurige foto van de pagina, soms helemaal niets.

Facebook zei: "Laten we webmasters een standaardmanier geven om ons te vertellen wat ze moeten laten zien." Ze introduceerden een reeks metatags die elke website aan hun HTML kon toevoegen. Andere platforms — X, LinkedIn, Slack, Discord, WhatsApp, Reddit — hebben dezelfde standaard overgenomen. Tegenwoordig is Open Graph de universele taal voor linkvoorbeelden op internet.

Het is geen technologie die je installeert. Het zijn gewoon HTML-metatags in de sectie van uw pagina. Dat is het.

De kerntags Open Graph

Elke pagina die op sociale media wordt gedeeld, moet minimaal deze vier tags hebben:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

Dit is wat iedereen doet:

og:title — De kop die op de voorbeeldkaart verschijnt. Meestal de paginatitel of de kop van het artikel.
og:description — Een korte samenvatting (2-3 zinnen) die onder de titel verschijnt.
og:image — De voorbeeldafbeelding. Aanbevolen formaat: 1200×630 pixels (verhouding 1,91:1).
og:url — De canonieke URL van de pagina. Helpt platforms de juiste URL te identificeren.

Er zijn aanvullende optionele tags zoals og:type (meestal 'website' of 'artikel'), og:site_name (uw merknaam) en og:locale (taal). Maar de vier hierboven zijn degenen die het belangrijkst zijn voor linkvoorbeelden.

Hoe Open Graph werkt — Stap voor stap

Dit gebeurt er als iemand een link deelt:

Iemand plakt een URL in X, LinkedIn, Slack, Discord, of waar dan ook.
De bot van het platform haalt de URL op en leest de HTML van boven naar beneden.
Er wordt gezocht naar og: tags in de sectie .
Er wordt een voorbeeldkaart gemaakt met behulp van de waarden og:title, og:description en og:image.
De kaart wordt weergegeven voor iedereen die de gedeelde link ziet.

Als het platform de og:-tags niet vindt, valt het terug op zijn eigen heuristiek: willekeurige afbeeldingen kiezen, de tag </code> gebruiken, enz. Dit terugvalgedrag is de reden waarom zoveel gedeelde links er vreselijk uitzien.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph versus Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter creëerde zijn eigen tagsysteem genaamd "Twitter Cards" voordat Open Graph bestond. Twitter Cards gebruik de kenmerken <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> en <code>twitter:image</code> attributen in plaats van <code>og:</code> voorvoegsels.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>Tegenwoordig ondersteunen de meeste platforms beide. Maar X/Twitter geeft nog steeds de voorkeur aan <code>twitter:card</code>-tags boven OG-tags. Daarom is het het beste om <strong>beide</strong> in te stellen:</p> <pre><code> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">Waarom dit belangrijk is voor uw website</h2> <p data-i18n="b.what-is-open-graph.35">Als u uw inhoud ergens op sociale media deelt (wat u waarschijnlijk doet als u een website heeft), zijn uw linkvoorbeelden uw eerste indruk. Een goed gemaakt voorbeeld met een duidelijke titel, aantrekkelijke beschrijving en een goede afbeelding verhogen de klikfrequentie aanzienlijk.</p> <p data-i18n="b.what-is-open-graph.36">Een kapot voorbeeld (een ontbrekende afbeelding, een ingekorte titel of een onleesbare beschrijving) zorgt ervoor dat uw inhoud er onprofessioneel uitziet. Mensen scrollen er voorbij.</p> <p data-i18n="b.what-is-open-graph.37">Open Graph tags zijn het verschil tussen de twee. Het duurt vijf minuten om ze op te zetten en ze hebben een onevenredige impact op hoe uw inhoud presteert op sociale media.</p> <h2 data-i18n="b.what-is-open-graph.38">Snelle checklist</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>Voeg <code>og:title</code>, <code>og:description</code>, <code>og:image</code> en <code>og:url</code> toe aan elke pagina</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>Voeg <code>twitter:card</code> en <code>twitter:image</code> toe voor X/Twitter-compatibiliteit</li> <li data-i18n="b.what-is-open-graph.41">Stel de afbeeldingsgrootte in op 1200×630 pixels</li> <li data-i18n="b.what-is-open-graph.42">Gebruik absolute URL's (https://...) voor alle afbeeldingspaden</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>Test met <a href="https://proovd.in/nl/">Proovd</a> om te zien hoe uw pagina er op alle platforms uitziet</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">Veelgestelde vragen</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">Heb ik Open Graph tags nodig als ik niet deel op sociale media?</h3> <p data-i18n="b.what-is-open-graph.46">Als je nergens links deelt, heb je ze niet nodig. Maar als je een website hebt en deze ook maar één keer deelt op sociale media, zijn OG-tags essentieel.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Hebben Open Graph-tags invloed op de Google-ranglijst?</h3> <p data-i18n="b.what-is-open-graph.48">Niet direct. Google gebruikt geen OG-tags als rankingfactor. Maar ze kunnen de klikfrequenties van zoekresultaten en sociale shares beïnvloeden, wat indirect van invloed is op het verkeer en de zichtbaarheid.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">Kan ik verschillende OG-tags instellen voor verschillende pagina's?</h3> <p data-i18n="b.what-is-open-graph.50">Ja. Elke pagina moet zijn eigen OG-tags hebben die overeenkomen met de inhoud. Een blogpost over honden moet andere og:title en og:image hebben dan een pagina over katten.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">Gerelateerde artikelen</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/nl/blog/discord-link-preview-not-working">Discord Linkvoorbeeld werkt niet? 7 oplossingen om te proberen (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/nl/blog/how-to-add-open-graph-tags">Hoe u Open Graph Tags aan elke website kunt toevoegen</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/nl/blog/open-graph-vs-twitter-card">Open Graph versus Twitter Card: wat is het verschil?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/nl/blog/og-image-size-guide">Open Graph Afbeeldingsgrootte: de complete gids voor 2026</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>Controleer uw Open Graph-tags in seconden</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Controleer uw Open Graph-tags gratis met <a href="https://proovd.in/nl/">Proovd</a> — plak een URL en bekijk het voorbeeld op X, LinkedIn, Slack, Discord, WhatsApp en Reddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>