Wenn Sie einen Link in eine Nachricht, einen Tweet, einen LinkedIn-Beitrag oder einen Slack-Kanal einfügen, zieht sich die Plattform eine Vorschaukarte heran – ein großes Bild, einen Titel, einen Textausschnitt. Dieses Bild ist das Open-Graph-Bild (OG-Bild), und es leistet mehr Arbeit als Ihre Überschrift. In einem schnell scrollenden Feed ist es das Bild, das den Daumen stoppt. Eine leere oder fehlerhafte Vorschau wirkt lieblos und wird übersprungen.
So erstellen Sie eines, das den Klick verdient – in der richtigen Größe und mit Text, der tatsächlich lesbar ist.
Die Größe: 1200×630
Das Standard-OG-Bild misst 1200×630 Pixel, ein Seitenverhältnis von 1,91:1. Facebook, LinkedIn, Slack, Discord und die meisten Link-Vorschausysteme sind darauf ausgelegt. Wenn Sie diese Größe richtig hinbekommen, sind Sie fast überall abgesichert.
Je nachdem, wo der Link landet, kommen ein paar verwandte Größen ins Spiel:
| Plattform / Zweck | Größe | Verhältnis |
|---|---|---|
| Open Graph (Standard) | 1200×630 | 1,91:1 |
| Twitter/X große Karte | 1200×628 | ~1,91:1 |
| YouTube-Thumbnail | 1280×720 | 16:9 |
| Quadratisch (Feeds/IG) | 1080×1080 | 1:1 |
| Story / vertikal | 1080×1920 | 9:16 |
Für einen Blogbeitrag brauchen Sie nicht all diese Formate – 1200×630 ist das Arbeitspferd. Aber wenn Sie zusätzlich ein Video-Thumbnail oder einen quadratischen Social-Post erstellen, ist es hilfreich, gleich die richtige Form zu erzeugen, statt ein Bild schlecht zuzuschneiden.
Textregeln: lesbar in Thumbnail-Größe
Der Fehler, der OG-Bilder ruiniert, besteht darin, sie wie ein Plakat zu behandeln, das man im Vollbild betrachtet. Das tut niemand. Die meisten Menschen sehen die Karte vielleicht in einem Drittel ihrer echten Größe, auf dem Handy, mitten im Scrollen. Gestalten Sie für diesen Fall.
- Großer Text, wenige Wörter. Ein kurzer Titel – fünf bis acht Wörter – der auch verkleinert lesbar bleibt. Wenn Sie in Vollgröße schielen müssen, ist er im Feed unlesbar.
- Starker Kontrast. Heller Text auf dunklem oder gesättigtem Hintergrund oder umgekehrt. Text auf einem unruhigen Foto ohne Unterlage verschwindet.
- Das Wichtige zentriert halten. Verschiedene Plattformen beschneiden die Ränder leicht unterschiedlich. Halten Sie Text und Logos von den äußeren Rändern fern, damit nichts abgeschnitten wird.
- Eine Idee pro Bild. Das OG-Bild ist ein Köder, keine Zusammenfassung. Titel, vielleicht ein Untertitel, fertig.
Hintergründe, die den Text hervorheben
Ein flacher Verlauf ist die verlässliche Wahl. Er gibt dem Text eine saubere Grundlage, wirkt modern und kämpft nie mit den Worten, wie es ein unruhiges Foto tut. Ein Verlauf von dunkel zu leicht dunkler mit hellem Text ist nahezu narrensicher.
Das OG-Bild-Tool ist genau darauf ausgelegt: Wählen Sie eine Größenvorlage (OG 1200×630, Twitter, YouTube, quadratisch oder Story), suchen Sie einen Verlaufshintergrund aus und fügen Sie Titel und Untertitel hinzu. Sie erhalten eine Share-Karte, die in jeder Größe klar lesbar ist – ohne eine vollwertige Design-App zu öffnen.
Das HTML, das es sichtbar macht
Das Bild zu erstellen ist nur die halbe Arbeit. Die Plattform muss wissen, wo sie es findet. Fügen Sie diese Tags in den <head> Ihrer Seite ein:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Ihr Titel">
<meta property="og:description" content="Ein klarer Satz.">
<meta name="twitter:card" content="summary_large_image">
Die Zeile twitter:card mit dem Wert summary_large_image ist es, die Ihnen auf X die große Karte statt eines winzigen Thumbnails beschert. Absolute URLs (mit https://) sind wichtig – relative Pfade lassen sich oft nicht auflösen, wenn ein Scraper Ihre Seite abruft.
Testen Sie es nach der Veröffentlichung. Fügen Sie Ihre URL in den Link-Vorschau-Debugger einer Plattform ein (Facebooks Sharing Debugger, LinkedIns Post Inspector), um zu bestätigen, dass das Bild lädt, und um eine zwischengespeicherte alte Version zu löschen. Plattformen speichern Vorschauen aggressiv zwischen. Wenn Sie das Bild also aktualisiert haben und trotzdem noch das alte sehen, ist die Neu-Scrape-Schaltfläche des Debuggers die Lösung.
Erstellen, nicht hochladen
Das Ganze läuft in Ihrem Browser – das Bild wird lokal mit Canvas zusammengesetzt und niemals auf einen Server hochgeladen. Es ist kostenlos, ohne Anmeldung, ohne Wasserzeichen quer über Ihrer Share-Karte, und es funktioniert nach dem ersten Besuch auch offline. Erzeugen Sie das 1200×630-Bild, verdrahten Sie die Meta-Tags, jagen Sie es einmal durch einen Debugger, und Ihre Links beginnen, ihr Gewicht zu tragen.