Open Graph Tags: So steuerst du deine Link-Vorschau

Kurz gesagt: Open Graph Tags sagen sozialen Netzwerken und Chat-Apps, was beim Teilen deines Links angezeigt wird. Jede Seite braucht og:title, og:description, og:image und og:url, dazu twitter:card für X. Nutze eine absolute HTTPS-Bild-URL, etwa 1200 × 630 px, unter 5 MB, mit dem wichtigen Motiv in der Mitte. Gib die Tags im HTML aus, das dein Server sendet, und aktualisiere nach Änderungen die gecachte Vorschau jeder Plattform, denn alte Karten halten sich hartnäckig.

Eine Link-Vorschau ist oft der erste Eindruck von deiner Website. Eine Kollegin fügt deine Preisseite in Slack ein, ein Kunde teilt ein Produkt in WhatsApp, ein Partner postet deinen Artikel auf LinkedIn. Hat die Seite keine Open Graph Tags, raten die Apps: Der Text des Cookie-Banners wird zur Beschreibung, das Bild ist ein winziges Logo oder fehlt ganz, und der Titel ist der <title> der Seite, wie auch immer er lautet.

Dieser Leitfaden zeigt, was jeder Tag bewirkt, welche Plattform was liest, welche Bildgrößen überall funktionieren, warum sich Vorschauen nicht aktualisieren und wie unser kostenloser Open Graph Checker fehlende Tags findet, jeweils mit Lösung.

Was Open Graph ist

Laut ogp.me wurde das Open-Graph-Protokoll ursprünglich bei Facebook entwickelt („The Open Graph protocol was originally created at Facebook.“). Es macht aus einer Webseite ein „rich object“ mit Titel, Typ, Bild und URL, das andere Dienste anzeigen können. Facebook hat es entwickelt, doch LinkedIn, Slack und die meisten Messenger lesen dieselben Tags, und X nutzt sie als Fallback für die eigenen.

Die Tags sind gewöhnliche Meta-Elemente im <head> und werden mit dem Attribut property geschrieben:

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Die wichtigen Tags

Das Protokoll definiert vier Pflichteigenschaften: Titel, Typ, Bild und kanonische URL. In der Praxis sind auch einige optionale Tags wichtig.

Zwei Details der Spezifikation sind gut zu wissen. Erscheint ein Tag doppelt, gilt: „the first tag (from top to bottom) is given preference during conflicts“, das Tag aus dem Theme weiter oben schlägt also das Tag deines Plugins. Und strukturierte Eigenschaften wie og:image:width gehören zum og:image direkt darüber.

Wer was liest

Jede Plattform dokumentiert ihre eigenen Regeln. Das Wesentliche:

• Facebook und Meta-Apps. Metas Leitfaden für Webmaster nennt og:url, og:title, og:description, og:image und og:type. Bilder werden anhand der URL gecacht. Der Sharing Debugger zeigt, was der Crawler ausgelesen hat, und löst ein neues Auslesen aus.
• LinkedIn. Die Hilfeseite nennt vier Tags, die vorhanden sein „must exist“: og:title, og:image, og:description und og:url. Bilder brauchen mindestens 1200 × 627 px, ein Seitenverhältnis von 1,91:1 und höchstens 5 MB. Der Post Inspector zeigt, wie LinkedIn eine URL sieht, und aktualisiert die gespeicherte Kopie.
• X. X nutzt twitter:-Tags und greift auf die Open-Graph-Entsprechungen zurück, wenn sie fehlen; og:title, og:description und og:image genügen meist. twitter:card legt das Layout fest; summary_large_image zeigt ein breites Bild. X dokumentiert für diese Karte ein Seitenverhältnis von 2:1, mindestens 300 × 157 px, Dateien unter 5 MB sowie JPG, PNG, WebP oder GIF (kein SVG).
• Slack. Wenn keine App eine Domain verarbeitet, „crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata“ (Slack-Dokumentation).
• Google. Kein soziales Netzwerk, aber Google führt og:title unter den Quellen für Titellinks auf und berücksichtigt og:site_name bei der Wahl des Websitenamens über deinen Ergebnissen.

Das og:image auswählen

Das Bild entscheidet, ob eine Vorschau durchdacht oder kaputt wirkt. Die Anforderungen der Plattformen unterscheiden sich leicht, also wähle ein Bild, das alle erfüllt:

Nutze für wichtige Seiten ein eigenes Bild (Produktfoto, Artikelillustration) und für den Rest ein gut gestaltetes Standardbild. Ein Logo auf weißem Quadrat ist die schwächste Option: Die meisten Apps zeigen es klein oder schneiden es ungünstig zu.

Warum sich Vorschauen nicht aktualisieren

Plattformen speichern die Vorschau, die sie beim ersten Teilen einer URL erstellt haben. Meta schreibt: „Images are cached based on the URL and won't be updated unless the URL changes“, wenn du also share.jpg durch eine neue Datei mit gleichem Namen ersetzt, ändert sich möglicherweise nichts. So gehst du zuverlässig vor:

1. Lade das neue Bild unter einem neuen Dateinamen hoch (oder hänge einen Versionsparameter an die URL).
2. Aktualisiere die Tags auf der Seite und veröffentliche.
3. Gib die URL in Metas Sharing Debugger und LinkedIns Post Inspector ein, um ein erneutes Abrufen zu erzwingen.
4. Teile den Link erneut. Bereits veröffentlichte Beiträge behalten in der Regel die alte Karte.

Tags für verschiedene Seitentypen

Die Basis-Tags sind überall gleich, aber einige Seitentypen profitieren von mehr:

• Artikel und Blogbeiträge. Nutze og:type article. Das Protokoll definiert für diesen Typ zusätzliche Eigenschaften wie article:published_time, article:modified_time, article:author und article:section.
• Produktseiten. Nimm das Hauptproduktfoto als og:image und setze den Produktnamen, nicht den Shopnamen, in og:title. Preis und Verfügbarkeit gehören in strukturierte Product-Daten, die wir in unserem Schema-Markup-Leitfaden behandeln.
• Startseite und Kategorieseiten. Sie werden seltener geteilt, aber öfter gesehen. Ein gestaltetes Standardbild mit deinem Namen und einer kurzen Zeile dazu, was du machst, wirkt besser als ein zufälliges Foto.
• Seiten, die nicht geteilt werden sollen, etwa Checkout- oder Kontoseiten. Sie brauchen keine besonderen Tags; achte nur darauf, dass das Standardbild nicht auf etwas Privates verweist.

So siehst du, was ein Crawler sieht

Bevor du der Plattform die Schuld gibst, sieh dir das HTML an, das sie erhält. Öffne die Seite mit „Seitenquelltext anzeigen“ (nicht mit dem Element-Inspektor der DevTools, der die Seite nach der Ausführung von Skripten zeigt) und suche nach og:. Metas Leitfaden nennt außerdem den User-Agent seines Crawlers, facebookexternalhit/1.1, sodass du die Seite im Terminal so abrufen kannst wie Facebook:

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

Erscheinen die Tags in deinem Browser, aber nicht in dieser Ausgabe, werden sie per JavaScript hinzugefügt, oder dein Server oder deine Firewall beantwortet Bots anders.

So funktioniert der Searvia Open Graph Checker

Der kostenlose Open Graph Checker nutzt dieselbe Engine wie unser Website-SEO-Checker und stellt drei Prüfungen an den Anfang: Social-Sharing-Tags, Title-Tag und Meta-Description. Du gibst eine Domain oder eine Seitenadresse ein, und er:

1. Ruft genau diese Seite ab und folgt dabei Weiterleitungen. Gibst du nur eine Domain ein, wird die Startseite geprüft; füge also die Adresse eines Artikels oder einer Produktseite ein, um deren Vorschau zu prüfen.
2. Liest das vom Server gelieferte HTML ohne JavaScript auszuführen, so wie es die meisten Link-Preview-Crawler sehen.
3. Sucht vier Tags und erfasst jeweils den ersten nicht leeren Wert: og:title, og:description, og:image und twitter:card.

Das Ergebnis ist eine Tabelle mit Häkchen oder Kreuz und dem genauen Wert für jeden Tag:

Die Prüfung zeigt nie einen Fehler an und hat im Gesamtscore eine niedrige Priorität, denn fehlende Social-Tags verhindern nicht, dass eine Seite gefunden wird. Sie lassen aber jedes Teilen schlechter aussehen, weshalb dieses Tool sie zuerst zeigt.

Die Prüfungen von Titel und Beschreibung (bestanden bei 30 bis 60 bzw. 70 bis 160 Zeichen) folgen direkt darunter, weil viele Apps darauf zurückgreifen, wenn Open Graph Tags fehlen. Der Bericht enthält außerdem eine Google-Ergebnisvorschau, die für den Websitenamen og:site_name verwendet, wenn du es gesetzt hast.

Was der Checker nicht tut: Er lädt das Bild nicht herunter, um es zu vermessen, prüft weder og:url, og:type noch og:image:alt und ruft die Seite nicht als Crawler der jeweiligen Plattform ab. Für den letzten Blick nutzt du die Debugger der Plattformen.

So liest du die Ergebnisse

• Alle vier abgehakt: Die Grundlagen stehen. Sieh dir die Werte an und prüfe, ob sie sinnvoll sind: ein echter Titel, eine Beschreibung, die nicht der Cookie-Hinweis ist, eine Bild-URL, die mit https:// beginnt.
• og:image fehlt: Das behebst du zuerst. Es ist der Teil der Vorschau, den Leute am meisten bemerken.
• Nur twitter:card fehlt: X liest weiterhin deine Open Graph Tags, zeigt aber womöglich eine kleine Summary-Karte. Füge den Tag hinzu, um ein großes Bild zu erhalten.
• Warnungen zu Titel und Beschreibung darunter: Diese wirken sich auf Google und auf die Apps aus, die darauf zurückgreifen.

So behebst du jeden fehlenden Tag

og:title fehlt

Füge eine Überschrift hinzu, die für Menschen im Feed geschrieben ist, nicht für eine Suchmaschine. Sie kann deinem <title> ohne den Marken-Zusatz entsprechen:

<meta property="og:title" content="Waterproof Hiking Boots for Women">

og:description fehlt

Schreibe ein oder zwei Sätze mit einem konkreten Detail. Deine Meta-Description wiederzuverwenden ist in Ordnung:

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

og:image fehlt

1. Erstelle ein Bild mit 1200 × 630 px (JPG, PNG oder WebP), Motiv zentriert.
2. Lade es an einen öffentlichen Ort hoch und kopiere die vollständige HTTPS-URL.
3. Füge den Bild-Tag samt Maßen und Alt-Text hinzu:

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. Öffne die Bild-URL in einem privaten Browserfenster, um zu bestätigen, dass sie ohne Login lädt.

twitter:card fehlt

<meta name="twitter:card" content="summary_large_image">

Beachte das Attribut name: Twitter-Tags verwenden üblicherweise name, Open Graph Tags property.

Einstellungen der Plattformen

Führe nach jeder Änderung den Checker erneut aus, danach die Debugger der Plattformen.

Häufige Fehler

• Relative Bild-URLs. /images/share.jpg funktioniert im Browser, aber nicht für Crawler, die eine vollständige URL erwarten. Verwende immer https://….
• Per JavaScript eingefügte Tags. Single-Page-Apps, die Tags im Browser setzen, zeigen oft leere Vorschauen. Gib die Tags auf dem Server oder beim Build aus. Auch Google rät, JavaScript zu vermeiden, das Meta-Tags verändert.
• Das Bild ist blockiert. Eine Login-Wand, eine Bot-Schutzregel oder eine robots.txt-Zeile kann den Crawler daran hindern, das Bild abzurufen. LinkedIn weist darauf hin, dass eine Website „may be blocking us from pulling the image“.
• Ein Bild für alle Seiten. Das funktioniert, aber ein Produkt oder Artikel mit eigenem Bild erhält mehr Aufmerksamkeit.
• Doppelte Tags. Ein Theme und ein Plugin geben beide og:image aus: Das erste gewinnt, und das kann das falsche sein. Sieh dir den Quelltext an und suche nach og:image.
• Bild unter gleicher URL ersetzt. Caches behalten das alte. Verwende einen neuen Dateinamen.
• SVG oder riesige Dateien. Von X nicht unterstützt und für alle langsam.

Durchgespieltes Beispiel (hypothetisch)

Das Folgende ist ein hypothetisches Beispiel, keine echten Daten. Fernway, eine erfundene Projektmanagement-App, stellt fest, dass Links auf die eigene Website in Slack nur eine graue Box und den Text „We use cookies to improve your experience.“ zeigen.

Der Open Graph Checker zeigt og:title und og:description als vorhanden, og:image und twitter:card aber als fehlend. Der Wert der Beschreibung entpuppt sich als Text des Cookie-Banners: Ein Plugin erzeugt og:description aus dem ersten Absatz im HTML, und das Banner steht an erster Stelle.

Die Lösung: eine selbst geschriebene og:description im Seitentemplate, ein Bild mit 1200 × 630 px, das die Board-Ansicht des Produkts zeigt, Motiv zentriert, og:image:width, og:image:height und og:image:alt sowie twitter:card auf summary_large_image. Ein zweiter Durchlauf des Checkers besteht. Das Team gibt die URL anschließend in den Sharing Debugger und den Post Inspector ein und postet den Link erneut in Slack, wo die neue Karte erscheint.

Eine Checkliste für 15 Minuten

1. Lass den Open Graph Checker über deine Domain laufen.
2. Ergänze jeden fehlenden Tag von og:title, og:description, og:image und twitter:card.
3. Füge og:url, og:image:width, og:image:height und og:image:alt hinzu, solange du im Template bist.
4. Stelle sicher, dass das Bild 1200 × 630 px groß, unter 5 MB, öffentlich und über HTTPS erreichbar ist.
5. Gib die Tags im Server-HTML aus, nicht in clientseitigem JavaScript.
6. Aktualisiere die gecachten Vorschauen in den Debuggern der Plattformen und teile dann erneut.

So hält Searvia deine Vorschauen und Einträge in Form

Der kostenlose Open Graph Checker prüft eine Seite, deine Startseite oder jede eingegebene Adresse, in etwa 20 Sekunden und ohne Anmeldung, und derselbe Bericht deckt die anderen 37 Prüfungen unseres Website-Audits ab. Vorschauen sind nur ein Teil dessen, wie deine Seiten erscheinen; Titel, Beschreibungen und Canonicals behandelt unser Meta-Tags-Leitfaden, und der Meta-Tag-Checker zeigt deine Google-Vorschau.

Für die gesamte Website ergänzt ein kostenloses Searvia-Konto ein wöchentliches Site-Audit, das jede Seite crawlt und fehlende oder doppelte Titel und Beschreibungen markiert, damit der Text, auf den Apps zurückgreifen, korrekt bleibt. Bei einem schwachen Titel oder einer schwachen Beschreibung schlägt Write with AI im Audit fertige Optionen vor (1 Credit), und das Audit läuft jede Woche erneut, sodass ein Theme- oder Plugin-Update, das deine Titel oder Beschreibungen beschädigt, im nächsten Bericht auftaucht.