Dynamische OG-afbeeldingen: linkvoorbeelden automatisch genereren

Een dynamische OG-afbeelding is een linkvoorbeeldafbeelding die je site voor elke pagina genereert, in plaats van dat iemand hem met de hand ontwerpt. Wordt een pagina gedeeld op LinkedIn, in Slack of in een chat-app, dan haalt het platform de afbeelding op die in de og:image-tag van de pagina staat. Is die afbeelding gebouwd uit de eigen titel en data van de pagina, dan krijgt elk artikel, product en profiel een voorbeeld dat precies zegt wat het is.

Deze gids behandelt het sjabloonontwerp, de twee manieren om afbeeldingen te genereren, de tags die ze verbinden, caching en testen. Voor het formaat zelf en hoe platforms bijsnijden, zie onze gids over het Open Graph-afbeeldingsformaat.

Waarom elke pagina een eigen OG-afbeelding moet hebben

Het voorbeeld is vaak het eerste wat iemand van je pagina ziet, en in een drukke feed is het het grootste deel van wat ze zien. Eén algemene logokaart voor de hele site laat elke gedeelde link er hetzelfde uitzien, dus geen enkele zegt wat erachter zit. Een afbeelding per pagina draagt de echte titel van de pagina in je visuele identiteit: herkenbaar van jou, en specifiek genoeg om de klik te verdienen.

Een OG-afbeeldingssjabloon ontwerpen

Ontwerp het sjabloon zoals je een thumbnail zou ontwerpen, want zo wordt het meestal gezien. Voorbeelden verschijnen op een fractie van hun echte formaat, en sommige apps tonen een kleinere, bijgesneden versie. De woorden die ertoe doen moeten beide overleven.

1. 1

   Begin op 1200 × 630

   Ontwerp op volledig formaat en controleer het dan op een kwart daarvan. Kun je de titel op 300 pixels breed niet lezen, dan is hij te klein of te lang.

2. 2

   Gebruik de titel, niet de hele pagina

   Eén regel grote letters, of hooguit twee. Lange titels hebben een regel nodig: kort ze in de data in, of verklein het lettertype zodra ze een bepaalde lengte overschrijden.

3. 3

   Houd de marges breed

   Houd titel en logo van de randen weg zodat een strakkere uitsnede ze niet afsnijdt. Zo’n 60 tot 80 pixels marge op dit formaat is een verstandig startpunt.

4. 4

   Voeg één stukje context toe

   Een klein label voor de sectie, auteur of datum helpt mensen de link te plaatsen. Meer dan één extra regel maakt van een voorbeeld een document.

5. 5

   Laat de achtergrond het merk dragen

   Een consistent kleurverloop of materiaal doet meer voor herkenning dan een groot logo. Houd het helderste, drukste deel weg van de woorden; tekst op een kleurverloop legt uit hoe.

OG-afbeeldingen genereren bij het bouwen of op aanvraag

Er zijn twee momenten om de afbeelding te maken. Bij het bouwen rendert je site eenmalig een afbeelding voor elke pagina en serveert die als statisch bestand: snel, goedkoop en ideaal voor artikelen en documentatie. Op aanvraag tekent een route de afbeelding de eerste keer dat erom wordt gevraagd: geschikt voor pagina’s met veranderende data, zoals het aantal volgers van een profiel of de prijs van een product. Afbeeldingen op aanvraag moeten worden gecachet, anders herhaalt elke deling en elk crawlerbezoek het werk.

De meeste frameworks hebben een manier om een afbeelding te tekenen uit HTML-achtige opmaak. In Next.js genereert een bestand opengraph-image.tsx naast een route de afbeelding van die route met ImageResponse, en Next voegt de metatags voor je toe. Hetzelfde idee werkt elders met een headless browser die een screenshot maakt van een sjabloonpagina.

// app/guide/[slug]/opengraph-image.tsx
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
import { ImageResponse } from 'next/og'
import { getArticle } from '@/lib/articles'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const article = await getArticle(slug)
  const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: 72,
          backgroundImage: 'linear-gradient(135deg, #120a2e 0%, #4c1d95 55%, #db2777 100%)',
          color: '#ffffff',
          fontFamily: 'Inter',
        }}
      >
        <div style={{ fontSize: 28, opacity: 0.8 }}>Field Guide</div>
        <div style={{ fontSize: article.title.length > 40 ? 60 : 76, lineHeight: 1.1 }}>
          {article.title}
        </div>
      </div>
    ),
    { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] },
  )
}

De Open Graph-tags die de afbeelding verbinden

Platforms vinden de afbeelding via metatags in de head van de pagina. Het afbeeldingsadres moet absoluut zijn, inclusief https:// en het domein, omdat de crawler het van buiten je site leest. Breedte en hoogte opgeven helpt sommige platforms het voorbeeld op te maken voordat ze de afbeelding hebben gedownload, en de alt-tekst beschrijft hem voor mensen met een schermlezer.

<meta property="og:title" content="How to fix gradient banding" />
<meta property="og:description" content="Why gradients show stripes, and four fixes that work." />
<meta property="og:image" content="https://example.com/guide/gradient-banding/opengraph-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words How to fix gradient banding on a violet gradient" />
<meta name="twitter:card" content="summary_large_image" />

Open Graph 1200 × 630

1200 × 630

LinkedIn-link 1200 × 627

1200 × 627

X-post 1600 × 900

1600 × 900

OG-afbeeldingen cachen en testen

Platforms cachen voorbeelden, soms lange tijd. Wijzig je een afbeelding maar houd je het adres, dan blijven mensen misschien de oude zien. Voeg een versie aan het adres toe, zoals ?v=2, als het ontwerp verandert, of vraag het platform de pagina opnieuw op te halen. Stuur bij afbeeldingen op aanvraag cacheheaders mee zodat je server en elke CDN het resultaat bewaren.

• Plak de pagina in de Post Inspector van LinkedIn om het voorbeeld te zien en de cache te verversen.
• Gebruik de Sharing Debugger van Meta voor Facebook, die een pagina ook opnieuw kan ophalen.
• Plak de link in een conceptpost op X, of een privéchat in Slack of WhatsApp, om het echte voorbeeld te zien zonder iets te versturen.
• Open het afbeeldingsadres direct in een browser om te bevestigen dat het een PNG op het juiste formaat teruggeeft, zonder login.

Behandel OG-afbeeldingen als onderdeel van elke lancering: ze staan op de lijst in onze checklist voor beeld op lanceerdag, en de volledige set formaten staat in afbeeldingsformaten voor sociale media. Ontwerp je je voorbeelden in Gradiently, dan kan de API een opgeslagen ontwerp renderen als exacte PNG van 1200 × 630, wat past bij pipelines en AI-agents die afbeeldingen voor je maken.