Open Graph tags bepalen hoe je content eruitziet wanneer iemand je link deelt op social media. De juiste tags kunnen het verschil maken tussen 10 clicks en 1.000 clicks op een gedeelde link.
Zonder Open Graph tags haalt Facebook, LinkedIn of Twitter willekeurige tekst en afbeeldingen van je pagina. Met correcte tags bepaal jij precies wat mensen zien.
In deze gids leer je alles over Open Graph. Je krijgt praktische implementatie tips, design richtlijnen en een complete checklist.
Wat is Open Graph?
Open Graph is een protocol ontwikkeld door Facebook in 2010. Het definieert metadata die social media platforms gebruiken om link previews te genereren.
Wanneer iemand je URL plakt in een post, doet het platform dit:
- Crawl je pagina
- Zoek Open Graph meta tags in de <head> sectie
- Gebruik die data om een preview card te maken
- Toon de card met titel, beschrijving en afbeelding
Geen Open Graph tags? Dan gokt het platform en pakt het de eerste afbeelding en willekeurige tekst. Vaak met lelijke resultaten.
Het protocol is een uitbreiding van de standaard HTML meta tags. Het gebruikt het property attribuut in plaats van name voor identificatie.
Welke platforms gebruiken Open Graph?
- Facebook: Originele platform, volledige ondersteuning
- LinkedIn: Gebruikt Open Graph voor posts en shares
- Pinterest: Gebruikt OG tags als fallback (eigen protocol heeft voorkeur)
- WhatsApp: Link previews via OG tags
- Telegram: Link previews
- Slack: Unfurl links met OG data
- Discord: Embed previews
- iMessage: Rich link previews op iOS
Twitter heeft zijn eigen protocol (Twitter Cards) maar valt terug op Open Graph als Twitter Cards ontbreken.
Samen bereiken deze platforms miljarden gebruikers per dag. Dit is waarom Open Graph essentieel is voor elke website.
De essentiële Open Graph tags
og:title
De titel zoals getoond in social media previews.
<meta property="og:title" content="10 SEO tips die je rankings verdubbelen in 2026" />
Best practices:
- Maximaal 60 karakters (langere titels worden afgekapt)
- Mag verschillen van je HTML <title> tag
- Maak het aantrekkelijk voor social media (emotie, urgentie, nieuwsgierigheid)
- Vermijd ALL CAPS (komt schreeuwerig over)
- Test verschillende varianten voor betere CTR
Een goede og:title is specifiek en belooft waarde. Vergelijk:
- ❌ “SEO Tips” (te vaag)
- ✅ “10 SEO Tips Die Je Rankings Verdubbelen in 2026” (specifiek, belofte, actueel)
og:description
De beschrijving onder de titel.
<meta property="og:description" content="Ontdek bewezen SEO strategieën die je traffic met 200% verhogen. Van technische optimalisatie tot content marketing." />
Best practices:
- 200-300 karakters optimaal
- Facebook toont ~110 karakters, LinkedIn ~150
- Vat de waarde van je content samen
- Voeg een CTA toe indien relevant
- Gebruik power woorden: “bewezen”, “gratis”, “complete”, “stap-voor-stap”
De og:description moet je lezer verleiden om door te klikken. Focus op het voordeel, niet de features.
og:image
De afbeelding die getoond wordt. Dit is de belangrijkste tag voor engagement.
<meta property="og:image" content="https://jouwesite.nl/images/seo-tips-2026.jpg" />
Technische specs:
- Ideale grootte: 1200×630 pixels
- Minimum grootte: 600×315 pixels
- Aspect ratio: 1.91:1
- Formaat: JPG, PNG (WebP niet overal ondersteund)
- Max bestandsgrootte: 8MB (maar houd het onder 1MB voor snelheid)
Extra tags voor afbeeldingen:
<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image:alt" content="Infographic met 10 SEO tips voor 2026" />
Deze extra tags helpen platforms de afbeelding sneller te renderen. Ze hoeven niet eerst de afbeelding te downloaden om de dimensies te kennen.
og:url
De canonical URL van de pagina.
<meta property="og:url" content="https://jouwesite.nl/seo-tips-2026" />
Best practices:
- Gebruik altijd de canonical versie (met of zonder www, met https)
- Geen tracking parameters
- Trailing slash consistent houden
- Match met je canonical link tag
De og:url zorgt ervoor dat alle shares naar dezelfde URL verwijzen. Dit voorkomt fragmentatie van social signals.
og:type
Het type content.
<meta property="og:type" content="article" />
Veelgebruikte types:
- website: Voor homepage en algemene paginas
- article: Voor blog posts en nieuws artikelen
- product: Voor e-commerce product paginas
- video: Voor video content
- music: Voor muziek content
- book: Voor boeken en publicaties
Het type bepaalt welke extra properties beschikbaar zijn. Een article kan published_time hebben, een product kan price hebben.
og:site_name
Naam van je website of merk.
<meta property="og:site_name" content="Online Ambition" />
Optioneel maar aan te raden voor brand recognition. Het wordt vaak getoond boven of onder de titel.
og:locale
Taal en regio van je content.
<meta property="og:locale" content="nl_NL" />
Default is en_US, dus voor Nederlandse sites moet je dit expliciet instellen. Dit helpt platforms met localisatie.
Formaat: [taal]_[LAND] (bijv. en_GB, de_DE, fr_FR).
Extra tags voor specifieke content types
Voor artikelen (og:type=”article”)
<meta property="article:published_time" content="2026-02-10T10:00:00+01:00" /> <meta property="article:modified_time" content="2026-02-10T14:30:00+01:00" /> <meta property="article:author" content="https://jouwesite.nl/author/naam/" /> <meta property="article:section" content="SEO" /> <meta property="article:tag" content="SEO tips" /> <meta property="article:tag" content="rankings" />
Deze extra tags geven meer context. Ze helpen platforms met categorisatie en kunnen invloed hebben op distributie algoritmes.
Voor producten (og:type=”product”)
<meta property="product:price:amount" content="49.99" /> <meta property="product:price:currency" content="EUR" /> <meta property="product:availability" content="in stock" />
Product tags zijn vooral waardevol voor Facebook Shopping en Pinterest Product Pins. Ze kunnen je conversie verhogen door prijs direct te tonen.
Voor video (og:type=”video”)
<meta property="og:video" content="https://jouwesite.nl/video.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="1280" /> <meta property="og:video:height" content="720" />
Video tags zorgen voor inline playback op sommige platforms. Dit verhoogt engagement zonder dat gebruikers hoeven door te klikken.
Twitter Cards (aanvulling op OG)
Twitter heeft zijn eigen protocol maar gebruikt Open Graph als fallback.
Basis Twitter Card tags:
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@jouwehandle" /> <meta name="twitter:creator" content="@auteurhandle" /> <meta name="twitter:title" content="10 SEO tips..." /> <meta name="twitter:description" content="Ontdek bewezen..." /> <meta name="twitter:image" content="https://..." />
Card types:
- summary: Kleine afbeelding (1:1 ratio), goed voor profielen en korte updates
- summary_large_image: Grote afbeelding (2:1 ratio), beste voor content marketing
- player: Voor video of audio content met inline playback
- app: Voor app promotie met directe download link
Als je Twitter Cards niet instelt, valt Twitter terug op je OG tags. Maar voor optimale controle is het aan te raden beide te hebben.
Hoe je Open Graph tags implementeert
Handmatig (HTML)
Voeg tags toe in de <head> sectie:
<head> <meta property="og:title" content="Je titel" /> <meta property="og:description" content="Je beschrijving" /> <meta property="og:image" content="https://jouwesite.nl/image.jpg" /> <meta property="og:url" content="https://jouwesite.nl/pagina" /> <meta property="og:type" content="article" /> </head>
Let op: gebruik altijd property, niet name. Twitter Cards gebruiken wel name.
WordPress (via plugins)
Yoast SEO
- Open een pagina of post in de editor
- Scroll naar Yoast sectie onderaan
- Klik op “Social” tab
- Stel Facebook en Twitter voorbeelden in
- Upload custom OG afbeelding indien gewenst
Yoast genereert automatisch OG tags als je geen custom waarden instelt. Het gebruikt dan je SEO titel en description.
Rank Math
- Open pagina of post
- Klik Rank Math → Social tab
- Pas Facebook en Twitter meta data aan
- Upload afbeelding
Rank Math heeft een handige preview die laat zien hoe je post eruitziet op verschillende platforms.
All in One SEO
- Open pagina of post
- Scroll naar AIOSEO sectie
- Ga naar Social tab
- Configureer OG tags
Shopify
Shopify voegt automatisch OG tags toe. Voor custom tags:
- Ga naar Online Store → Themes
- Klik Actions → Edit code
- Open theme.liquid
- Voeg custom tags toe in <head> sectie
Let op: pas alleen code aan als je weet wat je doet. Maak altijd een backup van je theme eerst.
Webflow
- Open Page Settings
- Ga naar SEO tab
- Vul Open Graph fields in
- Upload OG image
Webflow heeft ingebouwde OG support met een visuele preview.
Next.js / React
Gebruik de next/head component:
import Head from 'next/head' <Head> <meta property="og:title" content="Je titel" /> <meta property="og:description" content="Je beschrijving" /> <meta property="og:image" content="https://..." /> </Head>
Open Graph afbeeldingen ontwerpen
De afbeelding is het belangrijkste element. Het bepaalt of mensen op je link klikken.
Studies tonen aan dat posts met afbeelding 2,3x meer clicks krijgen. Maar niet elke afbeelding werkt even goed.
Design best practices
1. Heldere, grote tekst
Gebruik minimaal 60pt font zodat het leesbaar is in kleine thumbnails. Mobile previews zijn vaak nog kleiner.
2. Contrast
Donkere tekst op lichte achtergrond (of omgekeerd). Geen lage contrast combinaties. Test je design in grijswaarden om contrast te checken.
3. Brand consistent
Gebruik je brand kleuren, fonts en logo. Mensen moeten meteen zien dat het van jouw merk komt.
4. Focus op voordeel
“10 SEO Tips” is beter dan alleen “SEO”. Communiceer de waarde direct visueel.
5. Emotioneel aantrekkelijk
Gezichten, kleuren en emotie triggeren hogere clicks. Maar vermijd stock photos die saai of generiek zijn.
6. Safe zones
Houd belangrijke elementen uit de hoeken. Sommige platforms croppen de edges af. Houd een marge van 40-50 pixels aan alle kanten.
7. Test op mobiel
60% van social media gebruik is mobiel. Check of je tekst nog leesbaar is op kleine schermen.
Tools voor OG images
Canva (gratis + pro)
- Templates specifiek voor OG images (1200×630)
- Drag-and-drop editor
- Brand kit voor consistent design
- Enorme library van stock foto’s en elementen
Figma (gratis + pro)
- Professionele design tool
- Community templates beschikbaar
- Plugins voor batch generation
- Perfecte controle over elk detail
Placid.app (betaald)
- Automatische OG image generation
- API voor dynamic images
- Template based
- Integratie met CMS platforms
Bannerbear (betaald)
- Automated social images
- Integrations met CMS platforms
- Dynamic text overlay
- Bulk generation
Cloudinary (freemium)
- Dynamic image generation via URL
- Text overlay met custom fonts
- Automatische optimalisatie
- CDN hosting
Testen en debuggen
Facebook Sharing Debugger
URL: developers.facebook.com/tools/debug/
- Plak je URL
- Klik “Debug”
- Check of alle OG tags correct worden gelezen
- Klik “Scrape Again” als je iets hebt aangepast
Dit tool toont:
- Welke OG tags aanwezig zijn
- Preview van hoe link eruitziet
- Fouten en warnings
- Wanneer de cache vervalt
Let op: Facebook cacht OG data. Als je tags aanpast, moet je de cache handmatig clearen met “Scrape Again”.
LinkedIn Post Inspector
URL: linkedin.com/post-inspector/
Werkt hetzelfde als Facebook Debugger maar specifiek voor LinkedIn. LinkedIn heeft strengere afbeelding requirements, dus test altijd apart.
Twitter Card Validator
URL: cards-dev.twitter.com/validator
Test hoe je link eruitziet op Twitter. Let op: je moet ingelogd zijn op een Twitter account.
Open Graph Check
URL: opengraphcheck.com
Test hoe je link eruitziet op meerdere platforms tegelijk (Facebook, LinkedIn, Twitter, Pinterest, Slack). Handig voor een quick check.
Meta Tags Checker
URL: metatags.io
Visuele preview van OG tags voor alle platforms. Toont ook ontbrekende tags en geeft suggesties.
Veelgemaakte fouten
1. Geen absolute URLs voor afbeeldingen
❌ Fout: og:image = “/images/photo.jpg”
✅ Goed: og:image = “https://jouwesite.nl/images/photo.jpg”
Relatieve URLs werken niet. Social platforms kunnen je afbeelding niet vinden.
2. Afbeelding te klein
Minimum 600×315, ideaal 1200×630. Kleinere afbeeldingen worden soms niet getoond of zien er wazig uit.
3. HTTPS issues
Als je site HTTPS is, moet je OG image URL ook https:// zijn. Mixed content wordt vaak geblokkeerd.
4. Geen fallback afbeelding
Stel een default OG image in voor paginas zonder specifieke afbeelding (homepage logo bijvoorbeeld). Zo heb je altijd een visueel element.
5. Cache niet refreshen
Als je OG tags aanpast, gebruik Facebook Debugger om de cache te clearen. Anders zien mensen de oude preview dagen lang.
6. Te lange titels of descriptions
Facebook kapt af na ~60 karakters voor titel, ~110 voor description. LinkedIn heeft andere limits. Test op alle platforms.
7. Ontbrekende og:url
Zonder og:url kunnen tracking parameters en URL varianten zorgen voor fragmentatie van shares.
8. Verkeerde aspect ratio
Een vierkante afbeelding (1:1) wordt vreemd gecropped in een 1.91:1 frame. Ontwerp specifiek voor OG dimensies.
Open Graph voor verschillende pagina types
Homepage
<meta property="og:type" content="website" /> <meta property="og:title" content="Online Ambition | SEO Bureau voor Lokale Dienstverleners" /> <meta property="og:description" content="Specialisten in lokale SEO. 150+ klanten, gemiddeld 40% meer bezoekers. Vraag je gratis audit aan." /> <meta property="og:image" content="https://site.nl/og-homepage.jpg" />
Blog artikel
<meta property="og:type" content="article" /> <meta property="og:title" content="10 SEO Tips Die Je Rankings Verdubbelen" /> <meta property="og:description" content="Bewezen SEO strategieën voor meer traffic. Van technische optimalisatie tot content marketing." /> <meta property="og:image" content="https://site.nl/og-seo-tips.jpg" /> <meta property="article:published_time" content="2026-02-10T10:00:00Z" /> <meta property="article:author" content="https://site.nl/author/erwin/" />
Product pagina
<meta property="og:type" content="product" /> <meta property="og:title" content="Nike Dri-FIT Hardloop T-shirt Zwart" /> <meta property="og:description" content="Vochtafvoerende hardloop shirt. Nu €34,99. Gratis verzending." /> <meta property="og:image" content="https://shop.nl/products/shirt.jpg" /> <meta property="product:price:amount" content="34.99" /> <meta property="product:price:currency" content="EUR" />
Impact van Open Graph op traffic
Studies tonen aan:
- Links met afbeelding krijgen 2,3x meer clicks dan links zonder
- Custom OG images verhogen CTR met 40-80% vs auto-generated previews
- Facebook posts met OG images krijgen 2x meer engagement
- LinkedIn posts met grote afbeelding krijgen 38% meer clicks
- Afbeeldingen met gezichten verhogen clicks met 28% extra
- Posts met video OG tags krijgen 48% meer shares
Voor content marketing en social media driven sites is Open Graph essentieel. Het is het verschil tussen content die viral gaat en content die onopgemerkt blijft.
Geavanceerde tactieken
Dynamic OG images
Voor sites met veel content kun je OG images dynamisch genereren. Dit kan met tools als Cloudinary of Vercel OG Image.
Voordeel: consistente branding zonder elke afbeelding handmatig te maken. Nadeel: minder creatieve vrijheid.
A/B testing van OG images
Test verschillende afbeeldingen voor dezelfde content. Check welke het beste presteert op shares en clicks.
Variabelen om te testen: kleurschema, tekst vs geen tekst, foto vs illustratie, gezicht vs product.
Seasonal updates
Update je OG images voor seizoenen of events. Kerst, Black Friday, zomer aanbieding. Dit verhoogt relevantie en urgentie.
Multiple OG images
Je kunt meerdere og:image tags toevoegen. Platforms kiezen de beste optie. Dit is handig voor verschillende aspect ratios.
<meta property="og:image" content="https://site.nl/image-16-9.jpg" /> <meta property="og:image" content="https://site.nl/image-1-1.jpg" />
Veelgestelde vragen
Moet ik voor elke pagina unieke OG tags hebben?
Ja, voor belangrijke paginas absoluut. Homepage, product paginas en blog posts moeten allemaal unieke OG tags hebben. Voor minder belangrijke paginas kun je fallback waarden gebruiken.
Hoe vaak update ik mijn OG images?
Update je OG images wanneer je content significant verandert of voor seasonal events. Voor evergreen content hoef je niet constant te updaten, tenzij je branding verandert.
Kan ik animated GIFs gebruiken als OG image?
Technisch wel, maar niet alle platforms ondersteunen dit. Facebook toont vaak alleen het eerste frame. Voor video content gebruik je beter og:video tags.
Wat als ik geen design skills heb?
Gebruik Canva templates. Ze hebben honderden pre-made designs specifiek voor OG images. Pas kleuren en tekst aan en je bent klaar. Geen Photoshop skills nodig.
Waarom toont Facebook nog steeds mijn oude afbeelding?
Facebook cacht OG data voor performance. Gebruik de Facebook Sharing Debugger en klik “Scrape Again” om de cache te clearen. Het kan 24 uur duren voordat alle servers zijn geupdate.
Moet ik ook Twitter Cards implementeren als ik OG tags heb?
Niet persé, Twitter valt terug op OG tags. Maar voor optimale controle en betere analytics is het aan te raden wel Twitter Cards te implementeren.
Checklist voor perfecte Open Graph implementatie
- ✅ og:title ingesteld (max 60 karakters)
- ✅ og:description ingesteld (200-300 karakters)
- ✅ og:image ingesteld (1200×630 pixels)
- ✅ og:url met canonical URL
- ✅ og:type correct (website/article/product)
- ✅ og:site_name toegevoegd
- ✅ og:locale ingesteld (nl_NL)
- ✅ Twitter Card tags toegevoegd
- ✅ Afbeelding URLs zijn absolute (https://…)
- ✅ Getest met Facebook Sharing Debugger
- ✅ Getest met LinkedIn Post Inspector
- ✅ Getest met Twitter Card Validator
- ✅ Fallback image voor paginas zonder specifieke OG image
- ✅ Image dimensions toegevoegd (og:image:width/height)
Hulp nodig met Open Graph?
Open Graph tags zijn relatief simpel, maar een goede implementatie vereist strategie en design skills.
Ik help met:
- Complete OG implementatie op je site
- Design van custom OG images
- Testing en debugging van social previews
- Automatisering van OG image generation
Neem contact op voor advies over social media optimalisatie.
Erwin Verbeek is SEO- en GEO-specialist en oprichter van Online Ambition. Meer over Erwin
