# Open Graph-tags: de complete gids voor deelvoorbeelden

[Canonical HTML page](https://gradiently.design/nl/guide/open-graph-tags)

Elke gedeelde link wordt een klein affiche van je pagina, gebouwd uit een paar metatags. Zet ze goed en het voorbeeld ziet er ontworpen uit; mis er één en platforms gokken. Hier is de complete set, met markup om te kopiëren.

## The short version

- Open Graph-tags zijn metatags in de head van een pagina die sociale platforms en berichtenapps vertellen welke titel, beschrijving en afbeelding ze tonen als de link wordt gedeeld.
- Het Open Graph-protocol beschouwt og:title, og:type, og:image en og:url als de verplichte basistags, en og:description en og:site_name worden sterk aangeraden.
- Een og:image van 1200×630 pixels, aangeroepen met een absolute https-URL, werkt goed op Facebook, LinkedIn, X, Slack, iMessage en de meeste andere apps.
- X leest twitter:card om de opmaak van het voorbeeld te kiezen en valt voor titel, beschrijving en afbeelding terug op de Open Graph-tags als zijn eigen tags ontbreken.
- Platforms bewaren voorbeelden in de cache, dus na het aanpassen van tags moet je de URL opnieuw laten ophalen in een debugtool zoals Facebooks Sharing Debugger of LinkedIns Post Inspector.

**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.

```html
<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>
```

Een complete, werkende set. X leent de titel, beschrijving en afbeelding van de Open Graph-tags hierboven.

| Tag | Wat het doet | Tips |
| --- | --- | --- |
| `og:title` | De vetgedrukte kop van het voorbeeld | Onder de 60 tekens; de sitenaam hoeft er niet in |
| `og:description` | Een of twee regels onder de titel | Rond 110 tot 160 tekens; sommige apps verbergen hem |
| `og:image` | De afbeelding van het voorbeeld | Absolute https-URL, 1200×630 |
| `og:url` | Het canonieke adres van de pagina | Gelijk aan je canonical link, zonder trackingparameters |
| `og:type` | Wat voor pagina het is | `website` voor de meeste pagina’s, `article` voor berichten |
| `og:site_name` | Je merk, klein weergegeven | Houd het op elke pagina hetzelfde |
| `og:image:alt` | Een beschrijving van de afbeelding | Wordt op sommige platforms voorgelezen door schermlezers |

De tags die er in de praktijk toe doen. De volledige lijst staat op de eigen site van het protocol, ogp.me.

## 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](https://gradiently.design/nl/guide/open-graph-image-size). 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.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-linkafbeelding 1200×627: 1200 × 627
- Vierkante uitsnede 1200×1200: 1200 × 1200

De vorm van het grote voorbeeld en het vierkant waarop sommige chatapps en de X-samenvattingskaart bijsnijden. Zet de boodschap in het midden zodat ze beide overleeft.

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](https://gradiently.design/nl/guide/png-vs-jpeg) legt de keuze uit, en [afbeeldingen optimaliseren voor het web](https://gradiently.design/nl/guide/lighthouse-image-performance) behandelt compressie.

Een brede deelafbeelding van 1200 bij 630 met een restaurantnaam, een kop over een lentemenu en een reserveerregel op een zacht verloop

Een deelafbeelding gebouwd voor het voorbeeld: korte woorden, gecentreerd, groot genoeg om te lezen op het formaat dat een feed toont.

> **De afbeelding moet bereikbaar zijn** Platforms halen `og:image` op vanaf hun eigen servers. Een relatief pad, een pagina achter een login, een firewall die onbekende bots blokkeert of een verlopen ondertekende URL geven allemaal een leeg voorbeeld.

## 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.

| Tag | Waarden | Opmerkingen |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` of `summary` | Grote afbeelding, of een klein vierkant miniatuur |
| `twitter:site` | `@jouwmerk` | Het account van de site |
| `twitter:creator` | `@auteur` | De auteur van een artikel |
| `twitter:image:alt` | Tekst | Gebruik dit als de afbeelding afwijkt van de og-versie |

Voeg alleen deze toe en laat Open Graph de rest aanleveren.

## 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.

```html
<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" />
```

Datums gebruiken ISO 8601. Houd modified_time eerlijk; pas hem alleen aan als de inhoud echt verandert.

## 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.

```ts
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' },
}
```

Controleer de documentatie van jouw frameworkversie, want metadata-API’s veranderen tussen releases. Voor afbeeldingen die per pagina worden gegenereerd, zie [dynamische OG-afbeeldingen](https://gradiently.design/nl/guide/dynamic-og-images).

## Deelvoorbeelden testen en repareren

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. **Controleer de afbeeldings-URL** Plak het og:image-adres in een privévenster. Het moet laden zonder login.
3. **Haal opnieuw op** Laat de URL door Facebooks Sharing Debugger en [LinkedIns Post Inspector](https://www.linkedin.com/post-inspector/) lopen om hun cache te legen.
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. **Deel het privé** Stuur de link naar jezelf in Slack of een berichtenapp om een echt voorbeeld te zien.

### Leeg of fout voorbeeld

- Tags toegevoegd door JavaScript aan de clientkant
- Relatief og:image-pad
- og:url wijst naar een andere pagina
- Piepkleine of vreemd gevormde afbeelding
- Tags gewijzigd, voorbeeld niet

### Oplossing

- Render de tags op de server
- Gebruik een volledige https-URL
- Laat og:url overeenkomen met het canonieke adres
- Exporteer op 1200×630
- Haal opnieuw op, of hernoem de afbeelding

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](https://gradiently.design/nl/guide/social-media-image-sizes).

## FAQ

### Wat zijn Open Graph-tags?

Metatags in de head van een pagina, zoals og:title en og:image, die sociale platforms en berichtenapps vertellen wat ze tonen als de link wordt gedeeld.

### Welke Open Graph-tags zijn verplicht?

Het protocol noemt og:title, og:type, og:image en og:url als basistags. Voeg og:description en og:site_name toe voor een compleet voorbeeld.

### Welk formaat moet een og:image hebben?

1200×630 pixels werkt op Facebook, LinkedIn, X en de meeste chatapps. Gebruik een absolute https-URL en houd de belangrijkste inhoud in het midden.

### Heb ik Twitter-cardtags nodig als ik Open Graph-tags heb?

Voeg `twitter:card` toe, meestal op `summary_large_image`. X valt voor titel, beschrijving en afbeelding terug op Open Graph.

### Waarom wordt mijn linkvoorbeeld niet bijgewerkt?

Platforms bewaren voorbeelden in de cache. Haal de URL opnieuw op in Facebooks Sharing Debugger of LinkedIns Post Inspector, of hernoem het afbeeldingsbestand.

### Moet ik property of name gebruiken voor og-tags?

Open Graph-tags gebruiken `property` en Twitter-tags gebruiken `name`. De meeste parsers accepteren beide, maar de conventie volgen voorkomt verrassingen.