HTMLhulp.nl logo
Open Graph-tags: hoe je content beter deelt op social media

Open Graph-tags: hoe je content beter deelt op social media

Open Graph-tags: hoe je content beter deelt op social media

Wanneer iemand je website deelt op Facebook, LinkedIn, WhatsApp of andere platforms, wil je dat dit er professioneel en aantrekkelijk uitziet. Een goed gekozen titel, beschrijving en afbeelding kunnen het verschil maken tussen een klik of genegeerd worden. Hiervoor gebruik je Open Graph-tags. In dit artikel leer je wat Open Graph-tags zijn, waarom ze belangrijk zijn en hoe je ze correct toevoegt aan je HTML.

Wat zijn Open Graph-tags?

Open Graph is een protocol ontwikkeld door Facebook, maar wordt inmiddels breed ondersteund door socialmediaplatforms. Met Open Graph-tags kun je bepalen hoe je pagina eruitziet wanneer deze wordt gedeeld.

De tags worden geplaatst in de <head> van je HTML en beginnen altijd met og:.

Voorbeeld:

<meta property="og:title" content="10 tips om HTML sneller te leren">
<meta property="og:description" content="Leer met deze praktische tips hoe je HTML eenvoudig onder de knie krijgt.">
<meta property="og:image" content="https://htmlhulp.nl/images/html-tips.jpg">
<meta property="og:url" content="https://htmlhulp.nl/artikel/html-tips">
<meta property="og:type" content="article">

Waarom zijn Open Graph-tags belangrijk?

  1. Betere zichtbaarheid
    Een aantrekkelijke preview met afbeelding en tekst trekt meer aandacht in drukke social feeds.

  2. Controle over weergave
    Zonder Open Graph-tags kiest het platform zelf willekeurige tekst of een afbeelding. Dat ziet er vaak slordig uit.

  3. Hogere CTR (Click-Through Rate)
    Een duidelijke titel en beschrijving vergroten de kans dat mensen daadwerkelijk doorklikken.

  4. Consistentie
    Of iemand je pagina deelt via Facebook, LinkedIn of Slack: de weergave blijft overal hetzelfde.

Belangrijkste Open Graph-tags

  • Titel

<meta property="og:title" content="Mijn HTML handleiding voor beginners">

Dit is de kop die zichtbaar is bij het delen.

  • Beschrijving

<meta property="og:description" content="Een complete uitleg van HTML, speciaal voor beginners.">

Geef een korte, pakkende samenvatting.

  • Afbeelding

<meta property="og:image" content="https://voorbeeld.nl/images/voorbeeld.jpg">

Een afbeelding trekt direct de aandacht. Gebruik een minimale grootte van 1200×630 pixels voor Facebook en LinkedIn.

  • URL

<meta property="og:url" content="https://voorbeeld.nl/artikel/html-basis">

Zorg altijd voor de canonieke URL van de pagina.

  • Type

<meta property="og:type" content="article">

Veelvoorkomende types: website, article, product, video.

  • Site name

<meta property="og:site_name" content="HTMLhulp.nl">

Geeft de naam van je site weer.

Voorbeeld van een complete set tags

<head>
<title>HTML leren in 1 dag</title>
<meta property="og:title" content="HTML leren in 1 dag">
<meta property="og:description" content="Een praktische handleiding om vandaag nog te starten met HTML.">
<meta property="og:image" content="https://htmlhulp.nl/images/html-leren.jpg">
<meta property="og:url" content="https://htmlhulp.nl/html-leren">
<meta property="og:type" content="article">
<meta property="og:site_name" content="HTMLhulp.nl">
</head>

Extra Open Graph-tags

  • Voor artikelen

<meta property="article:author" content="https://facebook.com/auteur">
<meta property="article:section" content="HTML">
<meta property="article:published_time" content="2025-08-30T12:00:00+00:00">

  • Voor producten

<meta property="product:price:amount" content="29.99">
<meta property="product:price:currency" content="EUR">

  • Voor video’s

<meta property="og:video" content="https://voorbeeld.nl/video.mp4">
<meta property="og:video:type" content="video/mp4">

Verschil met Twitter Cards

Twitter gebruikt zijn eigen protocol: Twitter Cards. Vaak werken Open Graph-tags ook op Twitter, maar je kunt extra tags toevoegen.

Voorbeeld:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML leren in 1 dag">
<meta name="twitter:description" content="Een praktische handleiding om vandaag nog te starten met HTML.">
<meta name="twitter:image" content="https://htmlhulp.nl/images/html-leren.jpg">

Testen van Open Graph-tags

Om zeker te weten dat je tags goed werken, kun je ze testen:

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug/

  • LinkedIn Post Inspector: www.linkedin.com/post-inspector/

  • Twitter Card Validator: cards-dev.twitter.com/validator

Voer je URL in en je ziet hoe de pagina eruitziet bij delen.

Veelgemaakte fouten bij Open Graph

  1. Geen afbeelding instellen → platforms kiezen vaak een willekeurige, onscherpe thumbnail.

  2. Verkeerde afbeeldingsgrootte → te klein of verkeerd formaat.

  3. Geen unieke description per pagina → alle links lijken hetzelfde.

  4. Niet testen → waardoor gedeelde links er rommelig uitzien.

  5. Alleen op Facebook letten → LinkedIn, WhatsApp en Slack gebruiken OG ook.

Tips voor sterke Open Graph-tags

  • Kies een aantrekkelijke afbeelding die direct de aandacht trekt.

  • Schrijf een description alsof het een mini-advertentie is.

  • Zorg dat elke pagina unieke OG-tags heeft.

  • Houd rekening met verschillende platforms.

  • Test altijd je tags met de officiële tools.

Met Open Graph-tags heb je volledige controle over hoe je content eruitziet wanneer mensen het delen. Dat geeft je website een professionele uitstraling en zorgt voor meer kliks en bereik.