Open Graph Tags: Der vollständige Leitfaden für Social Media Vorschauen

· 12 Min. Lesezeit

Inhaltsverzeichnis

Wenn Sie einen Link auf Facebook, LinkedIn, Twitter oder in Messaging-Apps teilen, wird die angezeigte Vorschaukarte aus Open Graph (OG) Tags im HTML Ihrer Seite generiert. Diese Tags richtig zu setzen macht den Unterschied zwischen einer ansprechenden, klickwürdigen Vorschau und einem defekten oder generisch aussehenden Link.

Dieser umfassende Leitfaden deckt alles ab, was Sie über Open Graph Tags, Twitter Cards und die Optimierung von Social Media Vorschauen wissen müssen. Egal ob Sie Entwickler sind, der OG Tags zum ersten Mal implementiert, oder Marketer, der das Social Engagement verbessern möchte – Sie finden durchgehend umsetzbare Erkenntnisse und praktische Beispiele.

Was ist Open Graph?

Open Graph ist ein Protokoll, das ursprünglich 2010 von Facebook entwickelt wurde und es Webseiten ermöglicht, zu reichhaltigen Objekten in einem sozialen Graphen zu werden. Durch Hinzufügen von OG Meta-Tags zu Ihrem HTML kontrollieren Sie genau, wie Ihr Inhalt beim Teilen auf Social Media Plattformen erscheint.

Ohne Open Graph Tags versuchen Plattformen, den Inhalt Ihrer Seite automatisch zu erfassen, was oft zu schlechten oder falschen Vorschauen führt. Das Ergebnis? Defekte Bilder, fehlende Titel oder generische Beschreibungen, die es nicht schaffen, in überfüllten Social Feeds Aufmerksamkeit zu erregen.

Das Protokoll verwendet Meta-Tags im <head>-Bereich Ihres HTML mit dem property-Attribut, das mit og: vorangestellt ist. Diese Tags liefern strukturierte Daten, die Social Plattformen zuverlässig parsen und anzeigen können.

Plattformen, die Open Graph unterstützen

Open Graph ist zum De-facto-Standard für Social Media Vorschauen geworden. Wichtige Plattformen, die das Protokoll unterstützen, sind:

Profi-Tipp: Nutzen Sie unseren Open Graph Checker, um sofort zu validieren, wie Ihre Tags auf verschiedenen Plattformen erscheinen, bevor Sie veröffentlichen.

Wie Open Graph Tags funktionieren

Wenn jemand Ihre URL auf einer Social Plattform teilt, besucht der Crawler der Plattform (oft als "Bot" oder "Scraper" bezeichnet) Ihre Seite und sucht nach Open Graph Meta-Tags im HTML <head>-Bereich. Diese Tags liefern strukturierte Informationen über Ihren Inhalt.

Der Crawler extrahiert diese Daten und verwendet sie, um eine Vorschaukarte zu generieren, auch "Rich Snippet" oder "Link-Vorschau" genannt. Diese Karte enthält typischerweise einen Titel, eine Beschreibung, ein Bild und eine URL.

Der Crawling-Prozess

Hier ist, was hinter den Kulissen passiert, wenn Sie einen Link teilen:

  1. URL-Übermittlung – Ein Nutzer fügt Ihre URL auf einer Social Plattform ein oder teilt sie
  2. Crawler-Versand – Die Plattform sendet einen Bot, um Ihre Seite abzurufen
  3. HTML-Parsing – Der Bot liest das HTML Ihrer Seite und extrahiert OG Tags
  4. Cache-Speicherung – Die Plattform speichert die extrahierten Daten im Cache (normalerweise für 24-48 Stunden)
  5. Vorschau-Generierung – Eine Vorschaukarte wird mit den gecachten Daten gerendert
  6. Anzeige – Die Vorschau erscheint im Feed oder in der Nachricht des Nutzers

Dieses Verständnis des Prozesses ist entscheidend, weil es erklärt, warum Änderungen an Ihren OG Tags nicht sofort erscheinen. Die meisten Plattformen cachen Vorschaudaten aggressiv, um die Serverlast zu reduzieren.

Schneller Tipp: Nachdem Sie Ihre OG Tags aktualisiert haben, verwenden Sie plattformspezifische Debugging-Tools, um eine Cache-Aktualisierung zu erzwingen. Wir behandeln diese Tools im Debugging-Abschnitt.

Erforderliche Open Graph Tags

Vier OG Tags gelten als erforderlich für ein ordnungsgemäß definiertes Open Graph Objekt. Während Seiten ohne diese Tags möglicherweise noch Vorschauen generieren, sind die Ergebnisse unvorhersehbar und oft von schlechter Qualität.

Hier ist die minimale Implementierung, die Sie benötigen:

<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

og:title

Der Titel Ihres Inhalts, wie er in der Social Media Vorschau erscheinen soll. Dies ist wohl das wichtigste Tag, weil es das Erste ist, was Nutzer sehen.

Best Practices:

Beispiel:

<meta property="og:title" content="10 bewährte Strategien zur Verdopplung Ihrer E-Mail-Öffnungsraten">

og:type

Der Typ des Inhalts, den Ihre Seite repräsentiert. Dies hilft Plattformen, die Art Ihres Inhalts zu verstehen und kann beeinflussen, wie er angezeigt oder kategorisiert wird.

Häufige Werte:

Für die meisten Websites und Blogbeiträge verwenden Sie entweder website oder article. Der article-Typ ermöglicht zusätzliche Tags wie article:published_time und article:author.

Beispiel:

<meta property="og:type" content="article">

og:image

Die URL des Bildes, das in der Vorschaukarte erscheinen soll. Dies ist entscheidend für das Engagement – Beiträge mit Bildern erhalten deutlich mehr Klicks und Shares als reine Text-Vorschauen.

Anforderungen:

Beispiel:

<meta property="og:image" content="https://example.com/images/social-preview.jpg">

Wir werden tiefer in Bildspezifikationen und Optimierung im dedizierten Abschnitt unten eintauchen.

og:url

Die kanonische URL Ihrer Seite. Dies sollte die permanente, bevorzugte URL sein, die Sie mit diesem Inhalt verknüpfen möchten.

Best Practices:

Beispiel:

<meta property="og:url" content="https://example.com/de/blog/email-marketing-leitfaden">

Profi-Tipp: Der og:url-Wert sollte mit Ihrer kanonischen URL übereinstimmen. Dies hilft, soziale Signale zu konsolidieren und verhindert Probleme mit doppeltem Inhalt. Verwenden Sie unseren Meta Tag Generator, um Konsistenz über alle Ihre Meta-Tags hinweg sicherzustellen.

Optionale Open Graph Tags

Über die vier erforderlichen Tags hinaus unterstützt Open Graph zahlreiche optionale Tags, die zusätzlichen Kontext bieten und verbessern, wie Ihr Inhalt auf Social Plattformen erscheint.

og:description

Eine kurze Beschreibung Ihres Inhalts. Diese erscheint unter dem Titel in den meisten Vorschaukarten.

Best Practices:

Beispiel:

<meta property="og:description" content="Lernen Sie bewährte E-Mail-Marketing-Strategien, die Top-Marketer verwenden, um über 40% Öffnungsraten zu erreichen. Enthält Vorlagen und echte Beispiele.">

og:site_name

Der Name Ihrer Website oder Marke. Dies erscheint getrennt vom Seitentitel und hilft bei der Markenerkennung.

Beispiel:

<meta property="og:site_name" content="SEO-IO">

og:locale

Die Sprache und regionale Formatierung Ihres Inhalts. Standard ist en_US, wenn nicht angegeben.

Beispiel:

<meta property="og:locale" content="de_DE">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">

Artikel-spezifische Tags

Bei Verwendung des og:type-Werts article können Sie zusätzliche Metadaten einschließen:

<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="E-Mail-Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">

Diese Tags helfen Plattformen, den Kontext Ihres Inhalts zu verstehen und können beeinflussen, wie er kategorisiert oder angezeigt wird.

Bild-Erweiterungs-Tags

Liefern Sie zusätzliche Informationen über Ihr OG Bild:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infografik mit E-Mail-Öffnungsraten-Statistiken">
<meta property="og:image:type" content="image/jpeg">

Das Einschließen von Breite und Höhe hilft Plattformen, Vorschauen schneller zu rendern, ohne das Bild zuerst herunterladen zu müssen. Der Alt-Text verbessert die Barrierefreiheit und bietet Fallback-Kontext.

Twitter Cards und X Plattform

Twitter (jetzt X) entwickelte sein eigenes Meta-Tag-System namens Twitter Cards, bevor Open Graph weit verbreitet wurde. Während Twitter Cards andere Tag-Namen verwenden, dienen sie demselben Zweck wie Open Graph Tags.

Die gute Nachricht: Twitter greift auf Open Graph Tags zurück, wenn Twitter Card Tags nicht vorhanden sind. Die Verwendung Twitter-spezifischer Tags gibt Ihnen jedoch mehr Kontrolle darüber, wie Ihr Inhalt auf der Plattform erscheint.

Twitter Card Typen

Twitter unterstützt mehrere Card-Typen, aber Sie werden hauptsächlich diese beiden verwenden:

Card-Typ Anwendungsfall Bildgröße
summary Standard-Card mit kleinem quadratischem Bild 1:1 Seitenverhältnis (z.B. 400×400)
summary_large_image Große Bild-Card (empfohlen für die meisten Inhalte) 2:1 Seitenverhältnis (z.B. 1200×600)
app Mobile App Promotion Variiert
player Video- oder Audio-Inhalte Variiert

Für die meisten Websites und Blogbeiträge verwenden Sie summary_large_

We use cookies for analytics. By continuing, you agree to our Privacy Policy.