Dynamische OG-Bilder: Link-Vorschauen automatisch erzeugen

Ein dynamisches OG-Bild ist ein Link-Vorschaubild, das deine Website für jede Seite erzeugt, statt dass jemand es von Hand gestaltet. Wird eine Seite auf LinkedIn, in Slack oder in einer Chat-App geteilt, ruft die Plattform das Bild ab, das im og:image-Tag der Seite steht. Entsteht dieses Bild aus Titel und Daten der Seite selbst, bekommt jeder Artikel, jedes Produkt und jedes Profil eine Vorschau, die genau sagt, worum es geht.

Dieser Leitfaden behandelt das Vorlagendesign, die zwei Wege, Bilder zu erzeugen, die Tags, die sie verbinden, Caching und Testen. Zur Größe selbst und zum Zuschnitt der Plattformen siehe unseren Leitfaden zur Open-Graph-Bildgröße.

Warum jede Seite ein eigenes OG-Bild haben sollte

Die Vorschau ist oft das Erste, was jemand von deiner Seite sieht, und in einem vollen Feed ist sie das meiste davon. Eine generische Logokarte für die ganze Website lässt jeden geteilten Link gleich aussehen, sodass keiner sagt, was dahintersteckt. Ein Bild pro Seite trägt den tatsächlichen Titel der Seite in deiner visuellen Identität: wiedererkennbar deins und konkret genug, um den Klick zu verdienen.

Eine OG-Bild-Vorlage gestalten

Gestalte die Vorlage, wie du ein Thumbnail gestalten würdest, denn so wird sie meist gesehen. Vorschauen erscheinen in einem Bruchteil ihrer echten Größe, und manche Apps zeigen eine kleinere, zugeschnittene Version. Die Wörter, auf die es ankommt, sollten beides überstehen.

1. 1

   Bei 1200 × 630 beginnen

   Gestalte in voller Größe und prüfe es dann bei einem Viertel davon. Kannst du den Titel bei 300 Pixeln Breite nicht lesen, ist er zu klein oder zu lang.

2. 2

   Den Titel nutzen, nicht die ganze Seite

   Eine Zeile große Schrift, höchstens zwei. Lange Titel brauchen eine Regel: in den Daten kürzen oder die Schriftgröße ab einer bestimmten Länge stufenweise verkleinern.

3. 3

   Ränder breit halten

   Halte Titel und Logo von den Rändern fern, damit ein engerer Zuschnitt sie nicht abschneidet. Etwa 60 bis 80 Pixel Rand sind bei dieser Größe ein vernünftiger Anfang.

4. 4

   Einen Kontext hinzufügen

   Ein kleines Label für Rubrik, Autorin oder Datum hilft, den Link einzuordnen. Mehr als eine zusätzliche Zeile macht aus einer Vorschau ein Dokument.

5. 5

   Den Hintergrund die Marke tragen lassen

   Ein einheitlicher Farbverlauf oder ein Material tut mehr für die Wiedererkennung als ein großes Logo. Halte seinen hellsten, unruhigsten Teil von den Wörtern fern, Text auf einem Farbverlauf erklärt, wie.

OG-Bilder beim Build oder auf Anfrage erzeugen

Es gibt zwei Zeitpunkte, das Bild zu machen. Beim Build rendert deine Website für jede Seite einmal ein Bild und liefert es als statische Datei aus: schnell, günstig und ideal für Artikel und Doku. Auf Anfrage zeichnet eine Route das Bild, wenn es zum ersten Mal abgefragt wird: richtig für Seiten mit wechselnden Daten, etwa die Followerzahl eines Profils oder den Preis eines Produkts. Bilder auf Anfrage müssen gecacht werden, sonst wiederholt jedes Teilen und jeder Crawler-Besuch die Arbeit.

Die meisten Frameworks haben einen Weg, aus HTML-ähnlichem Markup ein Bild zu zeichnen. In Next.js erzeugt eine Datei opengraph-image.tsx neben einer Route mit ImageResponse das Bild dieser Route, und Next fügt die Meta-Tags für dich hinzu. Dieselbe Idee funktioniert anderswo mit einem Headless-Browser, der einen Screenshot einer Vorlagenseite macht.

// 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' }] },
  )
}

Die Open-Graph-Tags, die das Bild verbinden

Plattformen finden das Bild über Meta-Tags im Head der Seite. Die Bildadresse muss absolut sein, mit https:// und Domain, weil der Crawler sie von außerhalb deiner Website liest. Breite und Höhe anzugeben hilft manchen Plattformen, die Vorschau anzulegen, bevor sie das Bild geladen haben, und der Alt-Text beschreibt es für Menschen mit Screenreader.

<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-Bilder cachen und testen

Plattformen cachen Vorschauen, manchmal lange. Änderst du ein Bild, behältst aber seine Adresse, sehen Menschen womöglich weiter das alte. Füge der Adresse eine Version hinzu, etwa ?v=2, wenn sich das Design ändert, oder bitte die Plattform, die Seite neu abzurufen. Sende bei Bildern auf Anfrage Cache-Header, damit dein Server und jedes CDN das Ergebnis behalten.

• Füge die Seite in den Post Inspector von LinkedIn ein, um die Vorschau zu sehen und ihren Cache zu aktualisieren.
• Nutze den Sharing Debugger von Meta für Facebook, der eine Seite ebenfalls neu abrufen kann.
• Füge den Link in einen Postentwurf auf X oder in einen privaten Chat in Slack oder WhatsApp ein, um die echte Vorschau zu sehen, ohne etwas zu senden.
• Öffne die Bildadresse direkt im Browser, um zu bestätigen, dass sie ohne Login ein PNG in der richtigen Größe liefert.

Behandle OG-Bilder als Teil jedes Launches: Sie stehen auf der Liste in unserer Checkliste zu Grafiken für den Launch-Tag, und alle Formate findest du in Bildgrößen für Social Media. Gestaltest du deine Vorschauen in Gradiently, kann seine API ein gespeichertes Design als exaktes PNG in 1200 × 630 rendern, was zu Pipelines und KI-Agenten passt, die Bilder für dich machen.