Open Graph-meta tags: wat je moet weten

Praktische uitleg van Open Graph-tags: welke tags je nodig hebt, implementatievoorbeelden, testcommando's en een checklist om social previews betrouwbaar te maken.

Michael

Gepubliceerd 16 februari 2026

Open Graph Meta Tags - wat je moet weten

Wat je van dit artikel krijgt

In dit artikel leg ik kort en praktisch uit wat Open Graph-meta tags doen. Ik bespreek welke tags je altijd moet opnemen, hoe je previews test (gebruik de Facebook Sharing Debugger) en welke fouten vaak voor problemen zorgen bij sociale netwerken.

Wat is Open Graph?

Open Graph is een protocol om social metadata te standaardiseren. Door specifieke meta-elementen in de head van een pagina te plaatsen vertel je sociale platforms precies welke titel, beschrijving en afbeelding ze moeten gebruiken bij het maken van een preview. Dit vermindert willekeurige keuzes door een netwerk (zoals een advertentiebanner of headerafbeelding) en maakt gedeelde links visueel consistenter. Controleer voor de zekerheid je tags met de Facebook Sharing Debugger.

Belangrijke Open Graph-tags

De volgende tags vormen de basis. Gebruik altijd een combinatie van deze tags zodat platforms consistente previews kunnen genereren; controleer de weergave bijvoorbeeld met de Facebook Sharing Debugger.

og:title — de titel die in de preview verschijnt
og:description — korte omschrijving of teasertekst
og:image — URL naar de uitgelichte afbeelding
og:url — de canonieke URL van de gedeelde pagina
og:type — type resource (bijv. article, website, video)

Handig om altijd mee te geven. Gebruik og:image:alt voor toegankelijkheid en og:image:width/og:image:height zodat platforms de afbeelding correct schalen — voeg og:image:alt via WordPress Uitgelichte afbeelding of direct in de HTML head toe.

HTML-voorbeeld

Plaats de tags in de <head> van je HTML. Een minimaal setje ziet er zo uit met Chrome DevTools:

Gebruik in header.php: <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png">

Aanvullende tags voor X/Twitter en platforms

Veel platforms consumeren Open Graph, maar sommige (zoals X, voorheen Twitter) hebben eigen tags om het kaarttype aan te geven. Voor X kun je daarom ook opnemen: <meta name="twitter:card" content="summary_large_image"> en <meta name="twitter:title" ...>. Platforms kiezen soms zelf welke tag ze gebruiken; het opnemen van zowel OG- als platform-specifieke tags is een defensieve praktijk. Controleer de weergave daarna met de Facebook Debugger.

Best practices en checklist

Volg deze richtlijnen om previews betrouwbaar en aantrekkelijk te maken:

Zorg dat de tags in de <head> staan en vóór scripts die DOM wijzigen; sommige crawlers lezen alleen de eerste head-sectie.
Gebruik absolute HTTPS-URL's voor og:image en og:url zodat platforms afbeeldingen en pagina’s zonder extra redirects kunnen ophalen.
Voeg og:image:alt toe voor toegankelijkheid en om context te geven wanneer afbeeldingen niet laden.
Vermeld og:url als canonieke URL zodat gedeelde links consistent naar één adres verwijzen, ook bij UTM-parameters.
Geef indien mogelijk og:image:width en og:image:height mee; dat helpt platforms bij layout-keuzes en voorkomt onnodige downloads.

Veelvoorkomende fouten en oplossingen

Veelvoorkomende oorzaken van foute of ontbrekende previews. Controleer Open Graph-tags met Facebook Sharing Debugger.

Afbeelding wordt niet opgehaald: controleer met curl -I of de server een 200-response en correcte Content-Type terugstuurt voor de afbeeldings-URL.
Afbeelding is geblokkeerd door robots.txt of toegankelijkheidsregels: controleer robots.txt en server-configuratie; platforms volgen soms dezelfde richtlijnen als zoekmachines.
Meerdere tegenstrijdige tags: ruim oude of dynamische meta-tags op zodat elk platform een eenduidige waarde vindt.
Tags staan binnen JavaScript die pas na renderen in de DOM verschijnt: soms lezen scrapers alleen de server-rendered head; zorg dat kritische OG-tags server-side aanwezig zijn.

Controleren en debuggen

Je kunt previews en tag-implementatie vanaf buiten controleren met eenvoudige tools en commando’s. Gebruik de juiste tools voor de taak: Google Tag Assistant.

Bekijk de HTML die de server terugstuurt: curl -L -A "Mozilla/5.0" https://example.com/pagina (zonder -I) toont de body inclusief meta-tags; -L volgt redirects.
Controleer alleen headers: curl -I https://example.com/afbeelding.png toont responseheaders en Content-Type.
Gesimuleerde user-agent: als een platform specifieke user-agents gebruikt, controleer met curl -A "FacebookExternalHit/1.1" <URL> om te zien wat die agent krijgt.
Platform-specifieke debuggers: gebruik de Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) en de X/Twitter card validator om te zien welke metadata het platform leest en om cache-opnieuwladen te forceren.

Voorbeeld troubleshooting-stappen

Stel: een gedeelde link laat een headerafbeelding zien in plaats van je og:image. Volg deze stappen:

1) Verifieer dat de juiste og:image-tag in de server-rendered HTML staat met curl -L.
2) Controleer of de afbeeldings-URL rechtstreeks bereikbaar is en een correcte Content-Type retourneert met curl -I.
3) Test in de Facebook Sharing Debugger en forceer een refresh; controleer meldingen over fetch-fouten of redirects.
4) Controleer of server-side caching of CDN-instellingen een oude tag teruggeven en verhelder dat cache wordt geleegd na wijzigingen.

Afsluitende tips

Behandel Open Graph-tags als onderdeel van je publicatieworkflow: voeg ze in je templates, test ze bij elke publicatie en leg vast welke velden automatisch uit je CMS komen. Controleer previews met de Facebook Sharing Debugger. Zorg dat afbeeldingen direct bereikbaar zijn via HTTPS en maak fallback-regels voor pagina’s zonder specifieke uitgelichte afbeelding.

Wil je dieper in technische checks duiken? Lees de Technical SEO Guide voor meer troubleshoot-commando’s en serverchecks.

Veelgestelde vragen

Werkt Open Graph anders op mobiel?

Open Graph zelf is een set metadata en werkt technisch hetzelfde voor mobiele en desktop-views. Test altijd in de doelomgeving (mobiele app, desktopbrowser). Houd er rekening mee dat apps en mobiele browsers andere layoutkeuzes maken; gebruik de Facebook Sharing Debugger en zorg dat afbeeldingen en tekst kort genoeg zijn voor mobiele weergave.

Moet ik naast OG ook Twitter/X-tags plaatsen?

Veel platforms ondersteunen OG, maar X heeft nog steeds eigen kaart-tags die extra controle bieden over kaarttype en presentatie. Neem beide op en test de weergave met de Twitter Card Validator. Zo vergroot je op een eenvoudige manier de consistentie van je kaartweergave.

Waarom verandert de preview soms pas na uren?

Platforms cachen previews en halen metadata niet altijd bij elke share opnieuw op. Gebruik platform-debuggers om cache te verversen (bijv. Facebook Sharing Debugger) en controleer je CDN- of servercache-instellingen als wijzigingen niet meteen zichtbaar worden.

Heeft Open Graph invloed op SEO?

Open Graph is bedoeld voor sociale previews. Het is geen directe rankingfactor voor zoekmachines. Betere social sharing kan leiden tot meer verkeer en links, wat indirect invloed kan hebben. Zorg dat je tags server-side aanwezig en toegankelijk zijn; zo voorkom je dat crawlers en platforms essentiële metadata missen. Controleer je Open Graph-tags met de Facebook Sharing Debugger.