# Dynamische OG-afbeeldingen: linkvoorbeelden automatisch genereren [Canonical HTML page](https://gradiently.design/nl/guide/dynamic-og-images) Voor elke pagina met de hand een voorbeeldafbeelding maken schaalt niet, en één algemene afbeelding voor de hele site verspilt het vaakst geziene beeld dat je hebt. Genereer ze in plaats daarvan. ## The short version - Een dynamische OG-afbeelding is een Open Graph-voorbeeldafbeelding die automatisch voor elke pagina wordt gegenereerd, meestal uit de titel, de categorie en een consistente merkachtergrond. - Het standaardformaat is 1200 × 630 pixels, en de pagina moet met een absolute URL in de og:image-tag naar de afbeelding verwijzen. - Je kunt OG-afbeeldingen eenmalig bij het bouwen genereren, wat het goedkoopst is, of op aanvraag, wat past bij pagina’s met veranderende data, zolang het resultaat wordt gecachet. - Platforms cachen voorbeeldafbeeldingen per URL, dus een afbeelding wijzigen betekent meestal het adres wijzigen of het platform vragen de pagina opnieuw op te halen. - Ontwerp het sjabloon voor een thumbnail: een korte titel in grote letters, royale marges en een achtergrond die herkenbaar blijft als hij klein is. 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](https://gradiently.design/nl/guide/open-graph-image-size). ## 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 linkvoorbeeldafbeelding met de tekst Banding in kleurverlopen verhelpen op een kleurverloopachtergrond Eén sjabloon, gevuld met de titel van één artikel… Hetzelfde linkvoorbeeldsjabloon met de tekst Merkkleuren kiezen …en die van een ander. Consistent genoeg om te herkennen, specifiek genoeg om op te klikken. ## 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. **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. **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. **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. **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. **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](https://gradiently.design/nl/guide/text-on-gradient) legt uit hoe. ### Zwak voorbeeld - Dezelfde logokaart op elke pagina - Volledige titel en beschrijving in kleine letters geperst - Tekst die de randen raakt - Een drukke foto achter witte woorden ### Sterk voorbeeld - De eigen titel van de pagina, groot - Eén kort label voor context - Brede marges die een uitsnede overleven - Een rustige merkachtergrond met duidelijk contrast ## 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. | Aanpak | Het best voor | Let op | | --- | --- | --- | | Bij het bouwen | Artikelen, documentatie, landingspagina’s | De bouwtijd groeit met het aantal pagina’s | | Op aanvraag, gecachet | Profielen, producten, gebruikersinhoud | Stel cacheheaders in; koude renders zijn trager | | Met de hand gemaakt | Een handvol sleutelpagina’s | Schaalt niet en loopt achter | 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. ```ts // 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( (
Field Guide
40 ? 60 : 76, lineHeight: 1.1 }}> {article.title}
), { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] }, ) } ``` Een OG-afbeelding per artikel in Next.js. De titel wordt kleiner als hij lang is, en het lettertype wordt geladen als TTF-bestand. > **Afbeeldingsgeneratoren spreken maar een deel van CSS** Bibliotheken die opmaak in afbeeldingen omzetten, zoals die achter `ImageResponse`, ondersteunen flexbox en een deel van CSS. Grid-opmaak werkt niet, en lettertypen moeten TTF, OTF of WOFF zijn, geen WOFF2. Controleer de lijst van je framework voordat je iets ontwerpt wat het niet kan tekenen. ## 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. ```html ``` De tags die een pagina nodig heeft voor een groot voorbeeld. `twitter:card` vraagt X om de opmaak met grote afbeelding. - Open Graph 1200 × 630: 1200 × 630 - LinkedIn-link 1200 × 627: 1200 × 627 - X-post 1600 × 900: 1600 × 900 Linkvoorbeelden zitten dicht bij 1,91:1. Eén afbeelding van 1200 × 630 dekt de gangbare gevallen; een aparte afbeelding voor een postbijlage is een andere klus. ## 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](https://www.linkedin.com/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](https://gradiently.design/nl/guide/launch-day-graphics), en de volledige set formaten staat in [afbeeldingsformaten voor sociale media](https://gradiently.design/nl/guide/social-media-image-sizes). 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. ## FAQ ### Wat is een dynamische OG-afbeelding? Het is een Open Graph-linkvoorbeeldafbeelding die automatisch voor elke pagina wordt gegenereerd, meestal uit de titel en data van de pagina op een consistent merksjabloon, in plaats van met de hand ontworpen. ### Welk formaat moet een OG-afbeelding hebben? 1200 × 630 pixels is de standaard. Houd belangrijke woorden weg van de randen, want sommige apps tonen een kleinere of bijgesneden versie. ### Waarom zie ik nog het oude voorbeeld nadat ik mijn OG-afbeelding heb gewijzigd? Platforms cachen voorbeeldafbeeldingen per URL. Wijzig het afbeeldingsadres, bijvoorbeeld met een versieparameter, of gebruik de inspector of debugger van het platform om de pagina opnieuw op te halen. ### Moet ik OG-afbeeldingen bij het bouwen of op aanvraag genereren? Bij het bouwen is het goedkoopst en past het bij pagina’s die zelden veranderen. Genereer op aanvraag voor pagina’s met veranderende data en cache het resultaat zodat het niet bij elk bezoek opnieuw wordt getekend. ### Heeft og:image een absolute URL nodig? Ja. Gebruik het volledige adres inclusief https en het domein, omdat crawlers de tag van buiten je site lezen.