Wanneer je een link plakt in een bericht, een tweet, een LinkedIn-post of een Slack-kanaal, haalt het platform een voorbeeldkaart op — een grote afbeelding, een titel, een fragment. Die afbeelding is de Open Graph (OG) afbeelding, en ze doet meer werk dan je kop. In een snel scrollende feed is de afbeelding wat de duim stopt. Een lege of kapotte preview oogt als weinig moeite en wordt overgeslagen.
Zo maak je er een die de klik verdient, op het juiste formaat, met tekst die echt leesbaar is.
Het formaat: 1200×630
De standaard OG-afbeelding is 1200×630 pixels, een verhouding van 1.91:1. Facebook, LinkedIn, Slack, Discord en de meeste linkpreview-systemen zijn hierop gebouwd. Krijg je dit goed, dan zit je bijna overal goed.
Afhankelijk van waar de link landt komen een paar verwante formaten voorbij:
| Platform / gebruik | Formaat | Verhouding |
|---|---|---|
| Open Graph (standaard) | 1200×630 | 1.91:1 |
| Twitter/X grote kaart | 1200×628 | ~1.91:1 |
| YouTube-thumbnail | 1280×720 | 16:9 |
| Vierkant (feeds/IG) | 1080×1080 | 1:1 |
| Story / verticaal | 1080×1920 | 9:16 |
Voor een blogpost heb je die niet allemaal nodig — 1200×630 is het werkpaard. Maar als je ook een videothumbnail of een vierkante socialpost maakt, is het handig om de juiste vorm te genereren in plaats van één afbeelding lelijk bij te snijden.
Tekstregels: leesbaar op thumbnailformaat
De fout die OG-afbeeldingen om zeep helpt is ze behandelen als een poster die je op volledig scherm bekijkt. Dat doe je niet. De meeste mensen zien de kaart op misschien een derde van het echte formaat, op een telefoon, midden in het scrollen. Ontwerp voor dat.
- Grote tekst, weinig woorden. Een korte titel — vijf tot acht woorden — die leesbaar blijft als de kaart krimpt. Moet je op volledig formaat al turen, dan is het onleesbaar in de feed.
- Sterk contrast. Lichte tekst op een donkere of verzadigde achtergrond, of andersom. Tekst op een drukke foto zonder onderlegger verdwijnt.
- Houd het belangrijke gecentreerd. Verschillende platforms snijden de randen net even anders bij. Houd tekst en logo's weg van de buitenmarges zodat er niets wordt afgekapt.
- Eén idee per afbeelding. De OG-afbeelding is een haakje, geen samenvatting. Titel, misschien een ondertitel, klaar.
Achtergronden waardoor tekst opspringt
Een egale gradiënt is de betrouwbare keuze. Het geeft tekst iets schoons om op te staan, oogt modern en vecht nooit met de woorden zoals een drukke foto dat doet. Een gradiënt van donker naar iets donkerder met lichte tekst is bijna waterdicht.
De OG Image-tool is precies hieromheen gebouwd: kies een formaatpreset (OG 1200×630, Twitter, YouTube, vierkant of story), kies een gradiëntachtergrond en voeg je titel en ondertitel toe. Je krijgt een deelkaart die op elk formaat duidelijk leesbaar is, zonder een volledige ontwerp-app te openen.
De HTML die ervoor zorgt dat hij verschijnt
De afbeelding maken is het halve werk. Het platform moet weten waar het hem kan vinden. Voeg deze tags toe aan de <head> van je pagina:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
De regel twitter:card op summary_large_image is wat je de grote kaart op X geeft in plaats van een minithumbnail. Absolute URL's (met https://) zijn belangrijk — relatieve paden lossen vaak niet op wanneer een scraper je pagina ophaalt.
Test het nadat je hebt gepubliceerd. Plak je URL in de linkpreview-debugger van een platform (Facebook Sharing Debugger, LinkedIn Post Inspector) om te bevestigen dat de afbeelding laadt en om een gecachte oude versie te wissen. Platforms cachen previews agressief, dus als je de afbeelding hebt bijgewerkt en nog steeds de oude ziet, is de re-scrape-knop van de debugger de oplossing.
Maken, niet uploaden
Het geheel draait in je browser — de afbeelding wordt lokaal met Canvas samengesteld en er wordt niets naar een server geüpload. Het is gratis, geen aanmelding, geen watermerk over je deelkaart gestempeld, en het werkt offline na het eerste bezoek. Genereer de 1200×630, koppel de metatags, laat het één keer door een debugger lopen, en je links gaan hun gewicht dragen.