Open Graph-preview
Zie hoe een URL eruit zal zien wanneer gedeeld op Facebook, Twitter, LinkedIn of WhatsApp. Live previews uit je meta tags.
Wat is Open Graph?
Open Graph is het protocol dat Facebook in 2010 publiceerde zodat websites gestructureerde metadata over een pagina kunnen aangeven — titel, beschrijving, afbeelding, type, canonieke URL — zodat links die op sociale platforms worden gedeeld als rijke kaarten worden weergegeven in plaats van als kale URLs. De meeste platforms verwerken het inmiddels: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. X/Twitter heeft een eigen twitter:*-namespace, maar valt terug op Open Graph als de Twitter-tags ontbreken, dus één set og:-tags dekt het grootste deel van het ecosysteem.
Hoe gebruik je de preview
Plak een URL om de bestaande tags op te halen, of vul de vier kernvelden handmatig in om een kaart te ontwerpen voordat je publiceert. De voorvertoning wordt live bijgewerkt en benadert hoe Facebook, LinkedIn en Slack de kaart weergeven. Let op de afbeelding: alles smaller dan 1200px of met een sterk afwijkende verhouding wordt bijgesneden of verkleind. Als de kaart goed staat, kopieer je het fragment onderaan en plak je het in de <head> van je pagina.
Waarom je deelafbeelding niet wordt bijgewerkt
Facebook, LinkedIn en de meeste andere platforms cachen gescrapete metadata agressief — soms dagenlang. Zodra een URL is gedeeld, ververst alleen het wijzigen van og:image de kaart meestal niet. De oplossingen zijn: (1) gebruik de Sharing Debugger van Facebook om een hernieuwde scrape af te dwingen, (2) verander de bestandsnaam van de afbeelding (card-v2.png) zodat de gecachte versie ongeldig wordt, of (3) publiceer op een nieuwe URL. Plan dit in je launch-checklist in plaats van het onder tijdsdruk te debuggen.
Aanbevolen afbeeldingsformaten
| Tag | Doel | Tip |
|---|---|---|
og:title | Houd het onder 60 tekens om afkapping te voorkomen. | Kop die op de kaart wordt getoond. |
og:description | 110-200 tekens werkt goed op de meeste platforms. | Ondertitel / samenvattende regel. |
og:image | 1200×630 PNG of JPEG via HTTPS, < 5 MB. | Kaartafbeelding. |
og:url | Gebruik de canonieke URL, niet die met tracking-tags. | Canonieke URL waar de share naar verwijst. |
twitter:card | summary_large_image komt overeen met de stijl van de OG-kaart. | Type Twitter-kaart. |
Veelgestelde vragen
Heb ik zowel Open Graph- als Twitter-kaart-tags nodig?
twitter:*-tags ontbreken, valt X/Twitter terug op og:*-tags. De Twitter-tags toevoegen is alleen nodig wanneer je op X een andere afbeelding of tekst wilt dan op Facebook/LinkedIn. Voor de meeste pagina's volstaat een nette OG-blok.Wat is het juiste afbeeldingsformaat?
Waarom ziet de voorvertoning er niet exact uit als de kaart van Facebook?
Haalt de tool URLs op via een server?
Kan ik een video als og:image gebruiken?
og:video, samen met een statisch og:image als fallback. De meeste platforms tonen op de kaart nog steeds het stilstaande beeld en spelen de video pas af bij een klik.Wat doet og:type?
website, article, book, profile, enzovoort. Facebook gebruikte vroeger verschillende layouts per type; tegenwoordig beïnvloedt het vooral discovery-features. Zet hem op article voor blogposts en op website voor de rest, en je zit goed.