Zurück zu „Technische SEO-Grundlagen“
Technische SEO-Grundlagen4 Min. Lesezeit

Die Open-Graph-Tags

So kontrollieren Sie die Vorschau Ihrer Seite in sozialen Netzwerken und KI-Chats: die Tags og:title, og:description und og:image erklärt.

Die Open-Graph-Tags steuern die Vorschau Ihrer Seite, wenn diese in sozialen Netzwerken, in einem Messenger oder in einem Gespräch mit einer generativen KI zitiert wird, die eine erweiterte Vorschau anzeigen kann.

Wozu Open-Graph-Tags dienen

Ohne Open-Graph-Markup muss eine Plattform, die eine Link-Vorschau anzeigt (soziales Netzwerk, Messenger, manche KI-Assistenten), erraten, welchen Titel, welches Bild und welche Beschreibung sie verwendet – oft mit ungeschickten Griffen in den Seiteninhalt: ein zufälliges erstes Bild aus dem HTML ohne Bezug zum Thema, ein mitten im Satz abgeschnittener Titel oder eine fehlende Beschreibung. Die Open-Graph-Tags übernehmen die Kontrolle über diese Vorschau und garantieren eine konsistente Darstellung, unabhängig davon, wo der Link geteilt wird.

Dieser Standard, ursprünglich von Facebook entwickelt, hat sich seither als De-facto-Referenz bei nahezu allen Plattformen durchgesetzt, die Link-Vorschauen anzeigen, was ihn zu einem Markup mit geringem Implementierungsaufwand und großem Nutzen macht – eine Handvoll Tags deckt die meisten Anwendungsfälle ab.

Die wichtigsten Tags

<head>
  <meta property="og:title" content="Vollständiger Leitfaden zur E-Rechnung">
  <meta property="og:description" content="Alles Wichtige zu Formaten, Pflichten und Plattformen für die E-Rechnung 2026.">
  <meta property="og:image" content="https://beispiel.de/bilder/leitfaden-rechnung-og.jpg">
  <meta property="og:url" content="https://beispiel.de/leitfaden-e-rechnung">
  <meta property="og:type" content="article">
</head>
  • og:title: Titel der Vorschau, oft nahe am <title>, kann aber für den Kontext des sozialen Teilens umformuliert werden.
  • og:description: Zusammenfassung, die unter dem Titel in der Vorschau angezeigt wird.
  • og:image: Bild der Vorschaukarte – das Element mit dem größten Einfluss auf die Klickrate bei einem Share.
  • og:url: kanonische URL der geteilten Seite.
  • og:type: Art des Inhalts (article, website, product ...).

Diese fünf Tags decken die große Mehrheit der Anwendungsfälle ab. Weitere Eigenschaften existieren für spezifischere Bedürfnisse (og:site_name für den Namen der Website, article:author oder article:published_time für redaktionelle Inhalte), bleiben aber im Vergleich zum Grundgerüst aus Titel, Beschreibung und Bild zweitrangig.

Best Practices für das Open-Graph-Bild

Ein Bild mit falschen Abmessungen oder ein fehlendes Bild führt zu einer leeren oder schlecht zugeschnittenen Vorschau, was das Engagement bei einem Share deutlich verringert. Die gängigsten Empfehlungen:

  • empfohlenes Format rund um 1200 x 630 Pixel (Seitenverhältnis 1,91:1);
  • vernünftige Dateigröße für ein schnelles Laden der Vorschau;
  • lesbarer Text auch in kleiner Größe, falls das Bild überlagerten Text enthält;
  • ein zentriertes Hauptmotiv, da manche Plattformen das Bild je nach Anzeigeformat unterschiedlich zuschneiden (breite Vorschau, quadratisches Thumbnail);
  • ein auf Website-Ebene definiertes Standardbild für Seiten ohne eigenes Bild, statt das Feld leer zu lassen.

Eine Wirkung, die über soziale Netzwerke hinausgeht

Manche generativen KI-Oberflächen, die Suchergebnisse oder Quellenangaben anzeigen, nutzen ebenfalls diese Metadaten, um eine visuelle Vorschau der zitierten Quelle zu erstellen. Ein vollständiges und mit dem tatsächlichen Seiteninhalt übereinstimmendes Open-Graph-Markup trägt daher indirekt zur Qualität der Darstellung Ihrer Marke in diesen Kontexten bei.

Häufige Fehler

  • Fehlende Open-Graph-Tags, wodurch jede Plattform inkonsistent eine eigene Vorschau erraten muss.
  • og:image, das auf eine relative statt eine absolute URL verweist, wodurch die Anzeige auf den meisten Plattformen fehlschlägt.
  • og:description, die so stark abweicht, dass sie dem tatsächlichen Seiteninhalt widerspricht.
  • Vergessen, diese Tags nach einem visuellen Relaunch oder einer größeren Inhaltsänderung zu aktualisieren.

Twitter Cards und das Testen des Markups vor der Veröffentlichung

Manche Plattformen verwenden ergänzend zu Open Graph einen eigenen Standard. X (ehemals Twitter) liest beispielsweise vorrangig die Tags twitter:card, twitter:title und twitter:image, falls vorhanden, und greift in deren Abwesenheit auf die Open-Graph-Tags zurück:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Vollständiger Leitfaden zur E-Rechnung">
<meta name="twitter:image" content="https://beispiel.de/bilder/leitfaden-rechnung-twitter.jpg">

In den meisten Fällen genügt es, die Open-Graph-Werte gewissenhaft in diese ergänzenden Tags zu übertragen; es ist nicht nötig, für jede Plattform völlig eigenständige Inhalte zu verfassen – außer Sie sprechen auf einer davon gezielt eine andere Zielgruppe an.

Eine falsch konfigurierte Open-Graph-Vorschau fällt beim Durchsuchen der Website selbst meist nicht auf – der Fehler zeigt sich erst im Moment des Teilens, oft nachdem der Link bereits im Umlauf ist. Die Debugging-Tools der großen sozialen Plattformen erlauben es, die Vorschau vor der Veröffentlichung zu simulieren und einen Cache-Refresh zu erzwingen, falls ein Bild oder Titel nach einem ersten Share geändert wurde: Diese Plattformen speichern die generierte Vorschau zwischen und regenerieren sie nicht automatisch bei jedem Besuch.

Die Open-Graph-Tags ergänzen auf natürliche Weise das Title-Tag und die Meta Description: Zusammen legen die drei fest, wie sich Ihre Seite präsentiert – ob in einer Suchmaschine oder bei einem Share. Für einen tieferen Einstieg ins strukturierte Markup ist die logische nächste Lektion die zu den strukturierten Daten von Schema.org.