Ein Bild in 1200 mal 630 Pixel, als PNG oder JPEG, unter etwa 1 MB, mit dem wichtigen Inhalt innerhalb der mittleren 1080 mal 600. Diese Datei wird auf Facebook, LinkedIn, X, Slack, Discord, WhatsApp und iMessage korrekt gerendert - das ist für fast jede Website die ganze Antwort auf die Frage nach der Open Graph-Bildgröße.
Die Maße sind der leichte Teil. Meistens sind sie auch nicht das, was kaputtgeht. Was kaputtgeht, ist Text, der zu nah an einer Kante sitzt, die eine Plattform zuschneidet, ein Bild, das sich nie aktualisiert, weil ein Crawler das alte vor Monaten gecacht hat, oder eine Card, die ganz ohne Bild gerendert wird, weil die Datei 4 MB auf einem langsamen Origin war. Die Frage nach der OG-Bildgröße ist eigentlich drei Fragen, und nur eine davon dreht sich um Pixel. Diese Anleitung behandelt die Spezifikation, die Sicherheitszone, das Cache-Verhalten, das Menschen glauben lässt, ihre Tags seien falsch, und wie sich Vorschauen auflösen, wenn das Geteilte ein Kurzlink ist. Wenn Ihre Vorschau komplett fehlt statt nur schlecht zugeschnitten zu sein, ist Link-Vorschau wird nicht angezeigt die Diagnose-Anleitung.
Die Größe - und warum sie genau diese ist
Das Seitenverhältnis 1.91:1 stammt von Facebooks Link-Card und hat sich gehalten, weil alle anderen ein kompatibles Layout übernommen haben, statt ein eigenes zu erfinden. Das Open Graph-Protokoll selbst sagt überhaupt nichts über Pixel aus; es definiert og:image als URL und überlässt das Rendering dem Konsumenten - genau deshalb hat sich ein De-facto-Standard um eine praktische Größe herum gebildet.
| Platform | Rendert 1200x630 als | Wissenswert |
|---|---|---|
| Card in voller Breite | Der Ursprung des Seitenverhältnisses 1.91:1 | |
| Card in voller Breite | 1200x627 auch in Ordnung, Unterschied unsichtbar | |
| X | Große Summary Card | Braucht twitter:card = summary_large_image |
| Slack, Discord | Inline-Unfurl | Schneidet auf schmalen Fenstern kürzer zu |
| WhatsApp, iMessage | Kleines Thumbnail | Oft fast quadratisch, sodass Kanten verschwinden |
Facebooks eigene Anleitung zum Teilen von Bildern setzt das Minimum bei 200 mal 200 an und empfiehlt die größere Datei für hochauflösende Displays, und X dokumentiert das Card-Markup separat - das ist die einzige Stelle, an der Sie ein plattformspezifisches Tag statt einer plattformspezifischen Datei brauchen.
Die Sicherheitszone, über die niemand spricht
Eine Card wird selten in dem Seitenverhältnis angezeigt, in dem Sie sie entworfen haben. Chat-Apps schneiden für das Thumbnail Richtung Quadrat zu, manche Feeds kappen bei schmalen Viewports die Seiten, und eine abgerundete Ecke frisst die letzten Pixel eines Ecklogos.
Halten Sie alles, was überleben muss, zentriert innerhalb der mittleren 1080 mal 600, und behandeln Sie den äußeren Rand als Dekoration, auf die Sie verzichten können. In der Praxis bedeutet das: Die Überschrift sitzt mittig-links statt hart am Rand, das Logo lebt innerhalb des Randbereichs statt in der Ecke, und es gibt keinen dünnen Rahmen, weil ein Rahmen das eine Designelement ist, das in dem Moment kaputt aussieht, in dem er zugeschnitten wird.
Auch der Kontrast ist wichtiger, als es aussieht. Cards rendern in einem Client auf Weiß und in einem anderen auf Fast-Schwarz, sodass ein Bild, das sich auf den umgebenden Hintergrund zur Abgrenzung verlässt, in der Hälfte der Fälle seine Kanten verliert.
Die Tags rund um das Bild
Vier Tags erledigen die Arbeit. Zwei davon sind die, die Menschen überspringen.
<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
property="og:image:alt"
content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />
Die URL muss absolut sein, einschließlich Schema und Host, weil der Crawler das Tag ohne Seitenkontext liest, gegen den er einen relativen Pfad auflösen könnte. Breite und Höhe lassen die Plattform den richtigen Platz reservieren, bevor die Datei ankommt - das ist der Unterschied zwischen einer Card, die sofort erscheint, und einer, die sich neu anordnet. Und og:image:alt ist das Accessibility-Tag, das nichts kostet und fast überall fehlt.
Warum Ihr neues Bild nicht angezeigt wird
Das hier erzeugt Support-Tickets. Sie haben das Bild korrigiert, Sie sehen die neue Datei unter ihrer URL, und die Card zeigt immer noch das Design vom letzten Quartal.
Social-Crawler cachen aggressiv, und sie machen daraus kein Geheimnis. Sobald eine URL einmal gecrawlt wurde, wird für nachfolgende Shares die gespeicherte Version gerendert, manchmal wochenlang, und nichts an der Bearbeitung Ihres HTML sagt ihnen, dass sie erneut nachsehen sollen. Drei Auswege, in der Reihenfolge, in der ich sie ausprobieren würde:
- Erzwingen Sie ein erneutes Crawlen mit dem eigenen Tool der Plattform: Der Facebook Sharing Debugger und der LinkedIn Post Inspector rufen beide auf Abruf neu ab.
- Veröffentlichen Sie das Bild unter einem neuen Dateinamen - das ist eine andere URL und hat deshalb überhaupt keinen Cache-Eintrag. Das ist die zuverlässige Methode.
- Ändern Sie die geteilte URL selbst, was trivial einfach ist, wenn Sie einen Kurzlink teilen, den Sie selbst kontrollieren, statt einer festen Seitenadresse.
Bevor Sie irgendetwas veröffentlichen, zeigt Ihnen der Open Graph-Checker die Card genau so, wie ein Crawler sie bauen würde - das dauert zehn Sekunden und erspart Ihnen das peinliche erneute Teilen.
Vorschauen, wenn Sie einen Kurzlink teilen
Ein Kurzlink hat keine eigenen Open Graph-Tags und braucht auch keine. Der Crawler folgt der Weiterleitung, landet auf der Zielseite und baut die Card aus den dortigen Tags - das bedeutet, eine gekürzte URL übernimmt die Vorschau der Zielseite, welche auch immer das ist. Wenn die Card falsch ist, sind die Tags auf der Zielseite falsch.
Zwei Dinge hängen tatsächlich von der Link-Ebene ab. Die Weiterleitung muss für einen Crawler folgbar sein, was beim serverseitigen Hop der Normalfall ist, bei einer JavaScript-Weiterleitung jedoch nicht - ein weiterer Grund, die Kette kurz und serverseitig zu halten. Und weil die Vorschau zur Zielseite gehört, ändert sich auch die Vorschau, wenn Sie einen Kurzlink umbiegen - eine unauffällig nützliche Eigenschaft, wenn eine Kampagnenseite ersetzt wird, nachdem der Link bereits geteilt wurde.
Wenn Sie den Link, die Card und die Klickdaten an einem Ort haben möchten, starten Sie einen Workspace auf Ihrer eigenen Domain und prüfen Sie die Card mit dem Tool vor dem Versand statt danach.
Eine Checkliste, die sich zu behalten lohnt
- 1200 mal 630, PNG oder JPEG, unter 1 MB, absolute HTTPS-URL. Das ist die ganze Entscheidung zur OG-Bildgröße.
- Nichts Wichtiges außerhalb der mittleren 1080 mal 600, keine dünnen Rahmen.
og:image:width,og:image:heightundog:image:altvorhanden.twitter:cardaufsummary_large_imagegesetzt, wenn Sie die große Card auf X möchten.- Neues Bild, neuer Dateiname, dann erneut crawlen lassen, bevor Sie etwas ankündigen.
Bringen Sie diese fünf Punkte einmal in Ordnung, verankern Sie sie als Vorlage in Ihrem Seiten-Head, und Open Graph-Bilder hören auf, etwas zu sein, worüber Sie nachdenken. Das ist genau das richtige Maß an Aufmerksamkeit, das man ihnen schenken sollte.
Die Cornerstone-Serie lesen
Dieser Beitrag gehört zum Tutorials-Cluster. Für Vorschauen, die ganz ausfallen statt nur schlecht zugeschnitten zu sein, ist Link-Vorschau wird nicht angezeigt die Plattform-für-Plattform-Lösung, und wie man einen klickbaren Link erstellt behandelt die Ebene darunter.
Weitere Beiträge im Blog
- Link-Vorschau wird nicht angezeigt? Ursachen und Lösungen
- Einen Link für X (Twitter) kürzen: Was t.co damit macht
- Social-Media-Links tracken: Klicks nach Kanal
- Was ist ein Branded Link? Kurzlinks auf der eigenen Domain
- Eine URL weiterleiten: Sechs Wege, und wann welcher richtig ist
- Eigene Domains für Kurzlinks: DNS, TLS und was am Edge passiert
Häufig gestellte Fragen
Was ist die beste Open Graph-Bildgröße?
1200 mal 630 Pixel, ein Seitenverhältnis von 1.91:1, gespeichert als PNG oder JPEG und unter etwa 1 MB gehalten. Diese eine Datei wird auf Facebook, LinkedIn, der großen Summary Card von X, Slack, Discord, WhatsApp und iMessage korrekt gerendert - deshalb hat sie sich als Standard durchgesetzt statt einer eigenen Größe pro Netzwerk. Ältere Empfehlungen mit 1200x627 oder 600x315 funktionieren weiterhin, aber es gibt keinen Grund, sie zu verwenden.
Warum aktualisiert sich mein og:image nicht?
Weil die Plattform das alte Bild gecacht hat. Social-Crawler speichern, was sie beim ersten Mal abgerufen haben, und prüfen nicht bei jedem Teilen erneut, sodass ein neues Bild von selbst Tage brauchen kann, um zu erscheinen. Erzwingen Sie eine Aktualisierung mit dem eigenen Tool der Plattform, etwa dem Facebook Sharing Debugger oder dem LinkedIn Post Inspector, oder veröffentlichen Sie das Bild unter einem neuen Dateinamen, was den Cache vollständig umgeht.
Wie groß darf eine og:image-Datei sein?
Halten Sie sie unter 1 MB. Facebook akzeptiert bis zu 8 MB, aber Crawler rufen mit einem Timeout ab, und eine schwere Datei auf einem langsamen Origin ist der häufigste Grund, warum eine Vorschau ganz ohne Bild gerendert wird. Unter 1 MB ist überall schnell genug, und ein 1200x630-PNG mit einfachem Layout landet meist zwischen 60 und 300 KB.
Brauche ich ein separates Bild für X und LinkedIn?
Nein. Beide lesen og:image, wenn kein plattformspezifisches Tag vorhanden ist, und beide rendern 1200x630 ohne Probleme. Fügen Sie twitter:card mit dem Wert summary_large_image hinzu, wenn Sie das große Format auf X möchten, aber das Bild selbst kann dieselbe Datei sein. Ein Bild, eine URL, weniger, das Sie vergessen können, wenn sich die Seite ändert.
Woher kommt das Vorschaubild, wenn ich einen Kurzlink teile?
Von der Zielseite, nicht vom Link. Der Crawler folgt der Weiterleitung und liest die Open Graph-Tags auf der Seite, auf der er landet, sodass ein Kurzlink die Vorschau seiner Zielseite übernimmt. Deshalb ist eine fehlende Card nach dem Kürzen fast immer ein Tag-Problem auf der Zielseite und kein Problem des Kürzers.
Braucht das Bild eine absolute URL?
Ja. og:image muss eine vollständige URL einschließlich Schema und Host sein, weil der Crawler das Tag ohne Kontext liest und keinen relativen Pfad auflösen kann. Liefern Sie es über HTTPS aus, und setzen Sie og:image:width und og:image:height, damit die Plattform die Card layouten kann, bevor die Datei fertig heruntergeladen ist.
Elido testen
URL einfügen, kurzer Link in Sekunden
Kein Konto nötig. Link bleibt 30 Tage aktiv. Konto erstellen, um ihn dauerhaft zu behalten.
Kostenlos, keine Anmeldung erforderlich · 2 pro Tag