Open-Graph-Bildgröße: 1200 × 630 und was wirklich kaputtgeht

Wenn jemand Ihren Link in Slack, iMessage, LinkedIn, WhatsApp oder Facebook einfügt, erscheint eine Vorschaukarte mit einem Bild. Dieses Bild ist das Open-Graph-Bild, und die meisten Websites haben es falsch — auf eine Weise, auf die niemand sie hinweist, weil die Seite selbst gut aussieht.

Die Größe

1200 × 630 Pixel. Das ist ein Verhältnis von 1,91:1, und darauf sind Facebook, LinkedIn und die meisten Link-Vorschausysteme ausgelegt.

• Minimum 200 × 200 — darunter weigern sich viele Plattformen, überhaupt eine Karte zu zeigen, und fallen auf einen reinen Textlink zurück.
• Minimum 600 × 315 für die große Karte. Darunter bekommen Sie oft das kleine Thumbnail-Layout statt des breiten, das im Feed deutlich weniger auffällt.
• Unter 1 MB als praktisches Ziel. Die dokumentierten Obergrenzen liegen höher, aber ein langsam ladendes Vorschaubild erscheint manchmal schlicht nicht — die Plattform hat das Warten aufgegeben.

Nehmen Sie 1200 × 630. Es liegt über jedem Minimum, ist das native Verhältnis des häufigsten Layouts und skaliert überall sonst sauber herunter.

Es ist nicht das erste Bild der Seite

Dieses Missverständnis verursacht die meisten Probleme. Das Vorschaubild wird deklariert, in einem Tag im Head der Seite:

<meta property="og:image" content="https://example.com/img/card.jpg">

Deklarieren Sie nichts, rät jede Plattform. Und sie rät schlecht: ein Logo aus der Kopfzeile, ein Icon, ein Tracking-Pixel, eine Anzeige oder gar nichts. Verschiedene Plattformen raten verschieden, weshalb derselbe Link in Slack anders aussieht als auf LinkedIn.

Der Satz, den zu deklarieren sich lohnt:

• og:image — die absolute URL. Das ist der häufigste Fehler; ein relativer Pfad wie /img/card.jpg funktioniert in Ihrem Browser und scheitert bei jedem Vorschau-Crawler.
• og:image:width und og:image:height — damit die Plattform den Platz reserviert, bevor sie die Datei geladen hat.
• og:image:alt — eine Beschreibung für Screenreader.
• og:title und og:description — der Text auf der Karte.
• twitter:card auf summary_large_image — ohne das zeigt X das kleine quadratische Layout, selbst wenn Ihr Bild perfekt ist.

Das Zuschnittproblem

Sie gestalten ein Bild, und jede Plattform schneidet es anders zu.

• Facebook und LinkedIn: ungefähr der volle Rahmen 1,91:1.
• Die große Karte von X: näher an 2:1 — oben und unten fallen weg.
• Chat-Apps in der Nachrichtenliste: oft ein kleines Quadrat oder ein schmaler Streifen — das linke und rechte Drittel fallen weg.
• Manche Apps zeigen in der Liste gar kein Bild und geben es erst beim Öffnen frei.

Alle exakt zu bedienen geht nicht. Was geht: die Mitte als einzig verlässlichen Bereich behandeln. Halten Sie Motiv und jeden Text in einer zentrierten Box von etwa 1000 × 520 und lassen Sie den äußeren Rand nur Hintergrund tragen. Was einen quadratischen Zuschnitt überstehen muss, gehört in die mittleren 630 × 630.

Text auf der Karte

Ein 1200 Pixel breites Bild wird im Desktop-Feed mit etwa 500 Pixeln dargestellt, in einer Handy-Chatliste kleiner. Das ist rund 40 % Verkleinerung — vor jedem Zuschnitt.

Text auf einem OG-Bild muss also weit größer sein, als er im Gestaltungsprogramm wirkt. Eine gute Prüfung: Verkleinern Sie den 1200-×-630-Export auf 500 Pixel Breite und schauen Sie hin. Wenn Sie sich vorbeugen müssen, ist er zu klein. Praktisch heißt das: eine Überschrift aus wenigen Wörtern in sehr großem Grad, kein Satz.

Und denken Sie daran, dass die Karte Ihren og:title bereits als echten Text darunter zeigt. Dieselben Wörter im Bild zu wiederholen verschenkt den Platz — nutzen Sie das Bild für etwas, das der Titel nicht sagt.

Die Cache-Falle

Plattformen holen Ihr OG-Bild einmal und cachen es, manchmal sehr lange. Die Folge erwischt ständig Leute: Sie reparieren das Bild, teilen den Link erneut — und es erscheint weiter das alte.

• Nutzen Sie den Sharing-Debugger der jeweiligen Plattform, um ein erneutes Laden dieser URL zu erzwingen.
• Oder ändern Sie den Dateinamen. Eine neue URL hat keinen Cache-Eintrag und wird frisch geholt. Das wirkt überall, ganz ohne Anmeldung.

Ein Bild für die ganze Website oder eines pro Seite?

Ein einziges seitenweites OG-Bild ist die übliche Abkürzung. Besser als nichts — es hindert die Plattform zumindest am Raten — aber jeder geteilte Link sieht identisch aus, was der Leserin nichts darüber sagt, was sie gleich öffnet.

Bilder pro Seite wirken besser und müssen nicht handgemacht sein. Ein vernünftiger Mittelweg ist eine Vorlage: gleichbleibender Hintergrund und Logo-Position, mit dem eigenen Titel der Seite hineingesetzt. Günstig in der Produktion — und jeder Link bekommt eine Karte, die etwas Konkretes sagt.

Fünf stille Fehler

• Relative URL. Sieht im Quelltext richtig aus, lädt nichts. Muss absolut sein, inklusive https://.
• Transparentes PNG. Transparenz wird in den meisten Vorschau-Renderings nicht unterstützt und füllt sich typischerweise schwarz. Exportieren Sie als JPEG oder als PNG mit eingemaltem Hintergrund.
• Blockierter Crawler. Ist der Bildpfad in robots.txt verboten, liegt hinter einem Login oder auf einem Host, der unbekannte Agents blockt, bleibt die Karte leer.
• Bild zu langsam. Eine sehr große Datei kann den Vorschau-Abruf in einen Timeout laufen lassen. Unter 1 MB halten.
• Kein twitter:card. Das Bild ist in Ordnung, nur das Layout ist klein — leicht zu übersehen.

Kurzübersicht

• 1200 × 630, Verhältnis 1,91:1, unter 1 MB, JPEG
• og:image mit absoluter URL deklarieren — relative Pfade sind Fehler Nummer eins
• twitter:card = summary_large_image ergänzen, sonst zeigt X die kleine Karte
• Motiv und Text in zentrierten 1000 × 520; die Ränder als verloren einplanen
• Text bei 500 px Breite prüfen, nicht in Originalgröße
• Dateinamen ändern, um den Vorschau-Cache auszuhebeln
• Keine Transparenz — sie rendert schwarz