Open Graph & Twitter Cards: Social Previews

Von Christoph Hein · Head of SEO & Search Consultant · Aktualisiert Juni 2026

Wenn jemand deine URL auf Facebook, LinkedIn, WhatsApp, Slack, Discord oder X (Twitter) teilt, zeigt die Plattform nicht den rohen Link — sie rendert eine ansprechende „Link-Vorschaukarte" mit Titel, Beschreibung und einem großen Bild. Mit Open-Graph- und Twitter-Card-Meta-Tags entscheidest du, nicht die Plattform, genau, wie diese Karte aussieht. Dieser Leitfaden behandelt jeden wichtigen Tag, die entscheidenden Bildspezifikationen, wie die Fallback-Kette funktioniert und wie du alles vor dem Veröffentlichen validierst.

1. Was ist Open Graph?

Das Open-Graph-Protokoll (oft als „OG" abgekürzt) wurde 2010 von Facebook eingeführt, um jede Webseite in ein ansprechendes Objekt innerhalb eines sozialen Graphen zu verwandeln. In der Praxis ist es eine kleine Gruppe von <meta>-Tags im <head> deiner Seite, die die Seite beschreiben: ihren Titel, Typ, ein repräsentatives Bild und eine kanonische URL.

Wenn ein Link in eine Social-App eingefügt wird, ruft der Crawler dieser Plattform dein HTML ab, liest diese Tags und nutzt sie, um die Link-Vorschaukarte zu erstellen. Was als reiner Facebook-Standard begann, wird heute von nahezu jeder großen Plattform respektiert — LinkedIn, WhatsApp, Slack, Discord, iMessage, Pinterest und sogar X (das seine eigenen Twitter-Card-Tags obendrauf legt).

Ist Open Graph ein SEO-Faktor? Nicht direkt. Google hat wiederholt erklärt, dass OG-Tags kein Ranking-Signal sind. Allerdings sind sie eindeutig SEO-relevant: ansprechende Vorschaukarten sorgen für eine höhere Klickrate (CTR) aus Social Feeds, und die daraus resultierenden Shares, Klicks und Interaktionen erzeugen die Social Signals und den Referral-Traffic, die deine Sichtbarkeit, Markenautorität und dein Link-Earning-Potenzial indirekt unterstützen.

2. Warum es wichtig ist

Ohne Open-Graph-Tags müssen soziale Plattformen raten. Sie kratzen zusammen, was sie finden — ein beliebiges Bild auf der Seite, den ersten Absatz, den sie finden, oder gar nichts — und das Ergebnis ist oft eine hässliche, kaputte oder nicht markenkonforme Karte, die niemand anklickt. Wenn du deine Tags explizit definierst, erhältst du:

Kontrolliertes Branding: Du entscheidest über die exakte Überschrift, den Text und das Hero-Bild, die deinen Inhalt repräsentieren — nicht ein Algorithmus, der ein zufälliges Logo oder ein Sidebar-Thumbnail wählt.
Höhere Social-CTR: Ein großes, scharfes Bild mit einem prägnanten Titel nimmt im Feed weit mehr Platz ein als ein nackter Link und erhöht die Klickwahrscheinlichkeit dramatisch.
Einheitliche Vorschauen überall: Dieselben Tags erzeugen stimmige Karten auf Facebook, LinkedIn, WhatsApp, Slack und Discord, sodass deine Marke überall, wohin der Link gelangt, professionell aussieht.
Vertrauen und Klicksicherheit: Eine vollständige, professionelle Vorschau signalisiert Seriosität. Kaputte oder leere Karten lassen Nutzer zögern, einen unbekannten Link anzuklicken.

3. Essenzielle Open-Graph-Tags

Open-Graph-Tags verwenden das Attribut property (nicht name) und stehen im <head>. Die vier erforderlichen Properties sind og:title, og:type, og:image und og:url. Die übrigen werden für eine vollständige Karte dringend empfohlen.

og:title — Die Überschrift der Karte. Oft identisch mit deinem Title Tag, kann aber für Social statt für die Suche optimiert werden.
og:type — Die Art des Objekts, z. B. website, article, product oder video.movie. Verwende article für Blogbeiträge.
og:image — Das Vorschaubild. Der mit Abstand wichtigste Tag für visuelle Wirkung (siehe nächster Abschnitt).
og:url — Die kanonische URL der Seite. Sie bündelt alle Shares und Interaktionen auf eine Adresse, selbst wenn der Link mit Tracking-Parametern geteilt wird.
og:description — Eine kurze Zusammenfassung, die auf der Karte unter dem Titel angezeigt wird.
og:site_name — Der übergeordnete Name deiner Website (z. B. „Rank-O-Saur").
og:locale — Die Sprache/Region, z. B. en_US oder de_DE.

Hier ein vollständiges, korrekt aufgebautes <head>-Beispiel:

<head>
    <meta charset="UTF-8">
    <title>Beste Laufschuhe für Anfänger 2026 - ShoeStore</title>
    <meta name="description" content="Unser handverlesener Leitfaden zu den 10 besten Laufschuhen für Anfänger.">

    <!-- Open Graph -->
    <meta property="og:title" content="Beste Laufschuhe für Anfänger 2026">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://www.shoestore.com/blog/best-beginner-running-shoes">
    <meta property="og:image" content="https://www.shoestore.com/images/og/beginner-shoes-1200x630.jpg">
    <meta property="og:image:alt" content="Eine Reihe von zehn Laufschuhen für Anfänger auf einem Holzboden">
    <meta property="og:description" content="Wir haben über 40 Paare getestet, um die 10 besten Laufschuhe für Anfänger 2026 zu finden.">
    <meta property="og:site_name" content="ShoeStore">
    <meta property="og:locale" content="de_DE">
</head>

4. Das og:image — Spezifikationen & Best Practices

Das Bild ist es, das eine Karte das Scrollen stoppen lässt, daher verdient es besondere Aufmerksamkeit. Stimmen die Abmessungen nicht, können Plattformen es ungünstig zuschneiden, auf ein winziges Thumbnail verkleinern oder ganz überspringen.

Empfohlene Größe: 1200 × 630 Pixel. Das trifft das 1,91:1-Seitenverhältnis, das Facebook, LinkedIn und die große Twitter Card alle in voller Breite anzeigen.
Mindestgröße: mindestens 600 × 315. Alles, was auf einer Seite kleiner als 300 px ist, wird möglicherweise als kleines quadratisches Thumbnail statt als großes Banner gerendert.
Dateigröße: halte sie unter 5 MB (manche Crawler setzen die Grenze niedriger). Strebe ein gut komprimiertes JPG oder PNG an — große Dateien werden möglicherweise stillschweigend ignoriert.
Nur absolute URLs: der content muss eine vollständige https://-URL sein. Relative Pfade wie /images/og.jpg lassen sich für einen externen Crawler nicht auflösen.
Füge immer og:image:alt hinzu: eine reine Textbeschreibung des Bildes für Barrierefreiheit und für Plattformen, die Alt-Text anzeigen.
Halte wichtige Inhalte mittig: verschiedene Plattformen schneiden die Ränder unterschiedlich zu, platziere Text oder Logos also nicht direkt an den Kanten.

Profi-Tipp: Rank-O-Saur zeigt dir den Open-Graph-Titel, die Beschreibung und das Bild, die auf der aktuellen Seite erkannt wurden — plus den Twitter-Card-Typ — direkt im Panel an, sodass du deine Social Card vorschauen kannst, ohne den Browser zu verlassen oder den Link in einen Drittanbieter-Debugger einzufügen.

5. Twitter-(X-)Cards

X verwendet seine eigene Familie von twitter:-Tags (deklariert mit dem Attribut name), um Vorschauen feinabzustimmen. Der zentrale Tag ist twitter:card, der das Karten-Layout auswählt:

summary — Ein kleines quadratisches Thumbnail neben Titel und Beschreibung.
summary_large_image — Ein großes, formatfüllendes Bannerbild über dem Titel. Das ist es, was du für die meisten Artikel und Landingpages willst.
app und player — Spezialkarten für mobile Apps bzw. Audio-/Video-Player.

Die gute Nachricht: X greift für alles, was du nicht ausdrücklich festlegst, auf deine Open-Graph-Tags zurück. Wenn du also bereits og:title, og:description und og:image hast, musst du oft nur twitter:card (und optional twitter:site) hinzufügen, um eine großartige X-Card zu erhalten.

<!-- Twitter (X) Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@shoestore">
<meta name="twitter:title" content="Beste Laufschuhe für Anfänger 2026">
<meta name="twitter:description" content="Wir haben über 40 Paare getestet, um die 10 besten Laufschuhe für Anfänger 2026 zu finden.">
<meta name="twitter:image" content="https://www.shoestore.com/images/og/beginner-shoes-1200x630.jpg">
<meta name="twitter:image:alt" content="Eine Reihe von zehn Laufschuhen für Anfänger auf einem Holzboden">

6. Wie Tags zusammenspielen & Fallbacks

Plattformen lesen deine Tags in einer vorhersehbaren Reihenfolge der Priorität und greifen elegant zurück, wenn ein bevorzugter Tag fehlt. Wenn du diese Kette verstehst, vermeidest du, Tags zu duplizieren, die du nicht brauchst:

Plattformspezifische Tags gewinnen zuerst. Auf X überschreibt ein twitter:title den og:title. Setze diese nur, wenn X sich von überall sonst unterscheiden soll.
Open-Graph-Tags sind die universelle Ebene. Existiert kein plattformspezifischer Tag, verwendet die Plattform og:title, og:description und og:image. Diese werden von Facebook, LinkedIn, WhatsApp, Slack, Discord und X gleichermaßen respektiert.
Standard-HTML ist die letzte Instanz. Gibt es überhaupt keine OG-Tags, greifen Plattformen auf das <title>-Element und das <meta name="description"> zurück und versuchen, ein Bild aus dem Seitenkörper zu kratzen — mit unvorhersehbaren Ergebnissen.

Die praktische Erkenntnis: Definiere ein solides Set an Open-Graph-Tags als Fundament und füge dann nur die twitter:-Tags hinzu, die du wirklich zum Überschreiben brauchst.

7. Best Practices & Validierung

Mache jeden Tag pro Seite einzigartig. Genau wie Title Tags sollte jede URL ihren eigenen og:title, og:description und idealerweise ein maßgeschneidertes og:image haben. Ein einziges seitenweites Bild auf jeder Seite zu duplizieren, verschenkt den größten Vorteil des Formats.
Verwende absolute HTTPS-URLs sowohl für og:url als auch für og:image. Mixed-Content-Bilder (http) können auf sicheren Plattformen blockiert werden.
Beachte Längenbegrenzungen. Halte og:title bei rund 60 Zeichen und og:description bei rund 110–160 Zeichen, damit nichts mitten im Satz abgeschnitten wird.
Validiere und scrape erneut vor dem Launch. Plattformen cachen Vorschauen aggressiv. Nutze die offiziellen Debugger, um zu bestätigen, dass deine Karte korrekt rendert, und um einen frischen Abruf zu erzwingen:
- Facebook Sharing Debugger — zeigt die Karte in der Vorschau und bietet einen „Scrape Again"-Button, um Facebooks Cache zu leeren.
- LinkedIn Post Inspector — zeigt, wie LinkedIn den Link rendert, und aktualisiert seine gecachte Kopie.
Passe die Karte zur Seite. Die Vorschau sollte den Zielinhalt ehrlich widerspiegeln — irreführende Karten treiben die Absprungrate hoch und untergraben das Vertrauen.

Vorsicht: Soziale Plattformen cachen deine Link-Vorschau für Tage oder sogar Wochen. Wenn du ein og:image oder einen og:title aktualisierst, nachdem eine Seite bereits geteilt wurde, erscheint die alte Karte weiterhin, bis du über den Facebook Sharing Debugger oder LinkedIn Post Inspector eine Aktualisierung erzwingst. Scrape nach jeder Änderung an deinen Social Tags immer erneut.

8. Häufige Fehler, die du vermeiden solltest

Relative Bild-URLs: content="/og.jpg" lässt sich für einen externen Crawler nicht auflösen. Verwende immer den vollständigen Pfad https://www.example.com/og.jpg.
og:image komplett fehlend: eine Karte ohne Bild ist eine Karte, die fast niemand anklickt. Es ist der Tag mit der größten Wirkung, veröffentliche also nie eine teilbare Seite ohne eines.
Titel passt nicht zum Inhalt: ein Clickbait-og:title, den die Seite nicht einhält, treibt Absprünge hoch und schadet der Glaubwürdigkeit.
Gecachte alte Vorschauen: vergisst du nach einer Aktualisierung das erneute Scrapen, sehen alle weiterhin deine veraltete Überschrift oder dein veraltetes Bild.
name statt property für OG-Tags verwenden: Open Graph erfordert property="og:...". Twitter-Tags verwenden name="twitter:...". Verwechselst du sie, werden die Tags stillschweigend ignoriert.
Falsche Bildabmessungen: ein Bild, das zu klein oder seltsam geformt ist, wird auf ein winziges Thumbnail statt auf ein formatfüllendes Banner zugeschnitten.

Über den Autor

Christoph Hein

Head of SEO bei der Popken Fashion Group & unabhängiger Search Consultant

Christoph ist seit über 10 Jahren im Search-Bereich tätig und steuert derzeit die organische Strategie für 5 Modemarken in 13 Ländern und über 30 Domains. Neben seiner Inhouse- und Beratungstätigkeit hat er Nischen-Content-Portale wie Angelmagazin.de und BaristaCompass.com gegründet und die Rank-O-Saur-Extension entwickelt, um technische SEO-Audits mühelos zu machen. Jeder Leitfaden hier basiert auf praktischer, datengetriebener Erfahrung statt auf Theorie.

christophhein.com ↗ LinkedIn ↗