Open-Graph-Bilder für die Website Ihrer App

Aktualisiert am 30. Oktober 2026

Ein Open-Graph-Bild ist das Bild, das erscheint, wenn jemand einen Link zu Ihrer Website auf X, LinkedIn, Facebook, in Slack, iMessage und den meisten anderen Apps teilt. Machen Sie es 1200 × 630 Pixel groß (1.91:1), setzen Sie es mit dem Tag og:image, fügen Sie twitter:card mit dem Wert summary_large_image hinzu, damit X es groß zeigt, halten Sie Text von den Rändern fern und testen Sie es, bevor Sie den Link teilen.

Was ein Open-Graph-Bild ist

Open Graph ist eine Reihe von Meta-Tags, ursprünglich von Facebook, die anderen Apps sagen, wie ein Link zu Ihrer Seite dargestellt wird: Titel, Beschreibung, URL und Bild. Wenn Sie einen Link in einen Post oder Chat einfügen, ruft die App die Seite ab, liest diese Tags und baut daraus eine Vorschaukarte.

Ohne Bild-Tag rät die App. Sie wählt vielleicht Ihr Logo, ein beliebiges Bild der Seite oder gar nichts. Bei der Website einer App ist diese Karte oft das Erste, was man von Ihrem Produkt sieht, es lohnt sich also, sie selbst zu bestimmen.

Die Größe: 1200 × 630

Das Open-Graph-Protokoll selbst legt keine Pixelgröße fest. In der Praxis erscheint 1200 × 630, also 1.91:1, auf fast jeder Plattform als Karte in voller Breite, und die 1200 × 627 von LinkedIn liegen so nah, dass dasselbe Bild dort funktioniert. Nutzen Sie diese Größe und exportieren Sie als JPEG oder PNG unter wenigen Megabyte, damit es schnell lädt, wenn die App es abruft.

Einen sicheren Bereich einhalten

Apps beschneiden das Bild leicht unterschiedlich, und manche zeigen es kleiner, als Vorschaubild. Damit es überall lesbar bleibt:

Halten Sie Text und Gerät mindestens 60 bis 80 Pixel von jedem Rand entfernt.
Setzen Sie das Wichtige in die mittleren zwei Drittel.
Verwenden Sie große Schrift: eine Überschrift mit höchstens fünf Wörtern, mindestens 60 Pixel hoch.
Wiederholen Sie den Seitentitel nicht im Bild. Die Karte zeigt den Titel ohnehin darunter.

Die Tags, die Sie hinzufügen

Setzen Sie diese in den <head> jeder Seite. Das Open-Graph-Protokoll nennt og:title, og:type, og:image und og:url als Pflicht und verlangt og:image:alt, sobald Sie ein Bild setzen.

Tag	Beispielwert
`og:title`	IhreApp – Gewohnheiten verfolgen
`og:description`	Ein Satz dazu, was die App macht.
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg (eine vollständige URL, kein relativer Pfad)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	Der Startbildschirm der App auf einem iPhone, auf blauem Hintergrund.
`twitter:card`	summary_large_image

In HTML sieht das so aus:

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

X liest für Titel, Beschreibung und Bild die Open-Graph-Tags, wenn die eigenen twitter:-Varianten fehlen. twitter:card ist daher meist das einzige X-spezifische Tag, das Sie brauchen. Ohne es zeigt X womöglich eine kleine Karte oder gar keine.

Ein Bild pro Seite

Ihre Startseite bekommt das Hauptbild. Andere Seiten können eigene haben:

Funktionsseiten: der Screen dieser Funktion, gerahmt.
Blogartikel und Ratgeber: der Titel des Artikels auf Ihrem Markenhintergrund oder der Screenshot, um den es geht.
Changelog oder Versionshinweise: der neue Screen aus dieser Version.

Ein seitenspezifisches Bild lässt einen geteilten Link wirken, als wäre er für dieses Gespräch gemacht, und bekommt mehr Klicks als dieselbe Logo-Karte auf jeder Seite.

Die Vorschau testen

Apps speichern Vorschauen zwischen, manchmal tagelang. Testen Sie also, bevor Sie einen Link breit teilen.

Öffnen Sie die Bild-URL in einem Browser. Wenn sie öffentlich nicht lädt, zeigt sie keine App.
Der Sharing Debugger von Facebook zeigt, was Facebook von Ihrer Seite liest, und sein Button „Erneut scrapen“ aktualisiert eine zwischengespeicherte Vorschau.
Der Post Inspector von LinkedIn macht dasselbe für LinkedIn.
X: Fügen Sie den Link in einen neuen Post ein, ohne ihn zu senden. Das Eingabefeld zeigt die Karte, die X verwenden wird.
Nachrichten und Slack: Senden Sie den Link an sich selbst.

Wenn weiter ein altes Bild erscheint, ändern Sie den Dateinamen des Bildes (zum Beispiel og-2.jpg) und aktualisieren Sie das Tag. Eine neue URL umgeht die meisten Zwischenspeicher.

Häufige Fehler

Ein relativer Bildpfad. /og.jpg funktioniert im Browser, aber nicht in einer Vorschaukarte. Verwenden Sie die vollständige URL mit https://.
Ein für Crawler gesperrtes Bild. Wenn Ihre robots.txt oder eine Login-Seite das Bild sperrt, können Apps es nicht abrufen.
Kleiner Text. In einem Chat wird die Karte womöglich nur in einem Drittel ihrer Größe gezeigt. Alles, was im Original unter etwa 40 Pixel hoch ist, wird unlesbar.
Ein hoher Handy-Screenshot allein. Auf 1.91:1 beschnitten zeigt ein Handy-Screenshot einen Streifen der Statusleiste und kaum mehr. Legen Sie ihn stattdessen auf eine breite Fläche.

Eines mit einem gerahmten Gerät erstellen

Für eine App ist das stärkste Open-Graph-Bild meist die App selbst: Ihr bester Screen in einem Geräterahmen, auf Ihrer Markenfarbe, mit einer kurzen Überschrift. Weil 1.91:1 breit ist, lässt ein Handy in der Mitte viel Platz. Nutzen Sie ihn für eine Überschrift neben dem Handy oder zeigen Sie zwei oder drei Screens in einer Reihe.

FeatureFrame hat eine Vorgabe für eine 1.91:1-Fläche. Auf dem Mac:

Ziehen Sie Ihren Screenshot hinein. FeatureFrame erkennt das iPhone oder iPad an der Größe und rahmt ihn in einem 3D-Modell dieses Geräts ein.
Wählen Sie die 1.91:1-Fläche und als Hintergrund eine Farbe, einen Verlauf oder ein eigenes Bild.
Neigen Sie das Gerät leicht oder fügen Sie bis zu drei Screenshots im Layout „Zeile“ hinzu.
Exportieren Sie in 720p als JPEG. Eine 1.91:1-Fläche ergibt 1376 × 720, dasselbe Format wie 1200 × 630 und etwas schärfer. Nutzen Sie es so oder skalieren Sie es auf die genaue Größe.

Die Überschrift setzen Sie bei Bedarf in einem Design-Tool oder in der Vorlage Ihrer Website; das gerahmte Gerät ist der Teil, der von Hand schwer zu machen ist.

Verwenden Sie dasselbe Bild als Hauptbild Ihrer Launch-Posts: siehe die Checkliste für Launch-Bilder. Für die anderen Größen, die Sie brauchen, siehe Bildgrößen für App-Screenshots und für einzelne Geräterahmen die Bibliothek der Geräterahmen.