Open-Graph-Bild

Ein Open-Graph-Bild ist das Vorschaubild, das soziale Netzwerke, Messenger und Kollaborationstools anzeigen, wenn jemand einen Link teilt. Die Seite legt es mit dem Meta-Tag og:image aus dem Open-Graph-Protokoll fest, das Facebook 2010 eingeführt hat.

Der Wert des Tags ist eine absolute URL zum Bild. Optionale Tags geben Breite, Höhe, MIME-Typ und Alternativtext an: og:image:width, og:image:height, og:image:type und og:image:alt. X, früher Twitter, liest eigene twitter:image-Tags und greift auf die Open-Graph-Tags zurück, wenn diese fehlen.

Dienste rufen das Bild ab und speichern es im Cache, wenn ein Link zum ersten Mal geteilt wird. Änderungen erscheinen daher womöglich erst, wenn der Cache aktualisiert wurde.

Warum OG-Bilder wichtig sind

Ein Link mit einem klaren Vorschaubild nimmt in einem Feed oder Chat mehr Platz ein als eine bloße URL und zeigt Lesern vor dem Klick, worum es auf der Seite geht. Ohne og:image wählen Dienste ein Bild von der Seite aus oder zeigen gar kein Bild.

Spezifikationen für OG-Bilder

Eigenschaft	Übliche Praxis
Größe	1200×630 Pixel
Seitenverhältnis	Etwa 1,91:1
Format	PNG oder JPG
URL	Absolut, öffentlich über HTTPS erreichbar
Text	Abstand zu den Rändern, die manche Dienste beschneiden

Jede Plattform veröffentlicht eigene Vorgaben und ändert sie im Lauf der Zeit. Prüfen Sie die aktuelle Dokumentation der Plattformen, die für Sie wichtig sind.

So erstellen Sie wirkungsvolle OG-Bilder

1. Beginnen Sie mit einer Arbeitsfläche von 1200×630.
2. Fügen Sie einen kurzen Titel in großer Schrift und einen klaren Produkt-Screenshot oder ein anderes Motiv hinzu.
3. Platzieren Sie wichtige Inhalte im mittleren Bereich.
4. Exportieren Sie textlastige Designs als PNG und Fotos als JPG, und halten Sie die Datei klein.
5. Testen Sie den Link im Vorschau- oder Debugging-Tool jeder Plattform.

Im echten Veröffentlichungsablauf

Teams erzeugen OG-Bilder oft aus einer Vorlage für jeden Blogartikel oder jede Dokumentationsseite. Ein Produkt-Screenshot in der Vorlage zeigt die tatsächliche Oberfläche. Nehmen Sie ihn größer auf, als der Platz in der Vorlage ist, und skalieren Sie ihn dann für scharfen Text herunter.

Häufige Fehler

• Eine relative URL in og:image verwenden.
• Text nahe an Rändern platzieren, die manche Plattformen beschneiden.
• Nach dem Aktualisieren des Bildes den Cache vergessen.
• Einen hohen Screenshot verwenden, der zu einem unlesbaren Streifen beschnitten wird.

Ein Bild sofort bearbeiten?

Erstellen Sie mit Social Image Composer aus einem Screenshot eine Vorschau im Format 1200×630, und prüfen Sie das Seitenverhältnis mit Aspect Ratio Calculator.

Häufige Fragen

Ist das OG-Bild dasselbe wie das Favicon?

Nein. Das Favicon ist ein kleines Website-Symbol. Das OG-Bild ist eine große Vorschau für geteilte Links.

Kann ich SVG für og:image verwenden?

Viele Dienste rendern keine SVG-Vorschauen. Verwenden Sie PNG oder JPG.

Quellen

• The Open Graph protocol

Weiterführende Ressourcen

• Favicon: das kleine Symbol in Browser-Tabs.
• Image Compressor: die Vorschaudatei klein halten.