Open Graph Meta Tag Generator

Open Graph-tags zijn kleine stukjes HTML die bepalen hoe je pagina eruitziet wanneer iemand deze deelt op Facebook, LinkedIn, Slack, Discord of X (Twitter). Vul hieronder een titel, beschrijving, URL, afbeelding en een paar opties in, bekijk hoe het voorbeeld van de deelkaart direct wordt bijgewerkt, en kopieer de gegenereerde <meta>-tags rechtstreeks naar de <head> van je pagina. Alles gebeurt in je browser — er wordt niets naar een server verzonden.

Wat is deze tool?

Open Graph is een protocol, oorspronkelijk gemaakt door Facebook, waarmee elke webpagina zichzelf kan beschrijven met een kleine set <meta property="og:...">-tags in de <head> van de HTML. Wanneer iemand jouw link plakt in een sociale app, chatclient of berichtentool, leest die app deze tags om de voorbeeldkaart op te bouwen — titel, beschrijving en miniatuurafbeelding — in plaats van te gokken op basis van de paginainhoud.

Twitter (X) gebruikt een verwante maar aparte set tags, <meta name="twitter:...">, om specifiek te bepalen hoe een linkvoorbeeld eruitziet op zijn platform. De meeste sites stellen beide in: Open Graph-tags voor brede compatibiliteit, en Twitter Card-tags om de X-preview te verfijnen (bijvoorbeeld door te kiezen voor een grote afbeeldingskaart in plaats van een kleine samenvattingskaart).

Zonder deze tags toont een gedeelde link ofwel helemaal geen voorbeeld, of het platform probeert een titel en afbeelding te raden op basis van de ruwe inhoud van je pagina — en kiest daarbij vaak de verkeerde kop, een willekeurige inline afbeelding, of niets. Door og:title, og:description en og:image expliciet in te stellen, heb je volledige controle over hoe je content wordt gepresenteerd voordat iemand erop klikt.

Waarom gebruiken?

Live voorbeeld — zie precies hoe de deelkaart eruit zal zien terwijl je typt, voordat je iets publiceert.
Genereert in één keer zowel Open Graph-tags (og:title, og:description, og:image, og:url, og:type, og:site_name) als Twitter Card-tags.
Bevat de velden die platforms daadwerkelijk lezen: titel, beschrijving, canonieke URL, afbeelding, sitenaam, contenttype en Twitter Card-stijl.
Werkt volledig client-side — je titel, beschrijving en URL's verlaten nooit je browser.
Gratis, geen inloggen, geen limiet — kopieer de output en plak deze in je HTML.

Hoe te gebruiken

Voer de titel van je pagina en een korte beschrijving in (streef naar minder dan ~60 tekens voor de titel, ~155–160 voor de beschrijving).
Voer de canonieke URL van de pagina in en de absolute URL van de voorbeeldafbeelding (URL's van afbeeldingen moeten volledig gekwalificeerd zijn, bijv. https://example.com/image.jpg, geen relatief pad).
Stel optioneel de sitenaam in, kies een og:type (website, article, product, profile, video, music) en kies een Twitter Card-type (summary of summary_large_image).
Controleer de live voorbeeldkaart om te bevestigen dat titel, beschrijving en afbeelding goed samen ogen.
Klik op "Kopiëren" en plak de gegenereerde <meta>-tags in de <head> van je pagina, vóór de afsluitende </head>-tag.

Voorbeeld

Invoer

Titel: "10 gratis ontwikkelaarstools die je écht gaat gebruiken"
Beschrijving: "Een zorgvuldig samengestelde lijst met browsergebaseerde tools voor JSON, regex, UUID's en meer — geen installatie nodig."
URL: https://example.com/blog/dev-tools
Afbeelding: https://example.com/images/dev-tools-cover.jpg

Uitvoer

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Alleen de velden die je invult worden meegenomen, dus als je de sitenaam leeg laat, wordt og:site_name simpelweg weggelaten uit de output.

Veelgemaakte fouten om te vermijden

og:image volledig ontbrekend — zonder deze tonen de meeste platforms ofwel geen voorbeeldafbeelding, ofwel vallen ze terug op een willekeurige afbeelding die van de pagina is gehaald, wat er meestal kapot en onprofessioneel uitziet.
Een relatief afbeeldingspad gebruiken zoals /images/cover.jpg in plaats van een volledige URL zoals https://example.com/images/cover.jpg — sociale crawlers kunnen relatieve paden over het algemeen niet oplossen.
Verkeerde beeldverhouding van de afbeelding — een vierkante of staande afbeelding wordt ongemakkelijk bijgesneden wanneer platforms deze forceren in het liggende 1,91:1-kader; ontwerp je deelafbeelding altijd op of dicht bij 1200×630.
Titels of beschrijvingen die worden afgekapt — houd og:title onder ~60 tekens en og:description onder ~155–160 tekens, zodat ze op de meeste platforms niet met een ellips worden afgekapt.
Vergeten gecachte previews bij te werken — na het wijzigen van og-tags op een live pagina kan de oude preview blijven hangen in de cache van Facebook of LinkedIn totdat je handmatig een nieuwe scan afdwingt met hun debugtools.

Waar elke tag wordt gebruikt

og:title, og:description en og:image zijn de drie tags die vrijwel elk platform leest om een preview op te bouwen. og:url vertelt crawlers met welke canonieke link de preview moet worden geassocieerd, wat van belang is als dezelfde content via meerdere URL's bereikbaar is. og:site_name toont op sommige platforms, zoals Facebook, een klein label (zoals de naam van de publicatie of het merk) boven de titel.

og:type verandert wat voor soort object de pagina vertegenwoordigt voor crawlers die het rijkere objectmodel van Open Graph ondersteunen — article schakelt bijvoorbeeld og:article:published_time en og:article:author in op platforms die deze lezen, hoewel de meeste sociale previews deze extra velden negeren en alleen het basistrio titel/beschrijving/afbeelding gebruiken.

twitter:card bepaalt de lay-out specifiek op X: summary toont een kleine vierkante miniatuur naast de tekst, terwijl summary_large_image een afbeelding op volledige breedte boven de tekst toont — de laatste is vrijwel altijd de betere keuze voor content met een betekenisvolle omslagafbeelding.

Veelgestelde vragen

Welke afmeting moet mijn og:image hebben?

1200×630px is de aanbevolen afmeting — groot genoeg voor schermen met hoge pixeldichtheid en past bij de beeldverhouding van ongeveer 1,91:1 waarnaar Facebook, LinkedIn en X de afbeelding bijsnijden. Houd het bestand onder 5–8MB, gebruik JPG of PNG, en zorg dat de URL van de afbeelding een volledige absolute URL is, geen relatief pad — de meeste crawlers kunnen relatieve afbeeldingspaden niet correct oplossen.

Waarom verschijnt mijn voorbeeld niet als ik de link deel?

De meest voorkomende oorzaken zijn: ontbrekende og:image, een relatieve in plaats van absolute URL van de afbeelding, de crawler wordt geblokkeerd door robots.txt, of het platform toont een gecachte versie van een oude preview. Zowel Facebook als LinkedIn cachen gescande previews agressief — gebruik Facebook's Sharing Debugger of LinkedIn's Post Inspector om een nieuwe scan af te dwingen nadat je je tags hebt bijgewerkt.

Wat is het verschil tussen og:-tags en twitter:-tags?

og:-tags (og:title, og:description, og:image, enz.) zijn de Open Graph-standaard, gelezen door Facebook, LinkedIn, Slack, Discord, WhatsApp en de meeste andere platforms. twitter:-tags zijn het eigen formaat van Twitter/X. Als twitter:title of twitter:image ontbreken, valt X automatisch terug op de bijbehorende og:-tag — maar door beide expliciet in te stellen krijg je meer controle, waaronder de mogelijkheid om summary_large_image te kiezen voor een grote voorbeeldafbeelding.

Welke og:type moet ik gebruiken?

"website" is de veilige standaardwaarde voor de meeste pagina's, inclusief homepages en algemene content. Gebruik "article" voor blogposts en nieuwsartikelen (dit ontgrendelt extra, artikelspecifieke tags zoals publicatietijd), "product" voor e-commercepagina's en "profile" voor persoonlijke of gebruikersprofielpagina's. Het type beïnvloedt vooral welke extra Open Graph-eigenschappen geldig zijn, niet hoe de basis-voorbeeldkaart eruitziet.

Slaat deze tool mijn gegevens ergens op of verstuurt hij ze?

Nee. Alle generatie gebeurt lokaal in je browser met gewone JavaScript. Niets van wat je typt wordt verzonden, gelogd of opgeslagen — het sluiten van het tabblad wist alles.