Open-Graph- und Twitter-Card-Tags bestimmen, wie ein Link in sozialen Netzwerken aussieht. Welche Tags du brauchst, wie du Titel, Beschreibung und Vorschaubild setzt und was passiert, wenn sie fehlen.

Du kennst das: Jemand schickt einen Link in eine WhatsApp-Gruppe, und statt einer nackten URL erscheint eine kleine Karte mit Bild, Überschrift und einem Satz Beschreibung. Diese Karte ist kein Zufall. Sie entsteht aus Meta-Tags, die im Quelltext deiner Seite stehen und die die sozialen Netzwerke auslesen, sobald jemand deine Adresse teilt. Wer diese Tags kennt, steuert genau, wie der eigene Link aussieht, wenn er weitergereicht wird. Wer sie ignoriert, überlässt die Darstellung dem Zufall und dem Ratealgorithmus des jeweiligen Dienstes.

In diesem Ratgeber gehe ich durch, welche Tags du brauchst, wie sie aufgebaut sind, welche Bildmaße sich in der Praxis bewährt haben und wie du prüfst, ob am Ende wirklich die Karte erscheint, die du willst.

Was beim Teilen eines Links passiert

Sobald du eine URL in WhatsApp, LinkedIn, Facebook, Slack, Mastodon oder X einfügst, schickt der jeweilige Dienst im Hintergrund einen eigenen Bot los. Dieser Bot ruft deine Seite auf, liest den Quelltext und sucht gezielt nach bestimmten Meta-Tags im Kopfbereich des Dokuments. Aus den gefundenen Angaben baut er die Vorschaukarte: Überschrift, kurzer Text und ein Vorschaubild.

Wichtig ist, dass jeder Dienst seinen eigenen Bot betreibt und die Karte nach eigenen Regeln zusammensetzt. LinkedIn und Facebook stützen sich stark auf das Open Graph Protocol. Slack und Mastodon lesen ebenfalls Open Graph. X hat mit den Twitter Cards ein eigenes Format, greift aber in vielen Fällen auf Open Graph zurück, wenn die eigenen Tags fehlen. WhatsApp wertet ebenfalls Open Graph aus. In der Praxis reicht ein sauber gesetzter Open-Graph-Block also weit, und mit ein paar ergänzenden Twitter-Tags deckst du auch X zuverlässig ab.

Das Open Graph Protocol

Das Open Graph Protocol wurde ursprünglich von Facebook eingeführt und hat sich zum De-facto-Standard für Link-Vorschauen entwickelt. Es funktioniert über meta-Tags, die du in den <head> deiner Seite schreibst. Anders als bei normalen Meta-Tags steht der Name hier im Attribut property, nicht in name, und der Inhalt in content.

Die wichtigsten Eigenschaften sind:

og:title legt die Überschrift der Vorschaukarte fest. Sie darf, muss aber nicht identisch mit dem <title> der Seite sein.
og:description ist der kurze Text unter der Überschrift. Er beschreibt, worum es auf der Seite geht.
og:image verweist auf das Vorschaubild. Das ist optisch das auffälligste Element der Karte.
og:url gibt die kanonische Adresse der Seite an. So weiß das Netzwerk, welche URL zur Karte gehört, auch wenn der geteilte Link Parameter enthält.
og:type beschreibt die Art des Inhalts, etwa website für eine normale Seite oder article für einen Artikel.
og:site_name nennt den Namen der gesamten Website, also die Marke hinter der einzelnen Seite.

Alle diese Tags gehören in den Kopfbereich des HTML-Dokuments. Steht ein og-Tag im sichtbaren Körper der Seite, wird es von den meisten Bots ignoriert.

Die Pflicht-Tags im Überblick

Nicht jedes og-Tag ist gleich wichtig. Für eine funktionierende, ansprechende Vorschau brauchst du einen kleinen Kern, der Rest ist Feinschliff. Die folgende Tabelle ordnet die gängigen Tags nach ihrer Bedeutung ein.

Tag	Zweck	Pflicht?
`og:title`	Überschrift der Vorschaukarte	Ja
`og:image`	Vorschaubild der Karte	Ja, für eine Bildkarte
`og:url`	Kanonische Adresse der Seite	Ja
`og:type`	Art des Inhalts (website, article)	Empfohlen
`og:description`	Kurzer Beschreibungstext	Empfohlen
`og:site_name`	Name der gesamten Website	Optional

Das Open Graph Protocol selbst nennt og:title, og:type, og:image und og:url als die vier grundlegenden Angaben. In der Alltagspraxis kommst du mit Titel, Bild, URL und Beschreibung sehr weit, weil das genau die Elemente sind, die auf der Karte sichtbar werden.

Empfehlungen fürs Vorschaubild

Das Bild ist der Blickfang der Karte, und hier lohnt sich Sorgfalt. Als gängiger Richtwert für ein großformatiges Vorschaubild hat sich eine Auflösung von etwa 1200 mal 630 Pixeln etabliert. Das entspricht einem Seitenverhältnis von rund 1,91 zu 1, das die großen Netzwerke für die breite Kartenvariante erwarten. Diese Maße sind keine feste Vorschrift, sondern ein bewährter Standard, der auf den meisten Plattformen ohne Beschneidung dargestellt wird.

Ein paar praktische Punkte dazu:

Seitenverhältnis beachten. Weicht dein Bild stark vom Querformat ab, schneiden viele Dienste eigenmächtig zu. Wichtige Motive oder Textteile können dann abgeschnitten werden.
Dateigröße im Rahmen halten. Sehr große Bilddateien werden von manchen Bots nicht geladen oder verzögert verarbeitet. Ein gut komprimiertes Bild im Bereich weniger hundert Kilobyte ist ein vernünftiger Zielkorridor.
Absolute URL verwenden. Der Pfad in og:image sollte mit https:// beginnen und vollständig sein. Relative Pfade werden von vielen Bots nicht aufgelöst.
Format. Übliche Rasterformate wie JPEG oder PNG sind sicher. Exotische Formate können zu Ausfällen führen, weil nicht jeder Bot sie unterstützt.

Wenn du kein eigenes Bild pro Seite hast, ist ein einheitliches Standard-Bild für die ganze Website immer noch besser als gar keins. Ohne og:image erscheint oft nur eine kleine Textkarte oder ein zufällig gegriffenes Bild von der Seite.

Twitter und X Cards

X, das frühere Twitter, verwendet zusätzlich ein eigenes Format namens Twitter Cards. Diese Tags nutzen das Attribut name statt property. Das zentrale Tag ist twitter:card. Setzt du es auf summary_large_image, erscheint die Karte mit einem großen Vorschaubild, ähnlich wie die breite Open-Graph-Karte. Der Wert summary erzeugt dagegen eine kompaktere Variante mit kleinem Bild neben dem Text.

Der praktische Trick: X greift auf die Open-Graph-Tags zurück, wenn die entsprechenden Twitter-Tags fehlen. Setzt du also og:title, og:description und og:image sauber, funktioniert die Karte auf X meist schon, ohne dass du jedes Feld doppelt pflegst. Es genügt oft, twitter:card zu ergänzen, damit die große Bildvariante ausgelöst wird, und den Rest über Open Graph laufen zu lassen. Wer die volle Kontrolle will, kann twitter:title, twitter:description und twitter:image zusätzlich setzen, muss es aber nicht.

Was passiert, wenn die Tags fehlen

Fehlen die og-Tags komplett, verschwindet die Vorschau nicht einfach. Stattdessen raten die Netzwerke. Sie ziehen sich den <title> der Seite als Überschrift, greifen die Meta-Description oder einen beliebigen Textabschnitt als Beschreibung und suchen sich irgendein Bild aus dem Dokument, oft das erste größere, das sie finden. Das Ergebnis ist selten schön: abgeschnittene Texte, ein Logo-Schnipsel als Vorschaubild oder ein leerer grauer Kasten, wenn kein brauchbares Bild vorhanden ist.

Das wirkt unprofessionell und kostet Klicks, denn eine unattraktive Karte lädt niemanden zum Antippen ein. Genau deshalb lohnt es sich, die Vorschau aktiv zu setzen, statt sie dem Zufall zu überlassen.

Zusammenspiel mit Title und Description

Open Graph ersetzt nicht den normalen <title> und die Meta-Description deiner Seite. Beide erfüllen verschiedene Aufgaben. Der <title> und die Description steuern, wie deine Seite in den Suchergebnissen erscheint. Die og-Tags steuern, wie sie beim Teilen aussieht. Wie du Titel und Beschreibung für die Suche sauber setzt, beschreibe ich im Ratgeber zu Meta-Tags, Title und Description.

In der Praxis greift ein Fallback: Fehlt og:title, ziehen viele Dienste den <title> heran, und fehlt og:description, nehmen sie die Meta-Description. Das ist ein Sicherheitsnetz, kein Ersatz für saubere og-Tags. Denn ein Titel, der für Google optimiert ist, liest sich auf einer Social-Karte oft holprig. Wer die Kontrolle behalten will, setzt beides bewusst getrennt.

Ein vollständiger og-Block

So sieht ein sauber gesetzter Block im <head> aus, der Open Graph und die passende Twitter Card kombiniert:

<head>
  <!-- Klassische Meta-Tags -->
  <title>Seitenprüfer: On-Page-SEO im Browser prüfen</title>
  <meta name="description" content="Prüfe HTML, Meta-Tags und Struktur deiner Seite direkt im Browser." />

  <!-- Open Graph -->
  <meta property="og:title" content="Seitenprüfer: On-Page-SEO im Browser prüfen" />
  <meta property="og:description" content="Prüfe HTML, Meta-Tags und Struktur deiner Seite direkt im Browser." />
  <meta property="og:image" content="https://seitenpruefer.de/og-bild.png" />
  <meta property="og:url" content="https://seitenpruefer.de/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Seitenprüfer" />

  <!-- Twitter / X Card -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

Beachte den Unterschied: Die Open-Graph-Tags stehen mit property, die Twitter-Tags mit name. Das Vorschaubild ist als absolute URL angegeben. Und twitter:card allein reicht auf X aus, weil Titel, Beschreibung und Bild über den Open-Graph-Fallback abgedeckt sind.

Debugging: warum die Karte nicht so aussieht wie erwartet

Wenn du deine Tags gesetzt hast, die Karte aber trotzdem falsch oder gar nicht erscheint, liegt das häufig am Cache. Die Netzwerke speichern die einmal geladenen Vorschaudaten, damit sie nicht bei jedem Teilen neu die Seite aufrufen müssen. Änderst du danach ein Tag, siehst du oft noch die alte Karte.

Dagegen helfen die Sharing-Debugger, die mehrere Dienste anbieten. Du gibst dort deine URL ein, und das Werkzeug zeigt, welche Tags der jeweilige Bot ausliest und wie die Karte aussieht. Die meisten Debugger bieten außerdem einen Knopf, mit dem du den Cache erzwungen neu laden kannst. Das ist der schnellste Weg, um nach einer Änderung die aktuelle Karte zu sehen, ohne auf den natürlichen Cache-Ablauf zu warten.

Prüfe beim Debugging vor allem drei Dinge: Erreicht der Bot deine Seite überhaupt, oder blockiert eine Zugriffsregel ihn? Findet er die Tags im <head>? Und ist die Bild-URL öffentlich abrufbar und nicht hinter einem Login versteckt?

Wie der Seitenprüfer Open Graph prüft

Der Seitenprüfer liest den Kopfbereich deiner Seite aus und meldet, ob die zentralen Social-Tags gesetzt sind. Er sieht nach, ob og:title, og:description und og:image vorhanden sind, und weist darauf hin, wenn eines der drei fehlt. Zusätzlich prüft er, ob twitter:card gesetzt ist, damit die Karte auf X in der gewünschten Form erscheint.

So erkennst du auf einen Blick, ob deine Seite eine kontrollierte Vorschau hat oder ob die Netzwerke beim Teilen raten müssen. Der Check ersetzt nicht den finalen Blick in einen Sharing-Debugger, weil nur der die tatsächliche Karte rendert. Er ist aber der schnelle erste Filter, um fehlende Tags aufzuspüren, bevor du überhaupt anfängst zu teilen.

Wer die Social-Tags mit den übrigen On-Page-Grundlagen zusammen denken will, findet den größeren Rahmen im Ratgeber zu den On-Page-SEO-Grundlagen. Open Graph ist dort ein Baustein von mehreren, aber einer, der beim Teilen sofort sichtbar wird und deshalb überproportional auf den ersten Eindruck einzahlt.

Open Graph und Social Sharing: die Vorschau steuern