So nutzt du: OG-Bildgenerator
- Wähle eine Vorlage aus – „Gradient“, „Split“, „Minimal“, „Spotlight“ oder „Card“. Jede Vorlage enthält passende Farben, die du ändern kannst.
- Gib deinen Titel und Untertitel ein. Die Schriftgröße des Titels wird automatisch verkleinert und der Text wird umgebrochen, sodass er immer passt.
- Füge deinen Markennamen, ein Emoji, ein Logo oder ein Hintergrundfoto hinzu (mit einstellbarer Abdunkelung, damit der Text gut lesbar bleibt).
- Lade die PNG-Datei (oder bei Fotos ein kleineres JPEG) herunter und lade sie auf deine Website hoch.
- Gib die URLs der Seite und des Bildes ein und kopiere die generierten „og:“- und „twitter:“-Meta-Tags in die
<head>.
Was ist ein OG-Bild?
Ein OG-Bild (Open Graph) ist das Bild, das angezeigt wird, wenn ein Link auf Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage und vielen anderen Apps geteilt wird. Es wird mit dem og:image Meta-Tag aus dem Open-Graph-Protokoll deklariert, das ursprünglich von Facebook entwickelt wurde und mittlerweile von fast jeder Plattform gelesen wird, die Link-Vorschauen anzeigt. X liest zusätzlich twitter:card — auf summary_large_image es das Bild in voller Breite anzeigt. Eine übersichtliche, markenspezifische Vorschau hebt einen geteilten Link in einem überfüllten Feed hervor und zeigt den Nutzern schon vor dem Klicken, was sie erwartet.
Die richtige Größe: 1200 × 630
1200 × 630 Pixel (ein Seitenverhältnis von 1,91:1) ist die von Facebook empfohlene Größe, die plattformübergreifend scharf dargestellt wird. Die große Übersichtskarte von X verwendet einen 2:1-Rahmen, sodass oben und unten möglicherweise ein paar Pixel abgeschnitten werden – dieser Generator hält den Text sicher innerhalb eines Sicherheitsrandes. Halte die Dateigröße unter 5 MB (das Limit von X; Facebook erlaubt 8 MB); ein PNG aus diesem Tool ist in der Regel ein paar hundert KB groß, und JPEGs sind bei Fotohintergründen kleiner.
Benötigte Meta-Tags
<meta property="og:title" content="How to Compress Images">
<meta property="og:description" content="A practical guide…">
<meta property="og:image" content="https://example.com/og/compress.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">Die og:image URL muss absolut sein (einschließlich https://) und öffentlich erreichbar sein – nicht hinter einer Anmeldung, durch robots.txt blockiert oder von localhost bereitgestellt. Durch die Angabe von Breite und Höhe kann Facebook die Vorschau bereits beim allerersten Teilen rendern, anstatt darauf zu warten, dass das Bild abgerufen wird. Erstelle die restlichen Head-Tags mit dem Meta-Tag-Generator und überprüfe das Live-Ergebnis mit dem Open-Graph-Checker.
Gestaltungstipps für Link-Vorschauen
- Kurzer, großer Text. Vorschauen werden auf Smartphones oft mit einer Breite von etwa 500 px oder weniger angezeigt. Strebe einen Titel mit 4–10 Wörtern an; die automatische Anpassung warnt dich, wenn Text abgeschnitten werden muss.
- Wiederhole nicht die URL-Leiste. Die Plattformen zeigen deine Domain und den Seitentitel bereits unter dem Bild an, nutze das Bild also als Blickfang und nicht die vollständige Überschrift plus Beschreibung.
- Hoher Kontrast. Nutze den Schieberegler zum Abdunkeln bei Fotos, damit weißer Text lesbar bleibt, und teste sowohl mit hellen als auch mit dunklen App-Designs.
- Ein Bild pro Seite. Einzigartige OG-Bilder für wichtige Seiten – Blogbeiträge, Produktseiten, Dokumente – erhalten deutlich mehr Aufmerksamkeit als ein einziges, siteweites Logo.
- Cache aktualisieren. Plattformen speichern Vorschauen im Cache. Nachdem du ein Bild geändert hast, rufe die URL erneut im Facebook Sharing Debugger oder im LinkedIn Post Inspector ab oder gib der Datei einen neuen Namen.
In Webflow legst du das Bild pro Seite unter „Seiteneinstellungen“ → „Open-Graph-Einstellungen“ fest oder verknüpfst es bei CMS-Sammelseiten mit einem Bildfeld.
Auch gesucht als: og-bild, open-graph-bild, bild zum teilen in sozialen netzwerken, twitter-kartenbild, vorschau-bild des links, 1200×630, vorschau für soziale medien, og:image.
Passende Tools zu: OG-Bildgenerator
- Code to Image — Paste a snippet and get a polished code screenshot in seconds: syntax highlighting for JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go and PHP, a choice of themes, a window frame with a file name, a gradient or transparent background, padding and line numbers.
- SERP Preview — Write a title tag and meta description and see exactly where Google is likely to cut them off — measured in pixels, not just characters, on desktop and mobile.
- Bildgrößenänderer — Passe die Größe eines Fotos auf exakte Pixelabmessungen oder einen Prozentsatz an, schneide es so zu, dass es die Größe eines Social-Media-Beitrags ausfüllt, oder passe es in einen Rahmen mit einer Hintergrundfarbe ein – alles direkt in deinem Browser.
- Bildkompressor — Verkleinere Fotos und Grafiken um 50–90 % ohne sichtbaren Qualitätsverlust.
Häufige Fragen
Wie groß sollte ein Open-Graph-Bild sein?
Soll ich für mein OG-Bild PNG oder JPEG verwenden?
Warum zeigt Facebook oder LinkedIn immer noch mein altes Profilbild an?
Brauche ich separate Twitter (X)-Tags?
twitter:card so eingestellt werden, summary_large_image eingestellt werden, um das große Bild anzuzeigen. Der Codeausschnitt enthält zur Sicherheit beide Varianten.