# Open Graph Tags: der komplette Leitfaden für Link-Vorschauen

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

Jeder geteilte Link wird zu einem kleinen Plakat für deine Seite, gebaut aus ein paar Meta-Tags. Stimmen sie, wirkt die Vorschau gestaltet; fehlt einer, raten die Plattformen. Hier ist das komplette Set, mit Markup zum Kopieren.

## The short version

- Open Graph Tags sind Meta-Tags im Head einer Seite, die sozialen Plattformen und Messengern sagen, welchen Titel, welche Beschreibung und welches Bild sie beim Teilen des Links zeigen sollen.
- Das Open Graph Protokoll behandelt og:title, og:type, og:image und og:url als die grundlegenden Pflicht-Tags, og:description und og:site_name werden dringend empfohlen.
- Ein og:image mit 1200×630 Pixeln, eingebunden über eine absolute https-URL, funktioniert gut auf Facebook, LinkedIn, X, Slack, iMessage und den meisten anderen Apps.
- X liest twitter:card, um das Layout der Vorschau zu wählen, und greift für Titel, Beschreibung und Bild auf die Open Graph Tags zurück, wenn eigene Tags fehlen.
- Plattformen speichern Vorschauen im Cache, deshalb musst du die URL nach einer Änderung in einem Debugging-Tool wie Facebooks Sharing Debugger oder LinkedIns Post Inspector neu abrufen lassen.

**Open Graph Tags** sind `<meta>`-Tags im `<head>` einer Seite, die bestimmen, wie sie beim Teilen aussieht: Titel, kurze Beschreibung, Bild und Link. Facebook hat das Protokoll entwickelt, und heute lesen es LinkedIn, X, Slack, Discord, WhatsApp, iMessage und die meisten anderen Apps. Vier Tags bilden den Kern, `og:title`, `og:type`, `og:image` und `og:url`, und mit einer Beschreibung, einer Bildgröße und einem Twitter Card Tag deckst du fast jede Plattform ab.

## Die Open Graph Tags, die jede Seite braucht

Füg das in den Head einer Seite ein und ersetze die Werte. Jeder Tag nutzt `property`, nicht `name`, und jede URL ist absolut.

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

Ein vollständiges, funktionierendes Set. X übernimmt Titel, Beschreibung und Bild aus den Open Graph Tags darüber.

| Tag | Was er macht | Tipps |
| --- | --- | --- |
| `og:title` | Die fette Überschrift der Vorschau | Unter etwa 60 Zeichen; kein Seitenname nötig |
| `og:description` | Ein oder zwei Zeilen unter dem Titel | Etwa 110 bis 160 Zeichen; manche Apps blenden sie aus |
| `og:image` | Das Vorschaubild | Absolute https-URL, 1200×630 |
| `og:url` | Die kanonische Adresse der Seite | Gleich wie dein Canonical-Link, ohne Tracking-Parameter |
| `og:type` | Was die Seite ist | `website` für die meisten Seiten, `article` für Beiträge |
| `og:site_name` | Deine Marke, klein angezeigt | Auf jeder Seite gleich halten |
| `og:image:alt` | Eine Beschreibung des Bildes | Wird auf manchen Plattformen von Screenreadern vorgelesen |

Die Tags, die in der Praxis zählen. Die vollständige Liste steht auf der Website des Protokolls, ogp.me.

## Das og:image: Größe und Format

Das Bild ist das, was Menschen wirklich wahrnehmen. Nimm **1200×630 Pixel**, ein Verhältnis von etwa 1,91:1, also die Größe, die Plattformen für große Vorschauen erwarten und die in [Open Graph Bildgröße](https://gradiently.design/de/guide/open-graph-image-size) steht. Halte wichtige Wörter und das Logo von den Rändern fern, weil manche Apps quadratisch zuschneiden oder die Ecken abrunden.

- Open Graph 1200×630: 1200 × 630
- LinkedIn-Linkbild 1200×627: 1200 × 627
- Quadratischer Zuschnitt 1200×1200: 1200 × 1200

Die große Vorschauform und das Quadrat, auf das manche Chat-Apps und die X Summary Card zuschneiden. Zentriere die Botschaft, damit sie beides übersteht.

Speichere es als PNG, wenn es vor allem aus Schrift und Verlauf besteht, oder als hochwertiges JPEG für Fotos, und halte die Datei klein, am besten ein paar hundert Kilobyte, denn Plattformen setzen eigene Größengrenzen und große Dateien laden im Feed langsam. [PNG oder JPG](https://gradiently.design/de/guide/png-vs-jpeg) erklärt die Wahl, und [Bilder fürs Web optimieren](https://gradiently.design/de/guide/lighthouse-image-performance) behandelt die Komprimierung.

Ein breites Teilen-Bild mit 1200 mal 630 Pixeln mit Restaurantname, einer Headline zur Frühlingskarte und einer Reservierungszeile auf einem sanften Verlauf

Ein Teilen-Bild, gebaut für die Vorschau: wenige Wörter, zentriert, groß genug, um in der Größe lesbar zu sein, in der ein Feed es zeigt.

> **Das Bild muss erreichbar sein** Plattformen laden `og:image` von ihren eigenen Servern. Ein relativer Pfad, eine Seite hinter einem Login, eine Firewall, die unbekannte Bots blockiert, oder eine abgelaufene signierte URL ergeben alle eine leere Vorschau.

## Twitter Card Tags für X

X nutzt eigene `twitter:`-Tags, geschrieben mit `name` statt `property`. Entscheidend ist `twitter:card`. Fehlen `twitter:title`, `twitter:description` oder `twitter:image`, greift X auf die passenden Open Graph Tags zurück, du musst sie also selten doppelt anlegen.

| Tag | Werte | Hinweise |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` oder `summary` | Großes Bild oder kleines quadratisches Vorschaubild |
| `twitter:site` | `@yourbrand` | Das Konto der Website |
| `twitter:creator` | `@author` | Die Autorin oder der Autor eines Artikels |
| `twitter:image:alt` | Text | Nutzen, wenn das Bild von der og-Version abweicht |

Füg nur diese hinzu und lass Open Graph den Rest liefern.

## Open Graph Tags für Artikel

Blogbeiträge und Nachrichtenseiten können mit `og:type` auf `article` und ein paar zusätzlichen Eigenschaften mehr über sich verraten. Manche Apps zeigen Datum oder Autor, und die Angaben helfen Plattformen, die Seite zu verstehen.

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

Datumsangaben folgen ISO 8601. Halte modified_time ehrlich und aktualisiere es nur, wenn sich der Inhalt wirklich ändert.

## Open Graph Tags in einem Framework setzen

Die meisten Frameworks erzeugen diese Tags aus Daten. In Next.js exportierst du ein Metadata-Objekt aus der Seite oder dem Layout, und das Framework schreibt die Tags für dich. Setz einmal eine `metadataBase`, damit relative Bildpfade absolut werden.

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

Prüf die Dokumentation deiner Framework-Version, denn Metadata-APIs ändern sich zwischen Releases. Für generierte Bilder pro Seite siehe [dynamische OG-Bilder](https://gradiently.design/de/guide/dynamic-og-images).

## Link-Vorschauen testen und reparieren

1. **Quelltext ansehen** Öffne den Seitenquelltext, nicht den Inspektor, und prüf, ob die Tags im Server-HTML stehen. Viele Crawler führen kein JavaScript aus.
2. **Bild-URL prüfen** Füg die og:image-Adresse in ein privates Fenster ein. Sie sollte ohne Login laden.
3. **Neu abrufen lassen** Lass die URL durch Facebooks Sharing Debugger und [LinkedIns Post Inspector](https://www.linkedin.com/post-inspector/) laufen, um deren Caches zu leeren.
4. **Bild versionieren** Hängt ein altes Bild fest, ändere den Dateinamen oder füg einen Query-String wie `?v=2` an und lass neu abrufen.
5. **Privat teilen** Schick dir den Link selbst in Slack oder einem Messenger, um eine echte Vorschau zu sehen.

### Leere oder falsche Vorschau

- Tags per clientseitigem JavaScript eingefügt
- Relativer og:image-Pfad
- og:url zeigt auf eine andere Seite
- Winziges oder seltsam geformtes Bild
- Tags geändert, Vorschau unverändert

### Lösung

- Tags auf dem Server rendern
- Eine vollständige https-URL nutzen
- og:url an die kanonische Adresse angleichen
- In 1200×630 exportieren
- Neu abrufen lassen oder das Bild umbenennen

Die Tags sind der einfache Teil; das Bild ist die Gestaltungsarbeit, und es muss in Vorschaugröße lesbar sein. In Gradiently ist die Link-Vorschau eines der eingebauten Formate mit 1200×630, der Mark hält seinen ruhigsten Bereich hinter den Wörtern, und der Designer kann aus einem Satz das Teilen-Bild für eine Seite machen und danach die passenden Post-Formate für [jede Plattform](https://gradiently.design/de/guide/social-media-image-sizes).

## FAQ

### Was sind Open Graph Tags?

Meta-Tags im Head einer Seite, etwa og:title und og:image, die sozialen Plattformen und Messengern sagen, was sie beim Teilen des Links zeigen sollen.

### Welche Open Graph Tags sind Pflicht?

Das Protokoll nennt og:title, og:type, og:image und og:url als grundlegende Tags. Füg og:description und og:site_name für eine vollständige Vorschau hinzu.

### Wie groß sollte ein og:image sein?

1200×630 Pixel funktionieren auf Facebook, LinkedIn, X und den meisten Chat-Apps. Nutze eine absolute https-URL und halte wichtige Inhalte mittig.

### Brauche ich Twitter Card Tags, wenn ich Open Graph Tags habe?

Füg `twitter:card` hinzu, meist mit `summary_large_image`. Für Titel, Beschreibung und Bild greift X auf Open Graph zurück.

### Warum aktualisiert sich meine Link-Vorschau nicht?

Plattformen speichern Vorschauen im Cache. Lass die URL in Facebooks Sharing Debugger oder LinkedIns Post Inspector neu abrufen oder benenne die Bilddatei um.

### Nutze ich property oder name für og-Tags?

Open Graph Tags nutzen `property`, Twitter Tags nutzen `name`. Die meisten Parser akzeptieren beides, aber die Konvention erspart Überraschungen.