Open Graph tags toevoegen aan je website (HTML)
Open Graph tags zijn onzichtbare labels in de <head> van je pagina die bepalen hoe je link eruitziet als iemand hem deelt op X, LinkedIn, Facebook, WhatsApp, Slack of Discord. Zonder deze tags kiezen platforms zelf iets — meestal een kale, lelijke preview. Zo zet je ze goed neer.
De gratis checker toont je previews voor X, LinkedIn, Facebook, Slack en Discord.
Plaats de tags in de <head>
Open Graph tags horen in de <head> van je HTML-document, vóór de sluitende </head>. Ze werken op elke pagina afzonderlijk: elke URL die gedeeld kan worden verdient eigen tags.
Gebruik minimaal deze vier
og:title (de kop van de kaart), og:description (1-2 zinnen), og:image (de afbeelding, als volledige https-URL) en og:url (de canonieke URL van de pagina). Voeg twitter:card met waarde "summary_large_image" toe zodat X de grote kaart toont.
Zorg dat je afbeelding klopt
Gebruik 1200×630 pixels (verhouding 1,91:1), als JPG of PNG onder de 1 MB. De URL moet absoluut zijn (beginnend met https://) — relatieve paden worden door veel scrapers genegeerd.
Test vóór je deelt
Plak je URL in de MetaPeek-checker en je ziet direct hoe de kaart eruitziet op elk platform, plus wat er ontbreekt. Let op: platforms cachen previews — na een wijziging kan het even duren voordat een eerder gedeelde link ververst.
Codevoorbeeld
<!-- Open Graph -->
<meta property="og:title" content="Jouw pagina-titel" />
<meta property="og:description" content="Korte, pakkende omschrijving (110-160 tekens)." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://jouwsite.nl/pagina" />
<meta property="og:image" content="https://jouwsite.nl/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Jouw sitenaam" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Jouw pagina-titel" />
<meta name="twitter:description" content="Korte, pakkende omschrijving." />
<meta name="twitter:image" content="https://jouwsite.nl/og-image.png" />Veelgemaakte fouten
- Relatieve afbeelding-URLog:image="/img/foto.png" werkt niet betrouwbaar. Gebruik altijd de volledige URL inclusief https:// en domein.
- Titel of omschrijving te langPlatforms kappen af rond 60-70 tekens (titel) en 150-200 tekens (omschrijving). Wat je afgekapt niet wil zien, moet je niet schrijven.
- Platform-cache vergetenFacebook, LinkedIn en X onthouden een eerder gescrapete preview. Zie je een oude versie? De wijziging staat er waarschijnlijk wel, maar de cache nog niet.
Veelgestelde vragen
Wat is het verschil tussen <title> en og:title?
De <title> is voor browsertabblad en Google; og:title is specifiek voor de deelkaart op social media. Zonder og:title vallen de meeste platforms terug op de <title>.
Heb ik twitter:-tags nodig naast og:-tags?
X leest og:-tags als fallback. Alleen twitter:card is echt nodig om de grote kaart (summary_large_image) af te dwingen; de rest mag je van og: laten erven.
Hoe snel zien platforms mijn wijziging?
Nieuwe links: direct. Eerder gedeelde links: pas als de platform-cache ververst — dat kan uren tot dagen duren.
Plak je URL en zie binnen twee seconden of alles klopt — op elk platform.