Was ein OG-Image ist

„OG" steht für Open Graph, ein von Facebook eingeführtes und heute überall genutztes Protokoll. Es legt fest, wie eine Seite aussieht, wenn ihr Link geteilt wird: als Vorschau-Karte mit Bild, Titel und Beschreibung. Das Bild dieser Karte ist das OG-Image — und in einem Feed voller Links ist es oft das Einzige, was den Klick gewinnt. Fehlt es, wirkt der geteilte Link nackt und wird seltener angeklickt.

Die Maße: 1200 × 630

Der etablierte Standard ist 1200 × 630 Pixel (Verhältnis ~1,91:1). Diese Größe zeigen Facebook, LinkedIn, WhatsApp und die meisten Plattformen sauber an. Weitere Regeln:

  • Wichtiges mittig — manche Dienste beschneiden die Ränder leicht, ähnlich wie beim Facebook-Titelbild.
  • Großer, lesbarer Text — die Karte erscheint klein; ein feiner Schriftzug verschwindet.
  • JPG oder PNG, möglichst unter 1 MB — große Bilder werden von manchen Plattformen abgelehnt oder langsam geladen.

Der Meta-Tag

Gesetzt wird das OG-Image über einen Meta-Tag im <head> der Seite — mit einer absoluten URL (nicht relativ):

<meta property="og:image" content="https://deine-domain.de/og.jpg">
<meta property="og:title" content="Titel der Seite">
<meta property="og:description" content="Kurze Beschreibung">
<meta property="og:url" content="https://deine-domain.de/seite">

Für Twitter/X kommt zusätzlich die Card-Angabe dazu, die dasselbe Bild wiederverwenden kann:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://deine-domain.de/og.jpg">

Die häufigsten Fehler

  • Relative statt absolute URL — Plattformen brauchen die volle https://…-Adresse, sonst finden sie das Bild nicht.
  • Zu große Datei — über der Größengrenze der Plattform wird das Bild ignoriert. Vorher verkleinern mit dem Skalier- und Kompressions-Tool.
  • Alter Cache — Plattformen speichern die Vorschau. Nach einer Änderung liest das jeweilige Debug-Tool (Facebook Sharing Debugger, LinkedIn Post Inspector) die Karte neu ein.
  • Kein Bild gesetzt — dann sucht sich die Plattform irgendein Seitenbild oder zeigt nichts.

Testen, bevor es zählt

Vor dem großen Teilen lohnt der Test mit den offiziellen Debug-Werkzeugen der Plattformen — sie zeigen genau, wie die Karte aussehen wird, und decken fehlende oder falsch dimensionierte Bilder auf. So merkt man den Fehler vor dem Publikum, nicht danach.

Pro Seite ein eigenes Bild

Ein Standard-OG-Image für die ganze Website ist das Minimum. Wirkungsvoller ist ein spezifisches Bild pro Artikel oder Produkt — mit Titel und Motiv der jeweiligen Seite. Viele moderne Frameworks können solche OG-Images sogar dynamisch generieren (aus Titel und Template), sodass jede Seite automatisch eine passende, gut gestaltete Vorschau bekommt. Für kleine Seiten reicht es, die wichtigsten Seiten mit je einem eigenen, gestalteten Bild auszustatten — die Gestaltungsregeln entsprechen der Zitat-Grafik: großer Text, hoher Kontrast, klare Aussage.

Häufige Fragen

Welche Größe muss ein OG-Image haben?

1200 × 630 Pixel (Seitenverhältnis ~1,91:1) ist der Standard, der auf Facebook, LinkedIn, WhatsApp und den meisten Plattformen sauber angezeigt wird. Als JPG oder PNG, möglichst unter 1 MB, damit es schnell lädt. Wichtiger Inhalt gehört mittig, da manche Dienste die Ränder leicht beschneiden.

Wie setze ich das OG-Image auf meiner Seite?

Über einen Meta-Tag im HTML-Head: og:image mit der absoluten URL zum Bild. Zusätzlich sind og:title, og:description und og:url üblich. Twitter/X nutzt zusätzlich twitter:card und twitter:image. Fehlt das og:image, sucht sich die Plattform irgendein Bild oder zeigt gar keins.

Warum zeigt Facebook mein OG-Image nicht an?

Häufige Gründe: Die Bild-URL ist relativ statt absolut, das Bild ist zu groß (über der Plattform-Grenze), oder die Plattform hat eine alte Version gecacht. Cache-Probleme löst man mit dem jeweiligen Debug-Tool der Plattform, das die Vorschau neu einliest.

Braucht jede Seite ein eigenes OG-Image?

Idealerweise ja: Ein spezifisches Bild pro Artikel oder Produkt wirkt stärker als ein generisches Logo für die ganze Seite. Viele Frameworks können OG-Images sogar dynamisch pro Seite generieren. Als Minimum sollte aber wenigstens ein Standard-OG-Image gesetzt sein.

Quellen

The Open Graph Protocol · Meta for Developers — Sharing-Bilder.