Open-Graph-Tags: So sieht Ihr Link in WhatsApp und LinkedIn gut aus
Wer einen Link in WhatsApp, LinkedIn oder Facebook teilt, sieht sofort eine Vorschau mit Titel, Text und Bild. Was dort erscheint, steuern Open-Graph-Tags im Quelltext. Wir zeigen, welche Tags Sie brauchen, wie groß das Vorschaubild sein sollte und wie Sie die Vorschau testen.
Inhaltsverzeichnis
- Was sind Open-Graph-Tags?
- Die wichtigsten Tags im Überblick
- Das Vorschaubild: Größe, Format und Gestaltung
- Titel und Beschreibung für die Vorschau
- Open-Graph-Tags in WordPress einrichten
- Vorschau testen und Zwischenspeicher leeren
- Häufige Fehler und ihre Ursachen
- Haben Open-Graph-Tags Einfluss auf Google?
- Checkliste: Open-Graph-Tags
- Häufige Fragen
- Open-Graph-Tags sind Meta-Angaben im Kopfbereich einer Seite. Sie legen fest, welcher Titel, welcher Text und welches Bild erscheinen, wenn jemand den Link teilt.
- Pflicht nach der Spezifikation sind og:title, og:type, og:image und og:url; og:description und og:site_name sind dringend zu empfehlen.
- Ein Vorschaubild mit 1.200 × 630 Pixeln (Seitenverhältnis etwa 1,91:1) passt laut Meta am besten; für WhatsApp sollte die Datei unter 600 KB bleiben.
- In WordPress übernehmen meist SEO-Plugins die Ausgabe. Wichtig ist, doppelte Tags von Theme und Plugin zu vermeiden.
- Plattformen speichern Vorschauen zwischen. Nach Änderungen helfen der Sharing Debugger von Meta, der Post Inspector von LinkedIn und notfalls ein neuer Bild-Dateiname.
Ein Kunde empfiehlt Ihren Betrieb in der Nachbarschafts-Gruppe, eine Mitarbeiterin teilt Ihre Stellenanzeige auf LinkedIn, Sie selbst schicken einem Interessenten den Link zur Leistungsseite per WhatsApp. In allen drei Fällen entscheidet die kleine Vorschau-Karte darüber, ob jemand klickt. Zeigt sie ein passendes Foto und einen klaren Titel, wirkt der Link vertrauenswürdig. Zeigt sie das Cookie-Symbol, ein abgeschnittenes Logo oder gar kein Bild, wirkt er eher wie Werbung oder ein Versehen.
Steuern lässt sich diese Vorschau mit wenigen Zeilen im Quelltext: den Open-Graph-Tags. Dieser Leitfaden erklärt, welche Angaben nötig sind, was die großen Plattformen verlangen und wie Sie Fehler finden.
Was sind Open-Graph-Tags?
Open Graph ist ein offenes Protokoll, mit dem eine Webseite sich selbst beschreibt. Die Angaben stehen als <meta>-Elemente im unsichtbaren Kopfbereich (<head>) der Seite. Sobald jemand einen Link in einem sozialen Netzwerk oder Messenger einfügt, ruft ein Programm der Plattform die Seite ab, liest diese Tags aus und baut daraus die Vorschau.
Fehlen die Tags, muss die Plattform raten. Meta schreibt in seiner Dokumentation ausdrücklich, dass der Crawler ohne Open-Graph-Angaben Titel, Beschreibung und Bild selbst zu ermitteln versucht. Das Ergebnis ist oft zufällig: das erste Bild im Quelltext, ein Ausschnitt aus dem Cookie-Hinweis oder die Navigation als Beschreibung.
Ausgewertet werden Open-Graph-Tags unter anderem von Facebook, LinkedIn und WhatsApp. Auch viele andere Messenger und Kollaborationstools greifen darauf zurück. X (ehemals Twitter) nutzt eigene Tags, kann aber teilweise auf Open Graph zurückfallen.
Wie Ihre Seite im Google-Suchergebnis erscheint, steuern vor allem Title-Tag und Meta-Description. Die Open-Graph-Tags sind für die Vorschau beim Teilen zuständig. Beide dürfen ähnlich lauten, verfolgen aber unterschiedliche Ziele. Mehr zum Suchergebnis lesen Sie im Beitrag Title-Tag und Meta-Description schreiben.
Die wichtigsten Tags im Überblick
Die Spezifikation auf ogp.me nennt vier Pflichtangaben für jede Seite. Dazu kommen einige optionale Tags, die in der Praxis fast immer sinnvoll sind.
| Tag | Inhalt | Einordnung |
|---|---|---|
og:title | Titel der Seite, wie er in der Vorschau erscheinen soll | Pflicht |
og:type | Art des Inhalts, meist website, für Ratgeber und News article | Pflicht |
og:image | Absolute URL des Vorschaubilds | Pflicht |
og:url | Kanonische Adresse der Seite, ohne Tracking-Parameter | Pflicht |
og:description | Ein bis zwei Sätze zum Inhalt | Empfohlen |
og:site_name | Name der Website bzw. des Unternehmens | Empfohlen |
og:locale | Sprache und Region, z. B. de_DE (Standard laut Spezifikation: en_US) | Optional |
og:image:width, og:image:height | Bildmaße in Pixeln | Empfohlen |
og:image:alt | Beschreibung des Bildinhalts | Empfohlen |
twitter:card | Kartentyp für X, z. B. summary_large_image | Optional |
Für die Leistungsseite eines Elektrikers könnte der Kopfbereich so aussehen:
<meta property="og:type" content="website">
<meta property="og:title" content="Wallbox installieren lassen – Elektro Muster, Waiblingen">
<meta property="og:description" content="Beratung, Anmeldung beim Netzbetreiber und Montage aus einer Hand.">
<meta property="og:url" content="https://www.elektro-muster.de/wallbox/">
<meta property="og:image" content="https://www.elektro-muster.de/bilder/wallbox-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Elektriker montiert eine Wallbox an der Garagenwand">
<meta property="og:site_name" content="Elektro Muster">
<meta property="og:locale" content="de_DE">
Die Angaben zu Breite und Höhe sind kein Selbstzweck: Meta schreibt, dass der Crawler das Bild damit schon beim ersten Teilen korrekt darstellen kann, statt es erst herunterladen und auswerten zu müssen.
Das Vorschaubild: Größe, Format und Gestaltung
Das Bild ist der auffälligste Teil der Vorschau – und der häufigste Grund für schlechte Ergebnisse. Die Plattformen nennen unterschiedliche Grenzwerte. Die folgende Übersicht fasst die offiziellen Angaben zusammen (Stand November 2026):
| Plattform | Größe und Seitenverhältnis | Dateigröße und Format |
|---|---|---|
| Facebook (Meta) | Empfohlen mindestens 1.200 × 630 px; für große Vorschauen mindestens 600 × 315 px; absolutes Minimum 200 × 200 px; Verhältnis etwa 1,91:1 | Höchstens 8 MB; JPEG, PNG oder GIF |
| Mindestens 300 px breit; Verhältnis Breite zu Höhe höchstens 4:1 | Unter 600 KB; absolute URL | |
| X | Großes Bild über summary_large_image | Unter 5 MB; JPG, PNG, WEBP oder GIF, kein SVG |
Daraus ergibt sich eine einfache Faustregel, die auf allen großen Plattformen funktioniert: 1.200 × 630 Pixel, JPG oder PNG, Dateigröße unter 600 KB. Ein gut komprimiertes JPG in dieser Größe liegt meist deutlich darunter. Wie Sie Bilder verlustarm verkleinern, erklären wir im Beitrag Bilder für die Website.
Was auf das Bild gehört
- Ein echtes Motiv: Ihr Team, ein fertiges Projekt, Ihr Fahrzeug vor einer Baustelle. Ein Foto aus Ihrem Betrieb wird im Chatverlauf eher als echt wahrgenommen als ein Stockbild.
- Wichtiges in die Mitte: Je nach Plattform und Ansicht wird das Bild beschnitten. Logo oder Schriftzug am Rand sind dann schnell abgeschnitten.
- Wenig oder großer Text: Auf dem Smartphone ist die Vorschau oft nur wenige Zentimeter breit. Kleine Schrift im Bild ist dort nicht lesbar.
- Kein reines Logo auf Weiß: Es funktioniert als Notlösung, wirkt aber austauschbar. Besser ist ein eigenes Standardbild mit Foto und dezentem Logo.
Legen Sie ein allgemeines Vorschaubild für die ganze Website fest und ergänzen Sie eigene Bilder nur für die Seiten, die oft geteilt werden: Startseite, wichtige Leistungen, Stellenanzeigen, Ratgeber. So hat jede Seite eine ordentliche Vorschau, ohne dass Sie für 80 Unterseiten Grafiken bauen müssen.
Titel und Beschreibung für die Vorschau
Für og:title und og:description gibt es keine feste Zeichengrenze in der Spezifikation. WhatsApp nennt in seiner Entwicklerdokumentation aber konkrete Anzeigegrenzen: Der Titel wird in höchstens zwei Zeilen dargestellt, die Beschreibung in ein bis zwei Zeilen; rund 80 Zeichen reichen dort laut WhatsApp aus. Was darüber hinausgeht, wird abgeschnitten.
Beim Formulieren hilft der Gedanke, wo die Vorschau erscheint: im Chat zwischen zwei Menschen, im Feed zwischen privaten Beiträgen. Suchbegriffe aneinanderzureihen bringt dort nichts. Gut funktionieren:
- Titel: Leistung und Absender, z. B. „Dachfenster tauschen – Dachdeckerei Muster“ oder bei Stellenanzeigen „Wir suchen: Anlagenmechaniker SHK (m/w/d)“.
- Beschreibung: ein konkreter Nutzen in einem Satz, z. B. „Austausch an einem Tag, inklusive Innenverkleidung und Entsorgung“.
Viele SEO-Plugins übernehmen automatisch Seitentitel und Meta-Description, wenn Sie nichts Eigenes eintragen. Das ist eine brauchbare Grundlage. Für Seiten, die regelmäßig geteilt werden, lohnt sich aber ein eigener, persönlicherer Text.
Open-Graph-Tags in WordPress einrichten
WordPress selbst gibt in der Standardinstallation keine vollständigen Open-Graph-Tags aus. Das übernehmen in der Regel SEO-Plugins wie Yoast SEO, Rank Math oder All in One SEO; manche Themes und Page-Builder bringen eigene Lösungen mit. So gehen Sie vor:
- Zuständigkeit klärenPrüfen Sie, welches Plugin oder Theme die Tags ausgibt. Rufen Sie dazu eine Seite auf, öffnen Sie den Quelltext und suchen Sie nach
og:. - Doppelte Ausgabe abschaltenErscheinen
og:titleoderog:imagemehrfach, geben zwei Komponenten Tags aus. Deaktivieren Sie die Funktion in einer davon, damit die Plattformen nicht das falsche Bild wählen. - Standardbild hinterlegenIn den Einstellungen des SEO-Plugins gibt es meist einen Bereich für soziale Netzwerke. Dort legen Sie das Standard-Vorschaubild und den Namen der Website fest.
- Wichtige Seiten einzeln pflegenIm Editor der jeweiligen Seite finden Sie bei den Plugin-Einstellungen meist einen Reiter für soziale Medien. Dort tragen Sie eigenen Titel, Beschreibung und Bild ein.
- Ergebnis prüfenTesten Sie jede geänderte Seite mit den Prüfwerkzeugen der Plattformen, wie im nächsten Abschnitt beschrieben.
Wir richten Plugins, Standardbilder und Vorlagen so ein, dass jede Seite beim Teilen ordentlich aussieht.
Vorschau testen und Zwischenspeicher leeren
Die Plattformen rufen eine Seite nicht bei jedem Teilen neu ab, sondern speichern die Vorschau zwischen. Wer Tags ändert und den Link sofort erneut teilt, sieht deshalb oft noch die alte Version.
- Facebook und Instagram: Der Sharing Debugger von Meta zeigt, welche Tags der Crawler gelesen hat, meldet Fehler und löst einen neuen Abruf aus. Laut Meta werden Bilder anhand ihrer URL zwischengespeichert. Ein geändertes Bild unter derselben Adresse erscheint deshalb unter Umständen nicht. Abhilfe schafft ein neuer Dateiname.
- LinkedIn: Der Post Inspector zeigt die Vorschau an und ruft die Seite neu ab.
- WhatsApp: Ein offizielles Prüfwerkzeug gibt es für Website-Betreiber nicht. Senden Sie den Link an sich selbst oder an einen Kollegen und prüfen Sie das Ergebnis auf iPhone und Android.
Bereits gesendete Nachrichten ändern ihre Vorschau übrigens nicht nachträglich. Die Korrektur wirkt nur für Links, die nach dem neuen Abruf geteilt werden.
Häufige Fehler und ihre Ursachen
Bei Prüfungen von Firmenwebsites sehen wir immer wieder dieselben Muster:
- Kein og:image gesetzt: Die Plattform nimmt irgendein Bild von der Seite, oft ein Symbol oder ein Logo in Briefmarkengröße.
- Relative Bildadresse:
/bilder/vorschau.jpgstatt der vollständigen URL. WhatsApp verlangt laut Dokumentation eine absolute Adresse. - Bild zu groß: Ein unkomprimiertes Foto mit mehreren Megabyte überschreitet die Grenze von WhatsApp, dort erscheint dann nur eine kleine Vorschau oder keine.
- Kopfbereich zu weit unten: WhatsApp liest laut Meta nur die ersten 300 KB des HTML-Codes. Stehen davor große eingebettete Skripte oder Styles, werden die Tags nicht gefunden.
- Testumgebung in og:url: Nach einem Relaunch zeigen Tags manchmal noch auf die Entwicklungsadresse oder auf
http://statthttps://. - Bild gesperrt: Liegt das Vorschaubild hinter einem Passwortschutz oder blockiert eine Sicherheitslösung fremde Crawler, kann die Plattform es nicht laden.
- Doppelte Tags: Theme und Plugin geben je ein
og:imageaus – welches gewählt wird, ist dann Zufall.
Das Vorschaubild wird beim Teilen auf fremden Plattformen angezeigt. Verwenden Sie deshalb nur Bilder, deren Nutzungsrechte das abdecken – insbesondere bei Stockfotos und Fotos von Mitarbeitenden. Im Zweifel prüfen Sie die Lizenz oder holen eine Einwilligung ein; dieser Hinweis ersetzt keine Rechtsberatung.
Haben Open-Graph-Tags Einfluss auf Google?
Google nennt Open-Graph-Tags in seiner Dokumentation nicht als Rankingfaktor. An einer Stelle werden sie aber ausgewertet: Für den Websitenamen, der im Suchergebnis über dem Titel steht, berücksichtigt Google laut Search Central unter anderem den Inhalt von og:site_name – neben strukturierten Daten vom Typ WebSite, dem Seitentitel und Überschriften der Startseite. Ein einheitlicher Name an allen diesen Stellen hilft also, dass Google den richtigen Namen anzeigt.
Der größere Nutzen liegt außerhalb der Suchmaschine: Empfehlungen per Messenger sind für viele Handwerksbetriebe und Dienstleister ein wichtiger Anfrageweg. Eine saubere Vorschau macht diese Empfehlungen glaubwürdiger. Wer über Kanäle wie WhatsApp mit Kunden kommuniziert, findet im Beitrag zu WhatsApp Business weitere Hinweise.
Checkliste: Open-Graph-Tags
- Jede Seite gibt
og:title,og:type,og:imageundog:urlaus. og:descriptionundog:site_namesind gesetzt, der Name ist überall gleich geschrieben.- Es gibt ein Standard-Vorschaubild mit 1.200 × 630 Pixeln, unter 600 KB.
- Wichtige Seiten haben ein eigenes Bild mit echtem Motiv, Wichtiges steht in der Bildmitte.
- Bildadressen sind absolut und mit
https://angegeben. - Kein Tag erscheint doppelt im Quelltext.
og:urlzeigt auf die Live-Adresse ohne Parameter.- Die Vorschau ist mit dem Sharing Debugger, dem Post Inspector und per WhatsApp getestet.
- Nach Bildwechseln wurde ein neuer Dateiname verwendet.
Häufige Fragen
Was passiert, wenn ich gar keine Open-Graph-Tags setze?
Der Link lässt sich trotzdem teilen. Die Plattformen versuchen dann, Titel, Beschreibung und Bild selbst aus der Seite zu ermitteln. Häufig landet dabei der normale Seitentitel in der Vorschau, als Beschreibung ein zufälliger Textausschnitt und als Bild ein Logo, Symbol oder gar nichts. Bei WhatsApp entsteht oft nur eine kleine Vorschau ohne Bild. Für eine kontrollierte Darstellung sollten zumindest die vier Pflicht-Tags gesetzt sein.
Brauche ich für X (Twitter) eigene Tags?
Nicht zwingend. X schreibt in seiner Dokumentation, dass eine kleine Vorschau-Karte erscheinen kann, wenn og:type, og:title und og:description vorhanden sind, aber kein twitter:card-Tag. Für die große Variante mit breitem Bild ergänzen Sie das Tag twitter:card mit dem Wert summary_large_image. Titel, Beschreibung und Bild übernimmt X in der Regel aus den Open-Graph-Angaben, eigene twitter:-Tags sind nur nötig, wenn Sie dort etwas anderes zeigen möchten.
Dürfen Text und Logo auf dem Vorschaubild stehen?
Ja, solange das Bild auch klein noch funktioniert. Ein kurzer Schriftzug wie „Jetzt bewerben“ oder Ihr Logo in einer Ecke sind unproblematisch. Vermeiden Sie lange Sätze, kleine Schrift und wichtige Elemente am Bildrand, weil die Vorschau auf vielen Geräten nur wenige Zentimeter breit ist und je nach Ansicht beschnitten wird. Ein klares Foto mit wenig Text ist meist die beste Wahl.
Kann ich Open-Graph-Tags auch ohne Plugin setzen?
Ja. Die Tags sind normale Meta-Elemente im Kopfbereich und lassen sich direkt im Theme-Template oder über einen eigenen Code-Baustein ausgeben. Bei statischen Seiten trägt man sie einfach in das HTML ein. In WordPress ist ein SEO-Plugin aber meist bequemer, weil es Titel und Bild für jede Seite automatisch befüllt und Eingabefelder im Editor bietet. Wichtig ist nur, dass am Ende genau eine Quelle die Tags ausgibt.
Quellen
- The Open Graph protocol (Spezifikation) – Pflicht- und optionale Tags, og:image-Eigenschaften
- Meta for Developers: A Guide to Sharing for Webmasters – Crawler, Sharing Debugger, Bild-Caching
- Meta for Developers: Images in Link Shares – Empfohlene Bildgrößen und Dateigröße
- WhatsApp Business Platform: Link Previews – Anforderungen an Bild, Titel und HTML-Kopf
- X Developer Platform: Cards markup – twitter:card-Werte, Bildformate, Rückfall auf Open Graph
- Google Search Central: Websitenamen in der Google Suche – og:site_name als Signal für den Websitenamen
Sebastian Neufeld verantwortet bei NEUZEITWERBER SEO und die technische Umsetzung – von Ladezeit und Indexierung bis zur Sichtbarkeit in KI-Suchen.
