Open-Graph-Tags: So richtest du og:image und saubere Link-Vorschauen ein

Von SEOgrinder · Veröffentlicht 2. November 2026 · 9 Min. Lesezeit

Kurzantwort: Open-Graph-Tags sind Meta-Tags im Kopf einer Seite. Sie sagen sozialen Netzwerken und Messengern, welchen Titel, welche Beschreibung und welches Bild sie zeigen sollen, wenn jemand deinen Link teilt. Das Protokoll verlangt vier Angaben (og:title, og:type, og:image und og:url); og:description solltest du ergänzen. Nimm ein Bild mit mindestens 1200 × 630 Pixeln und unter 8 MB, gib seine vollständige https-Adresse an, und lege alle Tags in das HTML, das dein Server ausliefert, nicht in JavaScript, das erst später läuft. Eine Wirkung auf Rankings ist nicht belegt: Die Tags bestimmen, wie ein geteilter Link aussieht.

Was sind Open-Graph-Tags?

Open Graph ist ein Protokoll, mit dem eine Webseite sich selbst als Objekt beschreibt: Titel, Typ, Bild und Adresse. Es stammt laut ogp.me ursprünglich von Facebook. Umgesetzt wird es mit meta-Tags im head der Seite. Sobald jemand deinen Link in einen Beitrag oder Chat einfügt, ruft die Plattform die Seite ab, liest diese Tags und baut daraus die Vorschaukarte. Fehlen die Angaben, bleibt der Plattform nur das Raten: Welcher Titel, welcher Text, welches Bild?

Für jede Seite nennt das Protokoll vier Pflichtangaben und eine weitere, die zwar optional ist, aber allgemein empfohlen wird:

Tag	Was darin steht	Status
og:title	Der Titel des Objekts, so wie er in der Vorschau erscheinen soll	Pflicht
og:type	Die Art des Objekts, zum Beispiel `website` oder `article`	Pflicht
og:image	Die Adresse des Bildes, das die Seite vertritt	Pflicht
og:url	Die kanonische Adresse der Seite, ihre dauerhafte Kennung	Pflicht
og:description	Eine Beschreibung in ein bis zwei Sätzen	Optional, allgemein empfohlen

Der Wert von og:type ist mehr als ein Etikett. Laut ogp.me kann der gewählte Typ weitere Angaben nach sich ziehen. Für article führt das Protokoll zum Beispiel article:published_time und article:modified_time auf. Weitere optionale Tags sind og:site_name (der Name der gesamten Website) und og:locale (die Sprache der Angaben, Standard ist en_US).

Das Mindest-HTML für Open-Graph-Tags

Hier ein vollständiger Satz zum Anpassen. (Das Beispiel auf ogp.me setzt zusätzlich ein prefix-Attribut am html-Element; die großen Plattformen lesen die Tags auch ohne.) Er gehört in das head-Element, neben dein normales title-Tag:

<head>
  <title>Open-Graph-Tags: og:image einrichten</title>
  <meta property="og:title" content="Open-Graph-Tags: og:image einrichten">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://beispiel.de/open-graph-tags">
  <meta property="og:image" content="https://beispiel.de/bilder/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Vorschaukarte eines Links mit Bild, Titel und Beschreibung">
  <meta property="og:description" content="Die vier Pflichtangaben, die Bildregeln und der Test der Link-Vorschau.">
  <meta property="og:site_name" content="Beispiel">
</head>

Zu den Einzelheiten:

og:url ist eine dauerhafte Kennung. ogp.me definiert sie als die kanonische Adresse des Objekts. Nimm dieselbe Adresse wie in deinem Canonical-Link, ohne Tracking-Parameter.
Schreibe die Bildadresse vollständig. Jedes Beispiel auf ogp.me nutzt eine volle Adresse. Ein relativer Pfad wie /bilder/karte.png hängt davon ab, wie der jeweilige Crawler ihn auflöst. Verlass dich nicht darauf.
Breite und Höhe helfen. Laut Facebooks Dokumentation kann der Crawler das Bild mit diesen beiden Angaben sofort darstellen, ohne es erst herunterladen und verarbeiten zu müssen.
Ergänze og:image:alt. ogp.me schreibt, dass eine Seite mit Bild auch beschreiben soll, was darauf zu sehen ist (eine Beschreibung, keine Bildunterschrift).

Die Regeln für og:image: Größe, Datei und Adresse

Die klarsten Zahlen veröffentlicht Facebook auf der Seite zu Bildern in geteilten Links. Sie dienen hier als Referenz:

Die kleinste erlaubte Größe ist 200 × 200 Pixel.
Die Datei darf höchstens 8 MB groß sein.
Für die beste Darstellung auf hochauflösenden Geräten nimm mindestens 1200 × 630 Pixel.
Mindestens 600 × 315 Pixel brauchst du, damit Link-Beiträge ein großes Bild zeigen. Kleinere Bilder erscheinen trotzdem, aber deutlich kleiner.
Das Seitenverhältnis soll möglichst nah an 1,91 : 1 liegen, damit das ganze Bild ohne Beschnitt erscheint. 1200 × 630 ergibt rund 1,905 : 1, deshalb ist diese Größe die übliche Wahl.
Der Crawler akzeptiert nur die Kodierungen gzip und deflate. Prüfe also, ob dein Server oder CDN mit einer von beiden antwortet.

Das sind die Regeln von Facebook. Andere Apps und Messenger lesen dieselben Tags, ihre Grenzen dokumentiert dieser Artikel aber nicht. Teste deshalb dort, wo es für dich zählt. Zum Vergleich: Die Blogseiten von SEOgrinder nutzen ein Vorschaubild mit 1200 × 630 Pixeln.

Zwei weitere Bedingungen betreffen den Zugriff, nicht die Größe. Das Bild muss öffentlich sein: keine Anmeldung davor und keine robots.txt-Regel, die den Ordner sperrt, in dem es liegt. Kann ein Crawler die Datei nicht abrufen, bleibt die Vorschau ohne Bild, egal wie gut die Datei ist.

Gib jeder Seite eigene Open-Graph-Tags

Weil og:url die dauerhafte Kennung eines Objekts ist, muss sie auf jeder Seite anders lauten. Für den Rest gilt dasselbe:

og:title nennt, worum es auf genau dieser Seite geht, nicht den Namen der ganzen Website.
og:description fasst diese Seite in ein bis zwei Sätzen zusammen.
og:image zeigt etwas, das zur Seite passt. Halte ein Standardbild für Seiten bereit, die kein eigenes haben.
og:type kann ebenfalls abweichen: website für die Startseite, article für einen Blogbeitrag oder eine Meldung.

Egal, welche Technik du einsetzt: Erzeuge die Tags aus den Daten der jeweiligen Seite, statt sie von Hand zu tippen. Ein kleines Beispiel in Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(seite) {
  return [
    ['og:title', seite.titel],
    ['og:type', seite.typ || 'website'],
    ['og:url', `https://beispiel.de${seite.pfad}`],
    ['og:image', seite.bild || 'https://beispiel.de/bilder/standard-karte.png'],
    ['og:description', seite.beschreibung],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

Die Funktion esc ist wichtig: Ein Titel mit Anführungszeichen würde sonst das Attribut vorzeitig beenden und das Tag zerstören. Nutzt du ein CMS, such das Feld, mit dem du das Teilen-Bild je Seite festlegst. Was du am Ende prüfst, bleibt gleich: die Tags im ausgelieferten HTML.

Open-Graph-Tags gehören ins ausgelieferte HTML

Viele moderne Websites liefern nur eine fast leere HTML-Hülle aus, den Rest baut JavaScript erst im Browser zusammen. Google kommt damit zurecht: Laut der JavaScript-Dokumentation rendert die Suche Seiten mit einer aktuellen Chromium-Version. Dieselbe Seite sagt aber auch, dass Server-Side-Rendering oder Pre-Rendering weiterhin eine gute Idee ist, weil nicht alle Bots JavaScript ausführen können.

Für KI-Crawler gibt es eine Messung: Im Dezember 2024 stellten Vercel und MERJ fest, dass keiner der großen KI-Crawler, die sie untersuchten, JavaScript ausführte. Das ist ein Stand von 2024 und seither nicht erneut belegt. Für Link-Vorschauen folgt daraus eine sichere Regel: Erscheinen deine Tags erst, nachdem ein Skript gelaufen ist, sieht ein Crawler ohne Skriptausführung sie nie. SEOgrinder meldet solche Seiten als „Die Seite wird erst im Browser gebaut“, mit dem Hinweis, dass viele KI-Crawler kein JavaScript ausführen und eine fast leere Seite sehen.

Du kannst das in zehn Sekunden testen:

curl -sL https://beispiel.de/ | grep -io '<meta[^>]*og:[^>]*>'

Kommen die Tags zurück, stehen sie im ausgelieferten HTML. Kommt nichts zurück, die Tags erscheinen aber in den Entwicklertools des Browsers, fügt ein Skript sie zu spät ein. Denselben Test machst du mit „Seitenquelltext anzeigen“ im Browser. Das zeigt das ausgelieferte HTML, nicht den Zustand der Seite, nachdem alle Skripte gelaufen sind (so zeigen es die Entwicklertools). Abhilfe schafft das Rendern auf dem Server oder das Erzeugen der Seiten vorab, damit Titel, Text und Tags schon in der ersten Antwort stehen.

So testest du die Link-Vorschau

Der Sharing Debugger von Facebook zeigt, welche Tags der Crawler gelesen hat, und nennt Fehler. Er verlangt eine Anmeldung bei Facebook. Laut Facebooks Bilddokumentation holt er beim Aufruf einer Adresse auch die Metadaten vorab ab, und das ist wegen des Zwischenspeichers wichtig:

Facebook speichert jedes Bild unter seiner Adresse zwischen. Ersetzt du ein Bild, nimm für das neue eine neue URL, sonst bleibt das alte stehen.
Lösche das alte Bild nicht, denn bestehende Beiträge können noch darauf zeigen.
Ein neues Bild für eine URL aktualisiert nicht die Vorschau alter Beiträge. Die musst du im Sharing Debugger neu abrufen lassen.
Der Crawler muss ein Bild mindestens einmal gesehen haben, bevor er es darstellen kann. Ohne Vorabruf sieht die erste Person, die den Link teilt, womöglich kein Bild.

Bevor du veröffentlichst, geh diese Liste durch:

Rufe die Seite mit curl ab und prüfe, dass die fünf Tags in der ersten Antwort stehen.
Öffne die Bildadresse allein. Sie muss ohne Anmeldung laden, mit Status 200.
Prüfe die Größe: mindestens 1200 × 630 Pixel, unter 8 MB.
Schicke die Seite durch den Sharing Debugger und lies Fehler und Warnungen.
Wiederhole das für je eine Seite jeder Art: Startseite, Beitrag, Produkt.

So prüft SEOgrinder deine Open-Graph-Tags

Gib in SEOgrinder die Adresse einer öffentlichen Seite ein, dann enthält der Bericht eine Social-Vorschau, die zeigt, wie die Seite beim Teilen aussieht. Das Werkzeug liest deine Tags, lädt das Bild und meldet, was es findet. Es braucht kein Konto und kostet nichts. Diese Funde sind hier wichtig:

Vorschau beim Teilen unvollständig nennt, was von Bild, Titel und Beschreibung fehlt.
Vorschaubild lädt nicht erscheint, wenn das Bild mit einem Fehlerstatus antwortet. Der Fund nennt den Status und die üblichen Ursachen: eine falsche Adresse, eine Anmeldung vor der Datei oder eine Sperre in der robots.txt. Laut dem Fund erscheinen Links dann bei LinkedIn, WhatsApp und X ohne Bild.
Vorschaubild ist sehr klein erscheint unter 600 × 315 Pixeln (Facebook zeigt es dann nur als kleine Miniatur); Bilder unter dem Mindestmaß von 200 × 200 meldet er gesondert.
Die Seite wird erst im Browser gebaut ist der Fund für Seiten, die ihre Oberfläche erst im Browser aufbauen.

SEOgrinder kann dir nicht zeigen, wie jedes Netzwerk die Karte zeichnet. Es prüft die Tags und die Datei, also den Teil, den du in der Hand hast. Für den letzten Blick nimm den Debugger.

Häufige Fehler

Ein relativer Bildpfad. Nimm die volle Adresse mit https://.
Ein Bild, das sich nicht abrufen lässt. Eine Anmeldung, eine Firewall-Regel oder eine robots.txt-Zeile auf den Bildordner lässt die Vorschau ohne Bild.
Ein zu kleines Bild. Unter 600 × 315 Pixeln erscheint es klein, unter 200 × 200 womöglich gar nicht.
Keine Beschreibung. og:description ist im Protokoll optional, aber ohne sie rät die Plattform.
Dieselben Tags auf jeder Seite. Dann sieht jeder Beitrag beim Teilen aus wie die Startseite, und og:url kennzeichnet nichts mehr.
Das Bild unter derselben Adresse austauschen. Facebook speichert nach URL zwischen, also veröffentliche die neue Datei unter neuem Namen.
Tags, die erst nach JavaScript existieren. Lege sie ins ausgelieferte HTML.
Nicht maskierte Anführungszeichen in den Werten. Sie beenden das Attribut und schneiden das Tag ab.
Eine Tracking-Adresse in og:url. Das Tag soll die kanonische Adresse enthalten.

Häufige Fragen

Sind Open-Graph-Tags ein Ranking-Faktor?

Es gibt keinen Beleg dafür. Open Graph bestimmt, wie ein geteilter Link in sozialen Netzwerken und Messengern aussieht. Nichts in den hier genutzten Quellen verbindet ihn mit Rankings.

Welche Größe soll das og:image haben?

1200 × 630 Pixel, mit einem Seitenverhältnis nahe 1,91 : 1 und unter 8 MB. Das entspricht der Empfehlung von Facebook und ist die Größe des Vorschaubilds auf den Blogseiten von SEOgrinder.

Brauche ich og:description?

Das Protokoll führt es als optional und allgemein empfohlen. Ohne das Tag muss die Plattform sich eine Beschreibung aus deiner Seite zusammenraten, schreib also eine.

Warum zeigt mein altes Bild immer noch?

Facebook speichert Bilder unter ihrer Adresse zwischen. Veröffentliche das neue Bild unter einer neuen URL und schicke die Seite durch den Sharing Debugger. Alte Beiträge werden nicht automatisch aktualisiert.

Was ist mit twitter:card?

Dieses Tag gehört nicht zum Open-Graph-Protokoll. Der Korrekturhinweis von SEOgrinder bei einer unvollständigen Vorschau empfiehlt zusätzlich, twitter:card auf summary_large_image zu setzen. Die Regeln von X behandelt dieser Artikel nicht, lies sie in der Dokumentation von X nach.

Kann ein Coding-Agent die Tags für mich einbauen?

Den mechanischen Teil kann er übernehmen: die Tags in deine Vorlagen schreiben und mit curl prüfen. Über An KI übergeben erzeugt der Bericht die Funde als Arbeitsauftrag in Markdown, mit einer prüfbaren Zielbedingung („Fertig, wenn“) je Aufgabe. Das Bild auszuwählen und den Text zu formulieren bleibt deine Aufgabe.

Dein nächster Schritt

Mach den kostenlosen Scan deiner Startseite und sieh dir die Social-Vorschau und die oben genannten Funde an. Behebe sie der Reihe nach, veröffentliche ein neues Bild unter neuer Adresse, wenn du eines ersetzen musst, und schicke die Seite durch den Sharing Debugger. Scanne danach erneut, um zu bestätigen, dass die Vorschau vollständig ist.