Die Kurzfassung
- Die Open-Graph-Bildgröße, die auf fast jeder Plattform funktioniert, ist 1200×630 Pixel, ein Verhältnis von etwa 1,91 zu 1.
- Plattformen lesen beim Teilen eines Links das og:image-Tag aus dem HTML deiner Seite und speichern das Bild dann zwischen, sodass Änderungen erst nach einer Aktualisierung der Vorschau erscheinen können.
- Die og:image-Adresse muss eine vollständige https-URL sein, die ohne Login lädt, und die Tags müssen im HTML stehen, das der Server ausliefert, nicht später per JavaScript ergänzt.
- Linkvorschauen werden oft klein gezeigt, deshalb braucht ein OG-Image eine kurze Überschrift in großer Schrift, zentriert, mit großzügigen Rändern.
- Manche Messenger schneiden Vorschauen quadratisch zu, deshalb gehören die wichtigsten Worte in die Bildmitte.
Auf dieser Seite
Die OG-Image-Größe, die fast überall funktioniert, ist 1200×630 Pixel, ein Querformat im Verhältnis von etwa 1,91 zu 1. Facebook, LinkedIn, X, Slack, Discord und die meisten Messenger bauen ihre Linkvorschauen aus diesem einen Bild, das im og:image-Tag deiner Seite angegeben ist. LinkedIn nennt für sein Linkbild 1200×627, nah genug, dass eine Datei in 1200×630 beides abdeckt.
Open Graph 1200×630
1200 × 630
LinkedIn-Linkbild 1200×627
1200 × 627
Mittleres Quadrat 630×630
630 × 630
Was ein Open-Graph-Bild ist und wie Vorschauen geladen werden
Open Graph ist eine Reihe von meta-Tags im head einer Webseite. Wenn jemand deinen Link in einen Post oder Chat einfügt, schickt die Plattform einen Crawler zur Seite, liest diese Tags, lädt das Bild herunter und zeichnet die Vorschaukarte. Das passiert einmal, danach wird das Ergebnis zwischengespeichert, manchmal tagelang.
Drei Details bringen die meisten ins Stolpern. Die Bildadresse muss eine vollständige URL sein, die mit https:// beginnt, kein relativer Pfad. Sie muss für alle laden, ohne Login oder Cookie-Banner im Weg. Und die Tags müssen im HTML stehen, das dein Server ausliefert, weil die meisten Crawler kein JavaScript ausführen; Tags, die ein Skript nach dem Laden ergänzt, werden nie gesehen.
<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />twitter:card mit dem Wert summary_large_image fordert die große Vorschau an.Ein OG-Image gestalten, das in Thumbnail-Größe lesbar ist
Ein Bild in 1200×630 wird selten in 1200 Pixeln gesehen. Im Feed auf dem Smartphone schrumpft es auf einen Streifen in Bildschirmbreite, im Chat oft noch kleiner. Gestalte für die kleine Version: eine kurze Überschrift, große Schrift, starker Kontrast und nichts Wichtiges in den Ecken.
- Drei bis sieben Worte. Der Seitentitel, auf den Punkt gekürzt, nicht der ganze Titel.
- Große Schrift. Auf der Fläche von 1200×630 bleibt eine Überschrift von etwa 64 bis 96 Pixeln Höhe lesbar, wenn die Vorschau schrumpft.
- Ränder von etwa 60 Pixeln oder mehr, damit nichts an eine Kante stößt, die eine Plattform abrunden oder beschneiden könnte.
- Eine kleine Markensignatur, etwa eine Wortmarke oder der Name deiner Website, auf jedem Bild an derselben Stelle.
- Ein einheitlicher Hintergrund, damit Leute deine Links erkennen, bevor sie sie lesen.
Eine Linkvorschau, gebaut für die kleine Version: eine kurze Zeile, groß und zentriert, mit kleiner Signatur darüber.
Vermeiden
- Der ganze Seitentitel in kleiner Schrift
- Ein Screenshot der Seite selbst
- Worte in den Ecken, wo quadratische Zuschnitte sie abschneiden
- Text auf einem unruhigen Foto ohne ruhige Fläche
Machen
- Eine gekürzte Überschrift, die man auf einen Blick liest
- Eine gestaltete Karte mit einer Idee
- Die wichtigsten Worte im mittleren Quadrat
- Ein ruhiger Hintergrund mit hohem Kontrast hinter der Schrift
Kontrast zählt bei kleinen Größen mehr, nicht weniger. Prüfe, ob deine Überschrift die Verhältnisse aus Farbkontrast erfüllt, und teste bei einem Verlaufshintergrund den Kontrast dort, wo die Worte tatsächlich stehen. Text auf einem Farbverlauf zeigt, wie du die ruhige Zone findest.
Ein OG-Image für die ganze Website oder eines pro Seite
Jede Website braucht ein Standardbild für Seiten, die nichts Besseres haben. Doch ein Standardbild auf jeder Seite lässt jeden geteilten Link gleich aussehen, und niemand erkennt an der Vorschau, um welche Seite es geht. Die Seiten, die am meisten geteilt werden, verdienen ein eigenes.
| Seitentyp | Was das Bild sagen sollte | Wie es entsteht |
|---|---|---|
| Startseite | Dein Name und ein Versprechen in einer Zeile | Einmal von Hand gestaltet |
| Artikel oder Ratgeber | Die kurze Überschrift des Artikels | Aus dem Titel generiert |
| Produktseite | Produktname, mit gezeigtem Produkt | Generiert, mit dem Produktbild |
| Eventseite | Name und Datum des Events | Im Look des Events gestaltet |
| Alles andere | Dein Name und dein Signaturhintergrund | Das Standardbild der Website |
Für jeden Artikel ein eigenes Bild von Hand zu machen, skaliert nicht. Die meisten modernen Frameworks können ein OG-Image aus einer Vorlage rendern, wenn die Seite gebaut oder zum ersten Mal aufgerufen wird; dynamische OG-Images zeigt den Ansatz Schritt für Schritt.
So testest du deine Linkvorschauen
- 1
Die Tags prüfen
Öffne die Seite, sieh dir den Quelltext an und such nach
og:image. Steht es nicht im Quelltext, sehen Crawler es nicht. - 2
Die Bildadresse öffnen
Füg die
og:image-URL in ein privates Browserfenster ein. Sie sollte direkt laden, über https, ohne Login. - 3
Den Inspektor der Plattform nutzen
Der LinkedIn Post Inspector zeigt, wie LinkedIn eine URL sieht, und aktualisiert den Zwischenspeicher. Facebook hat einen ähnlichen Sharing Debugger.
- 4
An dich selbst schicken
Füg den Link in einen Messenger und einen Post-Entwurf ein. Sieh dir die Vorschau auf dem Smartphone an, wo sie am kleinsten ist.
- 5
Nach Änderungen den Cache umgehen
Erscheint weiter ein altes Bild, gib dem neuen Bild eine neue Adresse, etwa indem du
?v=2an die URL hängst, und prüfe erneut.
Dateiformat und Dateigröße
Nutze PNG für gestaltete Karten mit Schrift und flacher Farbe und JPEG für fotografische Bilder. Vermeide SVG, das die meisten Crawler für Vorschauen nicht akzeptieren, und sei vorsichtig mit neueren Formaten, die manche Plattformen nicht lesen. Halte die Datei schlank, damit der Crawler sie schnell lädt; eine gestaltete Karte muss selten groß sein. Etwas Körnung verhindert Banding im Verlauf, wenn eine Plattform das Bild neu komprimiert.
In Gradiently ist Linkvorschau (Open Graph) 1200×630 eine der eingebauten Größen, sodass du einen Post mit Kopieren & Größe ändern als Vorschau neu anordnen und einen Look über Post und Link hinweg behalten kannst. Bei einem Launch ist das OG-Image ein Punkt auf einer längeren Liste; Grafiken für den Launch-Tag hat die vollständige Checkliste.
Häufige Fragen
Was ist die beste OG-Image-Größe?
1200×630 Pixel, ein Verhältnis von etwa 1,91 zu 1. Sie funktioniert für Facebook, LinkedIn, X, Slack und die meisten Messenger.
Warum zeigt meine Linkvorschau ein altes Bild?
Plattformen speichern Vorschauen zwischen. Aktualisiere die Seite im Inspektor der Plattform, etwa im LinkedIn Post Inspector, oder gib dem neuen Bild eine neue URL, damit es neu geladen wird.
Warum wird mein OG-Image gar nicht angezeigt?
Meist ist die og:image-URL relativ, durch einen Login blockiert oder wird per JavaScript nach dem Laden ergänzt. Nutze eine vollständige https-URL im serverseitig gerenderten HTML.
Nutzt X Open-Graph-Bilder?
Ja. X greift auf Open-Graph-Tags zurück, wenn eigene fehlen. Füge ein twitter:card-Tag mit dem Wert summary_large_image hinzu, um die große Vorschau zu bekommen.
Sollte jede Seite ein eigenes OG-Image haben?
Seiten, die oft geteilt werden, etwa Artikel, Produkte und Events, profitieren von einem eigenen Bild. Alles andere kann ein gut gestaltetes Standardbild der Website nutzen.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
