Open-Graph-Meta-Tags: der komplette Guide für Social-Link-Vorschauen
Open-Graph-Meta-Tags sind <meta property="og:…">-Tags, die Sie in den <head> einer HTML-Seite setzen. Sie steuern Titel, Beschreibung und Bild, die erscheinen, wenn jemand Ihren Link auf Facebook, LinkedIn, Slack, Discord, WhatsApp und den meisten anderen Plattformen teilt. Einmal definiert, rendert fast jedes Netzwerk eine vollständige Vorschau statt einer nackten URL. X (Twitter) liest seine eigenen Twitter-Card-Tags, greift aber auf Ihre Open-Graph-Tags zurück, wenn das passende Tag fehlt. Ein einziger sauber gebauter Satz Tags deckt damit fast jede Plattform ab, auf der ein Link geteilt werden kann.
Dieses eine Protokoll macht den Unterschied zwischen einem Link, der eine Überschrift, eine Zusammenfassung und ein gestochen scharfes 1200×630-Bild zeigt, und einer nackten Adresse, die niemand anklickt.
Dieser Guide geht den kompletten Satz Meta-Tags für Social Sharing durch: die vier Pflicht-Open-Graph-Tags, die Größenregeln für og:image, den Twitter-Card-Fallback, wie jede Plattform Vorschauen rendert und cacht, die Fehler, die geteilte Links leer lassen, und wie Sie das Ergebnis nach dem Deploy debuggen.
Was sind Open-Graph-Meta-Tags?
Open Graph ist ein offenes Protokoll, ursprünglich bei Facebook entstanden und auf ogp.me dokumentiert, mit dem sich jede Webseite als vollwertiges Objekt beschreiben kann. Statt zu raten, worum es bei Ihrem Link geht, liest eine Plattform eine Handvoll Tags und macht daraus eine Vorschaukarte.
Die Syntax ist ein schlichtes HTML-Meta-Tag mit einem property-Attribut und einem content-Wert, platziert im <head> des Dokuments:
<meta property="og:title" content="How Open Graph Tags Work">Achten Sie auf das property-Attribut. Klassische HTML-Meta-Tags für SEO (die Meta-Description, robots, viewport) verwenden name. Open Graph verwendet property, und Twitter Card wiederum name. Das Attribut richtig zu setzen ist entscheidend; ein Crawler, der property="og:title" erwartet, liest kein name="og:title".
Fast jede Plattform, die aus einem Link eine Karte macht, liest Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest und Telegram sprechen es alle. X ist die bemerkenswerte Ausnahme. Es bevorzugt seine eigenen twitter:*-Tags, greift aber für alles, was es nicht findet, auf Ihre og:*-Tags zurück, sodass Sie sie selten duplizieren müssen.
Open Graph steht neben den klassischen SEO-Meta-Tags, ersetzt sie aber nicht. Der <title> und der Canonical-Link treiben weiterhin die Suche; die Meta-Description prägt weiterhin Ihr Such-Snippet. Open-Graph-Tags berühren keine Rankings; sie gehören zur Social-Karte. Ein vollständiger <head> trägt meist alle drei Familien zusammen.
Diese von Hand zu schreiben ist repetitiv und leicht auf subtile Weise falsch zu machen. Der Open Graph & Meta-Tag-Generator baut den ganzen Block aus einem kurzen Formular, zeigt ihn live in der Vorschau und hält die kniffligen Details (Attributnamen, absolute URLs, Bildabmessungen) konsistent, damit Sie sie sich nicht merken müssen.
Die zentralen Open-Graph-Tags, die Sie wirklich brauchen
Open Graph definiert Dutzende Properties, aber ein guter geteilter Link braucht nur eine Handvoll. Beginnen Sie mit den vier Pflicht-Tags, ergänzen Sie eine Beschreibung, und für die meisten Seiten hören Sie dort auf.
Die vier Pflicht-Tags: og:title, og:type, og:image, og:url
Vier Tags sind laut Protokoll Pflicht. Fehlt eines, verwerfen Plattformen entweder die Karte oder füllen sie mit einer schlechten Vermutung.
<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">og:title ist die fette Überschrift auf der Karte. og:type klassifiziert das Objekt (mehr dazu weiter unten). og:image ist das Vorschaubild und muss eine absolute HTTPS-URL sein. og:url ist die kanonische Adresse der Seite, mit der Plattformen geteilte Links deduplizieren und Engagement zusammenfassen.
og:description und wie es sich von der SEO-Meta-Description unterscheidet
og:description ist die kurze Zusammenfassung, die unter dem Titel auf einer Share-Karte steht:
<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">Es ist ein anderes Tag als die SEO-<meta name="description"> und bedient einen anderen Leser. Die Meta-Description konkurriert um Klicks auf einer Google-Ergebnisseite und wird an etwa 155 Zeichen gemessen. Die Open-Graph-Beschreibung wird auf einer Social-Karte gelesen, wo der Platz knapper ist und der erste Satz das Gewicht trägt. Lassen Sie og:description weg, greifen die meisten Plattformen auf Ihre Meta-Description zurück, sodass Sie es oft überspringen können. Schreiben Sie nur dann eine eigene, wenn der Social-Aufhänger sich vom Such-Snippet unterscheiden soll.
og:type und was es freischaltet
og:type sagt Plattformen, was für ein Ding Ihre Seite ist. Die gängigen Werte sind website, article, product und profile. Eine Homepage oder Landingpage ist eine website; ein Blogbeitrag ist ein article.
Die Wahl von article schaltet zusätzliche Properties und Funktionen frei, die ein schlichter website-Typ nicht nutzen kann:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">Diese article:*-Tags speisen Veröffentlichungsdaten und Autorenzeilen in Karten ein und qualifizieren die Seite für Pinterest Rich Pins, die strukturierte Daten direkt aus Ihrem Open-Graph-Markup ziehen. Setzen Sie og:type bei Beiträgen auf article und sonst überall auf website, dann folgen die passenden Felder.
Hier eine Referenz für die Tags, die die meisten Seiten tatsächlich verwenden:
| Tag | Was es steuert | Beispielwert |
|---|---|---|
og:title | Überschrift auf der Karte | How Open Graph Tags Work |
og:type | Objekttyp: website, article, product, profile | article |
og:image | Vorschaubild (absolute HTTPS-URL) | https://example.com/og/cover.png |
og:url | Kanonische URL der Seite | https://example.com/open-graph-guide |
og:description | Zusammenfassung unter dem Titel | A practical guide to social meta tags. |
og:site_name | Name der gesamten Website | Example |
og:locale | Sprache und Region des Inhalts | en_US |
og:image – Größen, Seitenverhältnis und die Regeln, die geteilte Links zerbrechen
Das Bild ist der Teil einer Vorschau, den Menschen zuerst sehen, und genau hier scheitern die meisten geteilten Links. Bringen Sie Größe und Format von og:image richtig hin, und eine einzige Datei funktioniert überall.
Der universelle Standard 1200×630 (1.91:1)
Die empfohlene og:image-Größe ist 1200×630 Pixel, ein Seitenverhältnis von 1.91:1. Dieses eine Bild rendert korrekt auf Facebook, LinkedIn, Slack, Discord und in der summary_large_image-Karte von X, sodass Sie keine unterschiedliche Datei pro Plattform brauchen.
Auch Mindestgrößen sind wichtig. Facebook ignoriert jedes Bild kleiner als 200×200 und zeigt für alles unter 600×315 ein gequetschtes quadratisches Thumbnail. Unter 1200 Pixel Breite beginnen große Karten unscharf zu wirken. Zielen Sie auf 1200×630, und Sie überspringen jede Schwelle auf einmal.
Warum og:image:width und og:image:height wichtig sind
Wenn eine Plattform Ihrem Link zum ersten Mal begegnet, hat sie das Bild noch nicht heruntergeladen; sie holt es asynchron. Deklarieren Sie die Abmessungen vorab, kann die Plattform den richtigen Platz reservieren und die Karte sofort layouten:
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">Lassen Sie diese weg, kann der allererste geteilte Link einer Seite leer rendern, während der Crawler aufholt. Fügen Sie sie hinzu, ist die Karte beim ersten Einfügen korrekt. Das og:image:alt-Tag beschreibt das Bild für Screenreader auf Plattformen, die es unterstützen.
Dateiformat und Größe
Verwenden Sie JPG oder PNG. Beide dekodieren zuverlässig über jeden Crawler hinweg, was der ganze Sinn eines og:image ist: Es muss auf Servern rendern, die Sie nicht kontrollieren. Halten Sie die Datei als Faustregel unter 1 MB und unter 300 KB für WhatsApp, das strenger ist als der Rest. Ist Ihr Export schwerer, jagen Sie ihn durch den Bildkomprimierer, um ihn unter 1 MB zu drücken, ohne die Qualität sichtbar zu beeinträchtigen.
Es ist verlockend, hier zu einem modernen Format zu greifen, aber genau hier sollten Sie widerstehen. Neuere Formate sparen Bytes für Browser, doch manche Social-Crawler dekodieren sie inkonsistent, sodass ein WebP- oder AVIF-og:image auf einer Plattform, die es nicht lesen kann, leer zurückkommt. Die Abwägungen behandelt der WebP-vs-AVIF-vs-JPEG-Guide; für Share-Bilder speziell bleiben Sie bei JPG oder PNG. Da Plattformen die Ränder unterschiedlich beschneiden, halten Sie Logo und Überschrift in einer zentrierten 1080×600-Sicherheitszone, damit nichts Wichtiges abgeschnitten wird.
Die Regel der absoluten HTTPS-URL
og:image und og:url müssen vollständige https://…-URLs sein, keine relativen Pfade. Ein Pfad wie /cover.png löst sich in Ihrem Editor und auf Ihrer Live-Seite problemlos auf, aber ein Crawler, der Ihre URL abruft, hat keine Basis, um ihn aufzulösen, sodass der geteilte Link leer zurückkommt. Das Bild muss außerdem öffentlich erreichbar sein: Blockiert robots.txt den Crawler oder liegt die Datei hinter einer Authentifizierung, bleibt die Vorschau leer.
Eine weitere Einschränkung entscheidet über alles Obige: Crawler führen kein JavaScript aus. Facebook, LinkedIn, WhatsApp, Telegram und Discord holen Ihr rohes HTML und lesen, was dort steht. Tags, die ein Framework nach dem Seitenaufbau clientseitig einfügt, sind für sie unsichtbar. Ihre Open-Graph-Tags müssen also in serverseitig gerendertem oder statischem HTML stehen.
Twitter/X-Cards: ein Tag, dann Rückgriff auf Open Graph
X verwendet seine eigenen Twitter-Card-Meta-Tags, aber die Überschneidung mit Open Graph bedeutet, dass Sie weit weniger schreiben, als Sie erwarten würden. In der Praxis fügen Sie ein Tag hinzu und lassen den Rest zurückfallen.
twitter:card ist das einzige Pflicht-Twitter-Tag
X rendert überhaupt keine Karte, solange twitter:card nicht vorhanden ist, selbst wenn Sie einen vollständigen Satz Open-Graph-Tags haben. Es ist das einzige Pflicht-Twitter-Card-Tag:
<meta name="twitter:card" content="summary_large_image">Der Wert wählt das Layout. summary_large_image liefert die große Banner-Karte, gebaut für ein 1200×630-Bild. summary liefert eine kompakte Karte mit einem kleinen quadratischen Thumbnail neben dem Text:
<meta name="twitter:card" content="summary">Achten Sie auf das name-Attribut. Twitter-Card-Tags verwenden name, nicht das property, das Open Graph verwendet.
Wie X für Titel, Beschreibung und Bild auf og:* zurückgreift
Für Titel, Beschreibung und Bild liest X Ihre og:title, og:description und og:image, wenn das passende twitter:*-Tag fehlt. Deshalb schreiben Sie twitter:title oder twitter:image überhaupt selten. Setzen Sie twitter:card, halten Sie Ihre Open-Graph-Tags sauber, und X setzt die Karte daraus zusammen.
Die Falle des leeren twitter:image
Der Fallback hat einen Haken: Ein leeres Tag gilt als vorhanden. Geben Sie twitter:image mit einem leeren Wert aus, verwendet X diesen leeren Wert, statt auf og:image zurückzugreifen, und Ihre Karte verliert ihr Bild.
<!-- Falsch: blockiert den Fallback und lässt die Karte ohne Bild -->
<meta name="twitter:image" content="">
<!-- Richtig: das Tag ganz weglassen, dann liest X og:image -->Die Regel ist einfach: Geben Sie niemals ein leeres Social-Tag aus. Lassen Sie es weg, wenn Sie keinen Wert haben.
Besonderheiten von Slack und Discord
Slack liest zuerst die Twitter Card, dann Open Graph, und kann über twitter:label und twitter:data zwei zusätzliche Felder anzeigen:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">Diese erscheinen als kleine beschriftete Details unter einem Slack-Unfurl. Discord liest Open Graph und fügt eine Zierde hinzu, die sonst niemand nutzt: Es färbt die linke Akzentleiste des Embeds mit der theme-color Ihrer Seite.
<meta name="theme-color" content="#5865F2">Wie Link-Vorschauen auf jeder Plattform rendern
Dieselben Tags erzeugen je nach Leser unterschiedliche Social-Media-Link-Vorschauen. Jede Plattform wählt ihre eigene Teilmenge an Tags, cacht für ihr eigenes Zeitfenster und fügt die eine oder andere Eigenheit hinzu. Diese Tabelle ist die Schnellreferenz.
| Plattform | Gelesene Tags | Cache | Bemerkenswertes Verhalten |
|---|---|---|---|
| Open Graph | ~30 Tage | Ignoriert Bilder unter 200×200; zeigt unter 600×315 ein kleines Quadrat | |
| Open Graph | ~7 Tage | Veraltete Vorschau mit dem Post Inspector löschen | |
| X (Twitter) | twitter:card + Rückgriff auf og:* | kurz | Kein twitter:card bedeutet gar keine Karte |
| Slack | Twitter Card, dann Open Graph | pro Nachricht | Rendert twitter:label/twitter:data als zusätzliche Felder |
| Discord | Open Graph | pro Nachricht | Nutzt theme-color für die Akzentleiste des Embeds |
og:title + og:image | pro Nachricht | Will Metadaten weit oben; halten Sie das Bild unter 300 KB | |
| Telegram | Open Graph | pro Nachricht | Rendert zuverlässig nur aus JPEG oder PNG |
| Open Graph oder Schema.org | — | Article Rich Pins brauchen og:type=article |
Die Cache-Spalte erklärt eine häufige Überraschung: Sie korrigieren Ihre Tags, teilen erneut, und Facebook zeigt wochenlang weiterhin den alten Titel. Facebook hält Open-Graph-Daten etwa 30 Tage und LinkedIn etwa 7, sodass eine Änderung erst erscheint, wenn der Cache abläuft oder Sie eine Aktualisierung erzwingen. Die Debugger weiter unten tun genau das.
Häufige Open-Graph-Fehler (und wie man sie fängt)
Die meisten kaputten Vorschauen lassen sich auf eine kurze Liste von Fehlern zurückführen. Jeder sieht lokal in Ordnung aus und scheitert erst, wenn ein Crawler die Live-Seite abruft.
Relativer og:image-Pfad
Ein relativer Pfad rendert in Ihrem Browser und bricht beim Teilen, weil der Crawler keine Basis-URL hat, um ihn aufzulösen.
<!-- Leer beim Teilen -->
<meta property="og:image" content="/cover.png">
<!-- Rendert überall -->
<meta property="og:image" content="https://example.com/cover.png">Fehlendes og:url oder ein Canonical, das ihm widerspricht
Ohne og:url verteilen sich Share-Zahlen und Engagement über URL-Varianten (mit und ohne www, mit Tracking-Parametern, mit abschließendem Schrägstrich). Richten Sie sowohl Ihren Canonical-Link als auch og:url auf dieselbe einzelne URL, damit die Signale zusammenbleiben.
Bild zu klein oder falsches Seitenverhältnis
Ein Bild unter 200×200 wird komplett ignoriert, und eines weit weg von 1.91:1 wird auf Weisen beschnitten, die Sie nicht geplant haben. Liefern Sie 1200×630 aus, und der Bildausschnitt ist auf jeder Plattform vorhersehbar.
twitter:card vergessen
Ein vollständiger Satz Open-Graph-Tags erzeugt ohne twitter:card trotzdem keine Karte auf X. Das ist der häufigste Grund, warum ein Link auf LinkedIn großartig aussieht und auf X nichts zeigt.
Clientseitig gerenderte Tags, die ein Crawler nicht sieht
Wenn eine Single-Page-App Open-Graph-Tags nach dem Laden einfügt, sehen Crawler, die kein JavaScript ausführen, sie nie. Rendern Sie die Tags serverseitig oder pre-rendern Sie das HTML.
charset nach den ersten 1024 Bytes platziert
Die Deklaration <meta charset="utf-8"> muss innerhalb der ersten 1024 Bytes des Dokuments erscheinen, sonst ignoriert der Browser sie und kann Nicht-ASCII-Zeichen in Ihrem Titel und Ihrer Beschreibung verstümmeln. Setzen Sie sie an den Anfang des <head>:
<head>
<meta charset="utf-8">
<!-- alles andere folgt -->
</head>So testen und debuggen Sie Ihre Open-Graph-Tags
Vertrauen Sie nie einer Vorschau, die Sie nicht gegen eine Live-URL verifiziert haben. Drei Tools decken die Plattformen ab, auf die es ankommt, und alle können eine Cache-Aktualisierung erzwingen.
Facebook Sharing Debugger
Der Facebook Sharing Debugger ruft Ihre Live-URL ab, zeigt genau, was Facebook geparst hat, und listet fehlende oder fehlerhafte Tags auf. Sein nützlichster Button ist „Scrape Again”, der Facebooks ~30-Tage-Cache auf Abruf aktualisiert. Das ist der schnellste Weg, eine Korrektur erscheinen zu lassen, ohne einen Monat zu warten.
LinkedIn Post Inspector
Der LinkedIn Post Inspector erledigt dieselbe Aufgabe für LinkedIn. Fügen Sie eine URL ein, und er ruft die Seite erneut ab und leert LinkedIns ~7-Tage-Cache, sodass ein aktualisierter Titel oder ein aktualisiertes Bild bei Ihrem nächsten Teilen erscheint statt erst Tage später.
Die X-Card-Validierung ist ins Entwicklerportal umgezogen
X hat seinen eigenständigen Card Validator eingestellt. Seit 2026 lebt die Card-Validierung im X-Entwicklerportal statt unter einer öffentlichen URL, sodass die meisten Teams X-Cards anders verifizieren: Weil X auf og:* zurückgreift, bestätigen die Facebook- und LinkedIn-Debugger bereits die Tags, die X lesen wird, und ein Drittanbieter-Vorschautool füllt die Lücke für das twitter:card-Layout selbst.
Vorschau, bevor Sie deployen
Debugger können nur eine URL prüfen, die bereits live ist. Das ist ein schlechter Moment, um ein leeres Bild zu entdecken. Betrachten Sie die Karte in der Vorschau, während Sie noch bearbeiten. Der Open Graph & Meta-Tag-Generator rendert Google-, Facebook-, X-, LinkedIn-, Slack- und Discord-Vorschauen aus den Werten, die Sie eintippen, liest die echten Abmessungen Ihres og:image im Browser, um ein falsches Seitenverhältnis zu erkennen, und kann einen bestehenden <head> importieren, damit Sie einen kaputten geteilten Link diagnostizieren können, bevor er ausgeliefert wird.
Schnelle Checkliste
Hier das Minimum, das jede Seite tragen sollte. Kopieren Sie es, tauschen Sie Ihre Werte ein, und Sie haben eine Vorschau, die überall rendert:
<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">
<meta name="twitter:card" content="summary_large_image">Gehen Sie vor dem Ausliefern die Essentials durch: ein absolutes HTTPS-og:image mit 1200×630, ein og:url, das zu Ihrem Canonical passt, ein vorhandenes twitter:card und serverseitig gerenderte Tags. Wenn Sie eine ausführlichere Tour durch die Werkzeuge wollen, die das beschleunigen, sammelt der Entwickler-Tools-Guide den Rest. Wenn Sie bereit sind, den ganzen Block auf einmal zu generieren und in der Vorschau zu sehen, schreibt der Open Graph & Meta-Tag-Generator ihn, prüft ihn und zeigt jede Karte, bevor Sie deployen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen Open-Graph- und Twitter-Card-Tags?
Open Graph ist ein plattformübergreifendes Protokoll, das von Facebook, LinkedIn, Slack und weiteren gelesen wird; Twitter-Card-Tags (twitter:*) sind X-spezifisch. X greift auf Ihre OG-Tags zurück, wenn das passende twitter:*-Tag fehlt, sodass Sie meist OG plus einen einzigen twitter:card-Wert brauchen.
Beeinflussen Open-Graph-Tags das Google-Suchranking?
Nein. Open-Graph- und Twitter-Card-Tags beeinflussen keine Google-Rankings. Sie steuern, wie Links beim Teilen aussehen, und treiben Social-Traffic an. Der klassische <title> und Canonical-Tags sind für SEO wichtig; die Meta-Description prägt Ihr Snippet und die Klickrate, ist aber kein direkter Ranking-Faktor.
Wohin gehören Open-Graph-Tags im HTML?
In das <head>-Element, im serverseitig gerenderten oder statischen HTML. Die Crawler von Facebook, LinkedIn, WhatsApp und Telegram führen kein JavaScript aus, sodass clientseitig eingefügte Tags nicht gesehen werden. Setzen Sie <meta charset> an den Anfang, damit es innerhalb der ersten 1024 Bytes landet.
Kann ein Bild für Facebook, X und LinkedIn funktionieren?
Ja. Ein einziges 1200×630-Bild (1.91:1) rendert korrekt auf Facebook, LinkedIn, Slack, Discord und in der summary_large_image-Karte von X. Liefern Sie es über HTTPS unter einer öffentlichen URL aus und deklarieren Sie og:image:width/og:image:height, damit der erste geteilte Link nicht leer ist.
Warum zeigt meine Link-Vorschau kein Bild?
Häufige Ursachen: ein relativer og:image-Pfad statt einer absoluten HTTPS-URL, ein Bild unter 200×200, ein fehlendes twitter:card auf X oder Tags, die von JavaScript eingefügt werden, das der Crawler nicht ausführen kann. Scrapen Sie nach der Korrektur mit dem Facebook Sharing Debugger erneut.
Brauchen alle Seiten ihre eigenen Open-Graph-Tags?
Idealerweise ja: Jede Seite sollte ein og:title, og:description, og:image und ein kanonisches og:url haben, die genau diese Seite widerspiegeln, damit geteilte Links relevante Vorschauen zeigen. Ein websiteweiter Fallback ist besser als nichts, aber seitenspezifische Tags gewinnen weit mehr Social-Clicks.