Open Graph-tags: de complete gids voor deelvoorbeelden

Open Graph-tags zijn <meta>-tags in de <head> van een pagina die bepalen hoe die eruitziet als je haar deelt: de titel, de korte beschrijving, de afbeelding en de link. Facebook bedacht het protocol, en tegenwoordig lezen LinkedIn, X, Slack, Discord, WhatsApp, iMessage en de meeste andere apps het. Vier tags vormen de kern, og:title, og:type, og:image en og:url, en met een beschrijving, een afbeeldingsformaat en een Twitter-cardtag dek je bijna elk platform af.

De Open Graph-tags die elke pagina nodig heeft

Plak dit in de head van een pagina en vervang de waarden. Elke tag gebruikt property, niet name, en elke URL is absoluut.

<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>

De og:image: formaat en bestandstype

De afbeelding is wat mensen echt opmerken. Gebruik 1200×630 pixels, een verhouding van ongeveer 1,91:1, het formaat dat platforms verwachten voor grote voorbeelden en dat staat in Open Graph-afbeeldingsformaat. Houd belangrijke woorden en het logo uit de buurt van de randen, want sommige apps snijden bij tot een vierkant of ronden de hoeken af.

Sla het op als PNG wanneer het vooral tekst en verloop is, of als hoogwaardige JPEG voor foto’s, en houd het bestand klein, het liefst een paar honderd kilobyte, want platforms hanteren eigen limieten en grote bestanden laden traag in feeds. PNG of JPG legt de keuze uit, en afbeeldingen optimaliseren voor het web behandelt compressie.

Twitter-cardtags voor X

X gebruikt eigen twitter:-tags, geschreven met name in plaats van property. Degene die telt is twitter:card. Als twitter:title, twitter:description of twitter:image ontbreken, valt X terug op de overeenkomstige Open Graph-tags, dus je hoeft ze zelden te dupliceren.

Open Graph-tags voor artikelen

Blogberichten en nieuwspagina’s kunnen meer over zichzelf zeggen met og:type op article en een paar extra eigenschappen. Sommige apps tonen de datum of de auteur, en ze helpen platforms de pagina te begrijpen.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />

Open Graph-tags instellen in een framework

De meeste frameworks genereren deze tags uit gegevens. In Next.js exporteer je een metadata-object vanuit de pagina of layout en schrijft het framework de tags voor je. Stel eenmalig een metadataBase in zodat relatieve afbeeldingspaden absoluut worden.

export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}

Deelvoorbeelden testen en repareren

1. 1

   Bekijk de bron

   Open de paginabron, niet de inspector, en controleer dat de tags in de HTML van de server staan. Veel crawlers voeren geen JavaScript uit.

2. 2

   Controleer de afbeeldings-URL

   Plak het og:image-adres in een privévenster. Het moet laden zonder login.

3. 3

   Haal opnieuw op

   Laat de URL door Facebooks Sharing Debugger en LinkedIns Post Inspector lopen om hun cache te legen.

4. 4

   Geef de afbeelding een versie

   Blijft een oude afbeelding hangen, wijzig dan de bestandsnaam of voeg een querystring toe zoals ?v=2 en haal opnieuw op.

5. 5

   Deel het privé

   Stuur de link naar jezelf in Slack of een berichtenapp om een echt voorbeeld te zien.

De tags zijn het makkelijke deel; de afbeelding is het ontwerpwerk, en die moet op miniatuurformaat leesbaar zijn. In Gradiently is het linkvoorbeeld een van de ingebouwde formaten op 1200×630, houdt de Mark zijn rustigste vlak achter de woorden en kan de Designer de deelafbeelding voor een pagina maken uit één zin, en daarna de bijpassende berichtformaten voor elk platform.