Open Graph visuals: afmetingen, tips en codevoorbeelden
Open Graph-afbeeldingen bepalen wat er verschijnt wanneer iemand uw pagina deelt op Facebook, Twitter of LinkedIn. De verkeerde afbeelding, of helemaal geen afbeelding, verlaagt het doorklikpercentage voordat bezoekers uw site bereiken.
Deze gids behandelt optimale afmetingen, ontwerpprincipes, HTML-implementatie en testtools — alles wat u nodig heeft om sociale previews op elk platform goed te krijgen.
Inhoudsopgave
Wat zijn Open Graph-afbeeldingen en waarom ze belangrijk zijn
Open Graph is een protocol van Facebook waarmee u bepaalt hoe uw webpagina’s verschijnen bij delen op sociale netwerken. De og:image meta-tag geeft aan welke afbeelding als preview wordt gebruikt.
Wanneer iemand een link deelt op Facebook, Twitter of LinkedIn, haalt het platform de Open Graph-metadata op en maakt een previewkaart. Die kaart — met afbeelding, titel en beschrijving — is vaak het enige wat iemand ziet voordat hij klikt.
Een goed ontworpen Open Graph-afbeelding verhoogt het doorklikpercentage aanzienlijk. Een ontbrekende of verkeerd formaat afbeelding leidt tot een kapotte preview, bijgesneden thumbnail of een generieke placeholder die onprofessioneel oogt.
Doorklikpercentage
Pagina’s met een correct formaat en hoog contrast OG-afbeelding presteren beter dan pagina’s zonder afbeelding of met een lage kwaliteit fallback.
Meer klikken per deelactie
Merkherkenning
Een consistente visuele identiteit bij elke gedeelde link bouwt vertrouwen en herkenning op bij uw publiek voordat ze de pagina bezoeken.
Consistent op alle netwerken
SEO-signaal
Sociale betrokkenheid door aantrekkelijke previews genereert backlinks en verkeerssignalen die organische zoekresultaten versterken.
Indirecte rankingvoordeel
Platformspecifieke afbeeldingeisen
Elk sociaal platform heeft eigen aanbevolen afmetingen, beeldverhoudingen en maximale bestandsgrootte. Dit voorkomt bijsnijden, vervorming en fallback placeholders.
| Platform | Aanbevolen formaat | Beeldverhouding | Maximale bestandsgrootte | Formaat |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Universeel veilig formaat: 1200 × 630 pixels
Een afbeelding van 1200 × 630 px met een verhouding van 1,91:1 werkt op Facebook, LinkedIn, WhatsApp, Slack en de meeste andere platforms. Voor Twitter wordt een 16:9 uitsnede gebruikt, dus houd belangrijke inhoud gecentreerd om bijsnijden te voorkomen.
Ontwerpprincipes voor effectieve Open Graph-afbeeldingen
De afbeelding verschijnt klein in sociale feeds. Ontwerp eerst voor de thumbnail, niet voor de volledige grootte.
Houd het belangrijkste visuele element — uw logo, een sterke kop of illustratie — binnen het centrale 80% van de afbeelding. Platforms snijden vaak de randen af. Alles dicht bij de rand kan worden afgesneden.
Hoog contrast
Gebruik sterk contrast tussen tekst, voorgrond en achtergrond. Afbeeldingen met laag contrast vallen weg in drukke sociale feeds naast opvallende concurrenten.
Leesbaar op elke grootte
Typografie duidelijkheid
Als uw afbeelding tekst bevat, gebruik dan grote, vetgedrukte letters — minimaal 36px equivalent — en vermijd meer dan twee regels. Kleinere tekst wordt onleesbaar op thumbnailformaat.
Houd het klein leesbaar
Merkconsistentie
Voeg uw logo of merk-kleurenpalet toe aan elke OG-afbeelding. Elke gedeelde post is een merkcontact, ook als er niet op geklikt wordt.
Elke share = merkcontact
Het juiste afbeeldingsformaat kiezen
Gebruik JPEG voor foto’s en PNG voor afbeeldingen met tekst, logo’s of transparantie. WebP wordt steeds meer ondersteund, maar is nog niet universeel voor alle social crawlers.
| Formaat | Beste voor | Sociale ondersteuning | Typische bestandsgrootte | Aanbeveling |
|---|---|---|---|---|
| JPEG | Foto’s, verlopen | Universeel | 60 – 150 KB | Standaard voor foto’s |
| PNG | Tekst, logo’s, transparantie | Universeel | 100 – 300 KB | Standaard voor graphics |
| WebP | Beide, kleinere bestanden | Twitter, Slack (niet allemaal) | 40 – 120 KB | Alleen aanvullend |
Streef naar 100–200 KB voor uw OG-afbeelding. Kleinere bestanden zijn beter, maar vermijd te sterke compressie waardoor de afbeelding pixelig wordt in sociale feeds. WhatsApp hanteert een strikte limiet van 300 KB — als WhatsApp delen belangrijk is, houd dan alle OG-afbeeldingen onder deze limiet.
Voor meer informatie over afbeeldingsformaten en afwegingen, zie de gids voor websitebeeldoptimalisatie . Voor het converteren van bestaande afbeeldingen, de JPG naar WebP gids behandelt de dagelijkse workflow.
HTML-implementatie en meta-tags
Plaats Open Graph meta-tags binnen het <head>-element van uw HTML. De og:image-tag moet een absolute URL gebruiken — relatieve paden worden niet ondersteund door social crawlers.
De minimaal vereiste tags zijn og:title, og:description, og:image en og:url. De twitter:card-tag activeert het grote afbeeldingskaartformaat van Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Specificeer altijd og:image:width en og:image:height. Zonder deze moeten platforms de afbeelding eerst ophalen en inspecteren, wat de weergave vertraagt en de kans op een fallback placeholder vergroot.
Als u Blazor gebruikt, dan Blazor SEO metadata component verwerkt automatisch alle Open Graph-tags met cultuurgevoelige URL’s.
Testen en debuggen van Open Graph-afbeeldingen
Sociale platforms cachen Open Graph-metadata agressief. Gebruik na het bijwerken van tags of afbeeldingen de officiële debugtools om een nieuwe crawl af te dwingen en te controleren of de preview correct is voordat u deelt.
Facebook Sharing Debugger
Voer uw URL in op developers.facebook.com/tools/debug om nieuwe metadata op te halen, te zien welke afbeelding Facebook selecteerde en eventuele validatiewaarschuwingen of fouten te debuggen.
Cache vernieuwen forceren
Twitter Card Validator
Gebruik cards-dev.twitter.com/validator om precies te zien hoe uw Twitter-kaart eruitziet. Klik op 'Preview card' om de thumbnail, titel en beschrijving in het kaartformaat te bekijken.
Preview vóór plaatsen
LinkedIn Post Inspector
De post inspector van LinkedIn op linkedin.com/post-inspector vernieuwt de cache voor uw URL en toont hoe uw post preview eruitziet met de huidige metadata.
LinkedIn-cache vernieuwen
Veelvoorkomende fouten en oplossingen
De meeste problemen met Open Graph-afbeeldingen zijn terugkerende fouten. Weten waar u op moet letten bespaart u debugtijd.
- Relatieve URL’s. Social crawlers kunnen geen relatieve paden verwerken. De waarde van og:image moet een volledige absolute URL zijn inclusief protocol en domein (https://uwdomein.com/pad/afbeelding.jpg).
- Ontbrekende breedte- en hoogte-tags. Zonder og:image:width en og:image:height moeten platforms de afbeelding downloaden en inspecteren voordat ze een preview maken. Voeg beide toe om deze extra stap te voorkomen.
- Afbeeldingen achter authenticatie. Crawlers kunnen geen afbeeldingen bereiken die login vereisen of geblokkeerd zijn door robots.txt. De OG-afbeelding moet publiek toegankelijk zijn zonder authenticatie.
- Verkeerde beeldverhouding. Een afbeelding die sterk afwijkt van 1,91:1 wordt bijgesneden of met storende zwarte balken weergegeven. Test altijd de juiste verhouding voor publicatie.
- Verouderde platformcache. Het bijwerken van een afbeelding zonder de bestandsnaam te wijzigen of een querystring toe te voegen, zorgt ervoor dat platforms de oude cacheversie tonen. Wijzig de bestandsnaam of gebruik de debugger om te verversen.
Automatiseren van Open Graph-afbeelding generatie
Voor kleine websites en blogs is één statische OG-afbeelding per pagina de eenvoudigste en betrouwbaarste methode. Voor grotere publicaties of apps waar elke pagina een unieke preview nodig heeft, is dynamische generatie praktisch.
Dynamische OG-afbeelding generatie maakt een unieke afbeelding op aanvraag of tijdens het bouwen, gebaseerd op titel, beschrijving of andere inhoud. Zo krijgt elke pagina een unieke, merkgebonden preview zonder handmatige creatie.
Wanneer automatiseren
Automatiseer als u veel pagina’s heeft die elk een unieke afbeelding nodig hebben, als inhoud vaak verandert, of als handmatige creatie niet schaalbaar is.
Grote hoeveelheden of dynamische inhoud
Wanneer statische afbeeldingen gebruiken
Voor de meeste pagina’s — landingspagina’s, handleidingen en evergreen artikelen — presteert een zorgvuldig gemaakte statische afbeelding beter qua kwaliteit en merkconsistentie dan een gegenereerde.
Kwaliteit eerst aanpak
Populaire tools voor dynamische generatie zijn onder andere Cloudinary (transformaties via URL-parameters), Vercel OG (rendert React/HTML naar afbeelding aan de edge) en Puppeteer of Playwright screenshot pipelines voor elke tech stack.