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

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.

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

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 steht. Halte wichtige Wörter und das Logo von den Rändern fern, weil manche Apps quadratisch zuschneiden oder die Ecken abrunden.

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 erklärt die Wahl, und Bilder fürs Web optimieren behandelt die Komprimierung.

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.

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.

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

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.

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

Link-Vorschauen testen und reparieren

1. 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. 2

   Bild-URL prüfen

   Füg die og:image-Adresse in ein privates Fenster ein. Sie sollte ohne Login laden.

3. 3

   Neu abrufen lassen

   Lass die URL durch Facebooks Sharing Debugger und LinkedIns Post Inspector laufen, um deren Caches zu leeren.

4. 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. 5

   Privat teilen

   Schick dir den Link selbst in Slack oder einem Messenger, um eine echte Vorschau zu sehen.

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.