Open-Graph-Bild richtig setzen: og:image, Maße und Test

<meta property="og:title" content="Vorschaubilder einbinden">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.org/vorschau/">
<meta property="og:image" content="https://example.org/og/vorschau.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Diagramm: Screenshot-Pipeline in drei Schritten">

Welche Größe sollte og:image haben?

Facebook empfiehlt für og:image mindestens 1200 × 630 Pixel. Diese Größe sorgt laut Facebook für eine gute Darstellung auf hochauflösenden Bildschirmen. Das Seitenverhältnis soll möglichst nah an 1,91:1 liegen, damit das Bild ohne Beschnitt erscheint. Minimal akzeptiert Facebook 200 × 200 Pixel, höchstens 8 MB Dateigröße (Quelle: developers.facebook.com/docs/sharing/webmasters/images/, Stand: Oktober 2026).

LinkedIn verlangt für die Vorschau geteilter Links mindestens 1200 × 627 Pixel. LinkedIn empfiehlt das Verhältnis 1,91:1 und begrenzt die Datei auf 5 MB (Quelle: linkedin.com/help/linkedin/answer/a521928, Stand: Oktober 2026).

Ein Open-Graph-Bild von 1200 × 630 Pixeln unter 5 MB erfüllt die Mindestmaße von Facebook und LinkedIn zugleich. Facebook weist darauf hin, dass abweichende Seitenverhältnisse im Feed beschnitten werden können (Quelle: developers.facebook.com/docs/sharing/webmasters/images/, Stand: Oktober 2026). Daraus folgt als vorsichtige Faustregel: Text und Logos nicht an den Rand setzen.

Wozu dienen og:image:width und og:image:height?

Die Angaben og:image:width und og:image:height nennen die Pixelmaße eines Open-Graph-Bildes vor dem Download. Das Open-Graph-Protokoll führt sie als optionale strukturierte Eigenschaften von og:image. Dazu gehören auch og:image:type für den MIME-Typ und og:image:secure_url (Quelle: ogp.me/, Stand: Oktober 2026).

Facebook nutzt og:image:width und og:image:height zum Vorab-Zwischenspeichern. Der Crawler kann das Bild damit sofort darstellen. Er muss es nicht erst asynchron herunterladen und verarbeiten (Quelle: developers.facebook.com/docs/sharing/webmasters/images/, Stand: Oktober 2026).

Braucht ein Open-Graph-Bild einen Alt-Text?

Ein Open-Graph-Bild braucht einen Alt-Text in og:image:alt. Das Open-Graph-Protokoll sagt: Eine Seite mit og:image sollte auch og:image:alt angeben. Gemeint ist eine Beschreibung des Bildinhalts, ausdrücklich keine Bildunterschrift (Quelle: ogp.me/, Stand: Oktober 2026). Wie man einen solchen Text formuliert, steht unter Alt-Text für Screenshots und Vorschaubilder.

Was passiert bei mehreren og:image-Angaben?

Eine Seite darf mehrere og:image-Tags enthalten. Bei Konflikten hat laut Open-Graph-Protokoll das erste Tag von oben Vorrang. Strukturierte Eigenschaften wie og:image:width gehören direkt hinter ihr og:image. Ein neues Wurzel-Tag schließt nämlich die vorherige Gruppe ab (Quelle: ogp.me/, Stand: Oktober 2026).

Welche Open-Graph-Angaben liest Facebook?

Facebook liest für Link-Vorschauen vier Open-Graph-Tags. Das sind og:url (kanonische Adresse), og:title (Titel ohne Markenzusatz), og:description und og:image. Die Beschreibung soll kurz sein, meist zwei bis vier Sätze. Fehlt og:type, gilt bei Facebook der Typ website (Quelle: developers.facebook.com/docs/sharing/webmasters/, Stand: Oktober 2026).

Der Crawler von Facebook meldet sich mit dem User-Agent facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php). Wer Bots per Firewall, Login oder robots.txt aussperrt, sollte diesen User-Agent zulassen. Das gilt für alle Seiten, die geteilt werden sollen (Quelle: developers.facebook.com/docs/sharing/webmasters/, Stand: Oktober 2026).

LinkedIn nennt für fehlende Vorschaubilder eine ähnliche Ursache wie Facebook. Erfüllt ein Bild die LinkedIn-Vorgaben und erscheint trotzdem nicht, verhindert die Website womöglich den Abruf. Oder das Bild liegt in einem geschützten Verzeichnis (Quelle: linkedin.com/help/linkedin/answer/a521928, Stand: Oktober 2026).

Warum zeigt die Vorschau noch das alte Bild?

Facebook aktualisiert ein Vorschaubild erst, wenn sich seine URL ändert. Facebook speichert Bilder anhand ihrer URL zwischen. Ein neues Vorschaubild braucht deshalb einen neuen Dateinamen oder einen geänderten Pfad. Einen neuen Abruf der Seite stößt man im Sharing Debugger von Facebook an (Quelle: developers.facebook.com/docs/sharing/webmasters/, Stand: Oktober 2026).

<!-- statt og.png nach jeder Änderung: -->
<meta property="og:image" content="https://example.org/og/vorschau-2026-10.png">

Wie testet man eine Link-Vorschau?

Der Sharing Debugger von Facebook zeigt, welche Meta-Tags der Crawler von einer URL ausliest. Er meldet auch Fehler und Warnungen (Quelle: developers.facebook.com/docs/sharing/webmasters/, Stand: Oktober 2026). Für einen schnellen Blick genügt der Quelltext der ausgelieferten Seite, etwa mit curl -s https://example.org/ | grep 'og:'. So sieht man das HTML, das der Server tatsächlich ausliefert.

Woher kommen Open-Graph-Angaben technisch?

Das Open-Graph-Protokoll beruht auf RDFa. Die Angaben stehen als zusätzliche meta-Elemente im head der Seite. Sie verwenden das Attribut property statt name. Die Spezifikation zeigt dazu das Präfix og: https://ogp.me/ns# am html-Element (Quelle: ogp.me/, Stand: Oktober 2026).

MDN beschreibt Open Graph als Metadaten-Protokoll, das Facebook erfunden hat. Es soll Websites reichere Metadaten geben. Im MDN-Lernbereich zu Metadaten dient es als Beispiel für proprietäre Angaben, die vor allem soziale Netzwerke auswerten (Quelle: developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata, Stand: Oktober 2026). Wie aus Hover-Thumbnails die heutigen Link-Karten wurden, beschreibt Link-Vorschau beim Überfahren.