Welche Größe sollte ein Open-Graph-Bild haben?

1200 × 630 Pixel werden am häufigsten empfohlen und funktionieren bei Facebook, LinkedIn, X sowie den meisten Messengern. Unter 600 × 315 Pixeln erscheint auf einigen Plattformen nur eine kleine Vorschau.

Was passiert ohne `og:image`?

Die Plattform sucht selbst ein geeignetes Seitenbild, häufig das erste große im HTML. Das Ergebnis ist unvorhersehbar und kann Logo, Anzeige oder unpassendes Foto sein.

Kann X ein anderes Bild als Facebook verwenden?

Ja. `twitter:image` überschreibt auf X `og:image`; ohne eigenes Tag fällt X darauf zurück. So lassen sich unterschiedliche Seitenverhältnisse berücksichtigen.

Wie teste ich ein Open-Graph-Bild?

Nutze Facebook Sharing Debugger, X Card Validator und LinkedIn Post Inspector. Sie laden die Seite und zeigen Bild, Titel und Beschreibung der Vorschau.

Brauchen Open-Graph-Bilder Alternativtext?

`og:image:alt` beschreibt das Vorschaubild. Die Unterstützung ist nicht überall gleich, verbessert aber die Zugänglichkeit geteilter Links für Screenreader-Nutzer.

Open-Graph-Bild: Bedeutung und Anwendung | Glossar

Ein Open-Graph-Bild ist die Vorschaugrafik einer URL in sozialen Netzwerken, Messengern und manchen Suchergebnissen. Es wird im HTML über og:image festgelegt.

Warum OG-Bilder wichtig sind

Beim Teilen in Facebook, LinkedIn, X, Slack, iMessage oder WhatsApp lädt die Plattform eine Vorschau aus Titel, Beschreibung und Bild. Das Bild ist deren größtes sichtbares Element und entscheidet mit, ob jemand innehält und den Link öffnet.

Ohne ein gezieltes Bild muss die Plattform raten. Sie wählt häufig eine unpassende Grafik oder gar keine, wodurch der Link defekt oder unprofessionell wirkt.

Bei Produktstarts, Blogartikeln und Landingpages ist das OG-Bild eine wiederkehrende Werbefläche. Eine einheitliche Markengestaltung stärkt bei jeder Weitergabe die Wiedererkennbarkeit. Auch Suchergebnisse, Lesezeichenmanager und Link-Aggregatoren können es verwenden.

Technische Angaben

Das Open Graph Protocol definiert Meta-Tags im <head>:

og:image: absolute Bild-URL einschließlich Domain, vorzugsweise HTTPS.
og:image:width und og:image:height: Pixelabmessungen, damit die Plattform den Platz vor dem vollständigen Download kennt.
og:image:type: optionaler MIME-Typ wie image/png oder image/jpeg.
og:image:alt: Alternativtext zum Bild.

Empfohlen sind 1200 × 630 Pixel beziehungsweise ungefähr 1,91:1. X verwendet für große Summary Cards eher 1200 × 675, doch 1200 × 630 funktioniert auf den großen Plattformen. Die Datei sollte für Facebook unter 5 MB und für die meisten anderen Dienste unter 8 MB bleiben. JPG und PNG funktionieren universell, WebP nicht überall.

Gute OG-Bilder erstellen

Lesbaren Text verwenden: Thema oder Kernbotschaft muss auch als kleine Vorschau erkennbar sein.
Marke konsistent halten: Logo, Farben und Layoutvorlage machen mehrere Links im Feed sofort zuordenbar.
Zuschnitt einplanen: Lege Text und Logo in die mittleren 80 Prozent, weil Plattformen unterschiedlich beschneiden.
Erzeugung automatisieren: Eine feste Vorlage kann Titel und Kontext jeder Seite aufnehmen, statt jedes Motiv einzeln zu gestalten.

In einem Shotomatic-ähnlichen Publishing-Ablauf sind OG-Bilder ein wiederholbarer Output. Titel, Unterzeile und Brand-Tokens aus Glossar, Blog oder Toolseite füllen dieselbe Vorlage, sobald der Inhalt in die Prüfung geht.

Häufige Fehler

Zu niedrige Auflösung. Unter 600 × 315 entstehen oft nur kleine Karten; verwende mindestens 1200 × 630.
Relative URL verwenden. /images/og.png reicht nicht, es muss eine vollständige URL sein.
Nicht plattformübergreifend testen. Facebook, LinkedIn und X schneiden unterschiedlich zu.
Veralteten Cache übersehen. Nutze nach einem Update den Debugger der Plattform, um ein erneutes Laden anzustoßen.
Dasselbe generische Bild für jede Seite verwenden. Seitenspezifische Motive zeigen den Inhalt besser und fördern Interaktion.

Open-Graph-Bild