Open Graph und Meta-Tags: Was deine Link-Vorschau wirklich steuert

Veröffentlicht 19. Juli 2026

Wenn du einen Link in einen Chat einfügst oder in sozialen Medien postest und eine saubere Karte erscheint — Bild, Überschrift, Kurztext —, dann wird diese Karte aus Meta-Tags im HTML der Seite gebaut. Richtig gesetzt, sehen deine Links überall professionell aus; lässt du sie weg, bekommst du eine nackte URL oder ein zufällig beschnittenes Bild.

Zwei Familien von Tags, zwei Aufgaben

Sie werden oft in einen Topf geworfen, doch verschiedene Systeme lesen sie:

SEO-Meta-Tags — <title> und <meta name="description">. Das zeigen Suchmaschinen wie Google in den Ergebnissen.
Open-Graph-Tags — og:title, og:description, og:image, og:url, og:type. Facebook hat sie erfunden; heute sind sie der De-facto-Standard, den die meisten Plattformen (LinkedIn, Slack, WhatsApp, Discord) für Link-Vorschauen lesen.
Twitter-Card-Tags — twitter:card und Verwandte. X liest Open Graph als Fallback, aber twitter:card entscheidet, ob du ein kleines Thumbnail oder ein großes Banner bekommst.

Du willst alle drei. Ein Meta-Tag-Generator füllt sie aus einem einzigen Formular, damit du nicht jeden von Hand schreibst.

Ein minimaler Satz Tags

Hier der Kern, den du in den <head> einfügen und anpassen kannst:

<title>Dein Seitentitel</title>
<meta name="description" content="Ein-Satz-Zusammenfassung der Seite.">

<meta property="og:title" content="Dein Seitentitel">
<meta property="og:description" content="Ein-Satz-Zusammenfassung der Seite.">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

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

Beachte: Open-Graph-Tags nutzen property=, die SEO-Beschreibung und die Twitter-Tags dagegen name= — die zu verwechseln ist ein klassischer Grund, warum ein Tag stillschweigend nichts bewirkt. summary_large_image liefert das große Banner; mit summary bekommst du ein kleines quadratisches Thumbnail.

Die Größen und Längen, auf die es ankommt

Titel — ziele auf etwa 50–60 Zeichen, damit Suchergebnisse ihn nicht abschneiden.
Beschreibung — aus demselben Grund rund 150–160 Zeichen.
og:image — 1200×630 Pixel (Verhältnis 1,91:1) ist die sichere Größe für eine große Vorschau. Nutze eine absolute URL (https://…), nie einen relativen Pfad.

Was Bild und Text bestimmt

Plattformen folgen einer Fallback-Kette. Beim Bild suchen sie zuerst og:image, dann twitter:image, und nur wenn beide fehlen, raten sie aus den <img>-Tags der Seite — so landest du bei einem zufälligen Logo oder einer Anzeige. Beim Text ist es genauso: og:title schlägt den einfachen <title>, und og:description schlägt die Meta-Beschreibung.

Auch Größengrenzen zählen. Viele Plattformen ignorieren Bilder unter rund 200×200 Pixel oder verkleinern sie zum winzigen Thumbnail, sodass ein iconkleines Bild egal bei welchen Tags keine große Karte ergibt. Musst du genau 1200×630 treffen, führt der Leitfaden zum Zuschneiden eines Bildes Schritt für Schritt hindurch.

Warum sich deine Vorschau nicht aktualisiert

Der häufigste Frust: Du korrigierst die Tags, teilst den Link erneut, und die alte Vorschau ist noch da. Das ist kein Fehler in deinen Tags — soziale Plattformen cachen die Vorschau beim ersten Aufruf einer URL. Nutze den offiziellen Debugger der Plattform (etwa den Facebook Sharing Debugger), um ein erneutes Auslesen zu erzwingen, dann erscheint die neue Karte.

Eine kaputte Vorschau debuggen

Sieht eine Karte falsch aus, schick die URL durch den offiziellen Debugger der Plattform — der Facebook Sharing Debugger und der LinkedIn Post Inspector lesen beide auf Anfrage neu ein und listen genau auf, welche Tags sie gefunden haben, sodass du siehst, was der Crawler sieht. Häufige Ursachen, wenn nichts erscheint:

Das og:image nutzt einen relativen Pfad oder liegt hinter einem Login, sodass der Crawler es nicht abrufen kann.
Die Seite oder das Bild ist nicht öffentlich erreichbar, oder robots.txt sperrt den Crawler aus.
Die Tags stehen im <body> oder werden per JavaScript eingefügt, das der Crawler nie ausführt.

Behebe die Ursache, lies im Debugger einmal neu ein, und die korrigierte Karte verbreitet sich an alle, die den Link danach teilen.

Wohin die Tags gehören

All diese gehören in den <head> deines HTML, nicht in den <body>. Die meisten Website-Baukästen und CMS bieten ein Feld „Custom Head” oder ein SEO-Panel pro Seite, in das du sie einfügst.