html-einfach.de

SEO & KI · Technisches SEO

Open Graph & Social-Media-Vorschauen

Von Zuletzt geändert am

Open-Graph-Tags sind <meta>-Angaben im <head>, mit denen du bestimmst, wie ein Link aussieht, wenn ihn jemand auf LinkedIn, Mastodon, Slack oder per WhatsApp teilt: Titel, Beschreibung und Vorschaubild. Ohne sie rät die Plattform – und rät oft daneben, weil sie sich irgendein Bild und irgendeine Textzeile aus der Seite greift.

Das Protokoll stammt ursprünglich von Facebook, ist aber längst der De-facto-Standard, den praktisch jede Plattform und jeder Messenger liest. Vier Tags sind Pflicht, ein halbes Dutzend weitere lohnen sich – und ein Tag, das fast alle vergessen, macht die Karte auch für Screenreader nutzbar.

Die vier Pflicht-Tags

Das Open-Graph-Protokoll nutzt <meta>-Tags mit dem Attribut property (nicht name – ein häufiger Fehler) und dem Präfix og:. Vier davon sind laut Spezifikation erforderlich:

<meta property="og:title" content="Open Graph & Social-Media-Vorschauen" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.de/og/open-graph-und-social.png" />
<meta property="og:url" content="https://example.de/seo-und-ki/open-graph-und-social.html" />
  • og:title – die Überschrift der Karte. Sie darf knackiger sein als der Title für die Suche; hier zählt der Klickreiz im Feed, nicht die Keyword-Passung.
  • og:type – die Art des Objekts. Für Artikel article, für Startseiten website. Der Typ schaltet weitere erlaubte Angaben frei.
  • og:image – das Herzstück. Eine gute Karte lebt vom Bild; ohne Bild schrumpft sie in vielen Feeds zu einer unscheinbaren Textzeile.
  • og:url – die kanonische Adresse. Plattformen nutzen sie als Identität des Inhalts: Kampagnenparameter gehören hier nicht hinein, sonst zählen Reaktionen auf ein und denselben Artikel getrennt.

Die wichtigen optionalen Tags

Formal optional, praktisch fast immer sinnvoll:

<meta property="og:description" content="Wie geteilte Links als Vorschaukarte erscheinen." />
<meta property="og:site_name" content="html-einfach.de" />
<meta property="og:locale" content="de_DE" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Titelgrafik: Open Graph und Social-Media-Vorschauen auf html-einfach.de" />
  • og:description – ein bis zwei Sätze. Was hier steht, entscheidet oft mehr über den Klick als der Titel.
  • og:site_name – der Name der Website, den viele Plattformen über oder unter der Karte einblenden.
  • og:locale – Standardwert ist en_US. Für deutsche Seiten also unbedingt de_DE setzen, sonst wird die Karte falsch eingeordnet.
  • og:image:width / :height – erlauben der Plattform, den Platz zu reservieren, bevor das Bild geladen ist. Ohne diese Angaben flackert die Karte beim ersten Teilen oder erscheint kurz ohne Bild.

og:image:alt – das vergessene Tag

og:image:alt liefert die Textalternative zum Vorschaubild. Es taucht in kaum einem SEO-Ratgeber auf, ist aber genau das, was aus einer Karte auch für blinde und sehbehinderte Nutzer eine Information macht: Wer im Feed mit einem Screenreader unterwegs ist, bekommt sonst nur „Bild“ oder gar nichts vorgelesen.

Dieselbe Regel wie bei Alt-Texten im Dokument gilt auch hier: Beschreibe, was zu sehen ist und was es bedeutet – und wiederhole nicht wortgleich den og:title, der ohnehin daneben steht.

Randnotiz – dieselbe Karte, andere Wahrnehmung. Eine Social Card ist für Sehende ein Bild mit Text drauf. Für alle anderen ist sie das, was in og:title, og:description und og:image:alt steht. Wer den ganzen Inhalt ins Bild rendert und die Textfelder leer lässt, baut eine Karte, die für einen Teil des Publikums schlicht leer ist – dasselbe Muster wie Text in Grafiken auf der Website selbst.

Twitter/X Cards

X nutzt eigene Tags mit name= statt property=, fällt aber auf Open Graph zurück, wenn sie fehlen. Nur ein Tag ist wirklich nötig – ohne es zeigt X standardmäßig die kleine quadratische Variante statt des großen Bildes:

<meta name="twitter:card" content="summary_large_image" />
Kartentyp Darstellung Wann sinnvoll
summary kleines quadratisches Bild links, Text rechts Standard, wenn nichts gesetzt ist
summary_large_image großes Bild über dem Text für Artikel praktisch immer die bessere Wahl
player eingebetteter Video-/Audioplayer nur für Medienangebote

Die restlichen twitter:-Tags (twitter:title, twitter:description, twitter:image) musst du nicht doppelt pflegen – X greift auf die OG-Entsprechungen zurück. Setze sie nur, wenn du dort bewusst etwas anderes zeigen willst.

Das Vorschaubild

1200 × 630 px (Seitenverhältnis 1,91:1) ist der verlässliche Standard und funktioniert quer über Facebook, LinkedIn, Mastodon, Discord, Slack, WhatsApp und iMessage. X schneidet daraus für summary_large_image ein 16:9-Bild – wer sichergehen will, hält die Ränder frei von wichtigen Inhalten.

Zwei Vorschaukarten desselben geteilten Links im Vergleich. Links die Karte „ohne Open-Graph-Tags“: ein schmaler grauer Platzhalter ohne Bild, als Titel die nackte URL, darunter ein abgeschnittener Satzfetzen aus dem Seitenanfang und die Domain in Kleinschrift. Rechts die Karte „mit Open-Graph-Tags“: ein großes Vorschaubild im Verhältnis 1200 zu 630 mit dem Seitentitel als Bildtext, darunter ein aussagekräftiger Titel, zwei Zeilen Beschreibung und der Seitenname html-einfach.de. Unter beiden Karten stehen die jeweils gesetzten Meta-Tags, links durchgestrichen und leer, rechts vollständig mit og:title, og:description, og:image und og:image:alt.
Derselbe Link, zweimal geteilt: Ohne Open-Graph-Tags rät die Plattform und zeigt URL plus Textfetzen – mit gesetzten Tags entsteht eine Karte, die im Feed überhaupt erst auffällt.

Worauf es beim Bild sonst ankommt:

  • Text im Bild groß und kurz halten – es wird oft klein angezeigt, im Messenger manchmal als Vorschau von wenigen Zentimetern.
  • Absolute URL verwenden, kein relativer Pfad. Die Plattform lädt das Bild von außen; ein /img/karte.png kann sie nicht auflösen.
  • Nicht hinter einer Anmeldung oder einem Hotlink-Schutz liegen – der Crawler der Plattform bringt keine Cookies mit.
  • Dateigröße klein halten. Messenger sind hier am strengsten; einige verwerfen große Bilder still und zeigen dann gar keins. Unter ~300 KB ist man überall auf der sicheren Seite.
  • Kein transparentes PNG. Je nach Plattform landet die Karte auf weißem oder dunklem Grund – Transparenz führt zu unlesbarem Text.

Der vollständige <head>

Alles zusammengesetzt sieht ein sauber ausgezeichneter Artikel so aus:

<head>
  <meta charset="utf-8" />
  <title>Open Graph &amp; Social Cards | html-einfach.de</title>
  <meta name="description" content="Wie geteilte Links als Vorschaukarte erscheinen." />
  <link rel="canonical" href="https://example.de/seo-und-ki/open-graph-und-social.html" />

  <!-- Open Graph -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Open Graph &amp; Social-Media-Vorschauen" />
  <meta property="og:description" content="Wie geteilte Links als Vorschaukarte erscheinen." />
  <meta property="og:url" content="https://example.de/seo-und-ki/open-graph-und-social.html" />
  <meta property="og:image" content="https://example.de/og/open-graph-und-social.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Titelgrafik: Open Graph und Social-Media-Vorschauen" />
  <meta property="og:site_name" content="html-einfach.de" />
  <meta property="og:locale" content="de_DE" />
  <meta property="article:published_time" content="2026-06-28" />
  <meta property="article:modified_time" content="2026-07-27" />

  <!-- X / Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

Die article:-Tags gehören zum Typ article und liefern Veröffentlichungs- und Änderungsdatum – dieselbe Information, die auch die strukturierten Daten transportieren. Mehr zum <head> insgesamt steht unter Dokument-Metadaten.

Randnotiz – automatisch statt von Hand. Für jede Seite ein eigenes Bild zu gestalten, skaliert nicht. Diese Website erzeugt das OG-Bild beim Build automatisch aus demselben og:title, der auch im Markup steht – so können Bild und Seite gar nicht erst auseinanderlaufen, und jede neue Seite bekommt ihre Karte geschenkt. Der Aufwand fällt einmal an, nicht pro Artikel.

Testen und den Cache leeren

Vor dem Teilen lohnt der Blick in die Debugger der Plattformen: der Sharing-Debugger von Meta, der Post Inspector von LinkedIn oder der Card-Validator von X. Sie zeigen die Vorschau und decken fehlende oder falsche Tags auf.

Der praktisch wichtigste Nebeneffekt: Die Dienste cachen Vorschauen – teils über Wochen. Wer ein Bild oder einen Titel nach dem ersten Teilen ändert, sieht die Änderung nicht, solange der Cache steht. Genau dafür sind die Debugger da: Sie erzwingen ein erneutes Auslesen der Seite. Bei LinkedIn ist das der einzige zuverlässige Weg.

Ein schneller Selbsttest ohne Tool: Teile den Link in einem privaten Chat mit dir selbst. Was dort erscheint, ist das, was alle sehen.

Was das für die Sichtbarkeit bringt

Ehrlicherweise: kein Ranking. Open-Graph-Tags sind kein Rankingfaktor, und Google liest sie für die Suche nicht aus. Ihr Nutzen liegt woanders:

  • Klickrate im Feed. Eine Karte mit Bild fällt auf, eine nackte URL nicht.
  • Kontrolle statt Zufall. Ohne Tags entscheidet die Plattform, welches Bild sie greift – im Zweifel das Logo aus dem Footer oder ein Icon.
  • Konsistenz. Geteilte Links sehen überall gleich aus, egal von wem sie kommen.
  • Indirekt Reichweite. Mehr Klicks aus sozialen Kanälen bedeuten mehr Leser, mehr Erwähnungen und damit mittelbar auch das, was E-E-A-T als Autorität beschreibt.

Der Alt-Text des Vorschaubilds

og:image:alt wird von den meisten Netzwerken ausgewertet und ist der einzige Weg, wie jemand mit einem Screenreader erfährt, was auf dem geteilten Bild zu sehen ist – im Feed steht sonst nur der Titel. Der Text folgt denselben Regeln wie im Fließtext: Information statt Bildbeschreibung, siehe Alt-Texte richtig schreiben und, für die Frage, was davon überhaupt ankommt, Sehbehinderung & Blindheit.

Häufige Fehler

  • Kein og:image – die Karte wirkt leer und wird seltener geklickt.
  • Relative Bild-URL, die außerhalb der eigenen Seite nicht auflösbar ist.
  • name= statt property= bei og:-Tags – dann liest sie niemand aus.
  • Falsche Bildmaße, wodurch das Motiv beschnitten wird.
  • og:image:alt weglassen und die Karte damit für Screenreader-Nutzer entwerten.
  • og:locale vergessen – die Vorgabe ist en_US, nicht die Sprache deiner Seite.
  • Kampagnenparameter in og:url, wodurch Reaktionen auf denselben Artikel getrennt gezählt werden.
  • Veraltete Vorschau, weil der Cache der Plattform nicht erneuert wurde.
  • og:title für jede Seite gleich – dann sehen alle geteilten Links identisch aus.
  • Bild hinter Login oder Hotlink-Schutz, wo der Crawler nicht herankommt.

Häufige Fragen

Welche Open-Graph-Tags sind Pflicht?

Laut Spezifikation vier: og:title, og:type, og:image und og:url. In der Praxis gehören og:description, og:image:alt, og:locale und og:site_name dazu, damit die Karte vollständig und barrierefrei ist.

Welche Bildgröße ist richtig?

1200 × 630 px im Verhältnis 1,91:1 ist der Standard, der überall funktioniert. Wichtige Inhalte nicht bis an den Rand setzen – X schneidet auf 16:9 zu.

Sind Open-Graph-Tags ein Rankingfaktor?

Nein, direkt nicht. Sie wirken über die Klickrate auf Social Media – eine attraktive Karte bringt mehr Besuche, was indirekt hilft.

Brauche ich separate Twitter-Tags?

Meist reicht Open Graph plus twitter:card. X nutzt die OG-Angaben als Rückfall, du musst sie nicht doppelt pflegen.

Warum zeigt LinkedIn noch das alte Bild?

Weil die Vorschau im Cache liegt. Der Post Inspector erzwingt ein erneutes Auslesen – ohne ihn bleibt die alte Karte oft wochenlang stehen.

Wofür ist og:image:alt gut?

Für die Textalternative des Vorschaubildes. Screenreader im Feed lesen sie vor; ohne sie bleibt die Karte für blinde Nutzer stumm. Es ist das Barrierefreiheits-Tag unter den OG-Angaben und wird fast immer vergessen.

Was, wenn ich kein eigenes Bild habe?

Dann zeigt die Plattform irgendein Bild der Seite oder gar keins. Ein definiertes, passendes og:image ist fast immer besser – idealerweise automatisch beim Build erzeugt.

Fazit

Open-Graph-Tags bestimmen, wie deine Links in sozialen Netzen aussehen: Pflicht sind og:title, og:type, og:image und og:url; dazu gehören og:description, og:locale und die Bildmaße. Das Bild misst 1200 × 630 px und liegt unter einer absoluten, frei erreichbaren URL. Ein twitter:card mit summary_large_image sorgt bei X für die große Darstellung, und og:image:alt macht die Karte auch für Screenreader-Nutzer lesbar – der Punkt, den fast alle Anleitungen auslassen. Ein pro Seite automatisch erzeugtes Bild hält das mühelos konsistent, und der Debugger der jeweiligen Plattform räumt den Cache ab, wenn sich etwas ändert. So wird aus einem geteilten Link eine einladende Karte – die Ergänzung zu Title & Meta-Description und Bild-SEO.

Quellen

Gratis E-Book PDF Das Praxishandbuch

Kostenloses E-Book

Das Praxishandbuch für sauberes, zugängliches Web

Alles rund um semantisches HTML, Barrierefreiheit, WCAG & BFSG, GEO und SEO — praxisnah und am echten Code. In mehreren Feedbackschleifen von Leserinnen und Lesern verbessert.

  • 3.000+ Downloads
  • 7. Auflage
  • 37 Seiten
  • PDF

Kein Spam. Abmeldung jederzeit mit einem Klick möglich.