Open Graph Bilder: Größen, Best Practices & Beispiele
Open-Graph-Bilder bestimmen, was beim Teilen Ihrer Seite auf Facebook, Twitter oder LinkedIn angezeigt wird. Ein falsches oder fehlendes Bild verringert die Klickrate, noch bevor Besucher Ihre Seite erreichen.
Dieser Leitfaden erklärt optimale Größen, Designprinzipien, HTML-Implementierung und Testwerkzeuge – alles, was Sie für perfekte Social-Media-Vorschauen auf allen Plattformen brauchen.
Inhaltsverzeichnis
Was sind Open-Graph-Bilder und warum sind sie wichtig
Open Graph ist ein von Facebook eingeführtes Protokoll, mit dem Sie steuern, wie Ihre Webseiten in sozialen Netzwerken angezeigt werden. Das Meta-Tag og:image bestimmt das Vorschaubild.
Teilt jemand einen Link auf Facebook, Twitter oder LinkedIn, ruft die Plattform die Open-Graph-Metadaten ab und erstellt eine Vorschaukarte. Diese mit Bild, Titel und Beschreibung ist oft das Einzige, was Nutzer vor dem Klick sehen.
Ein gut gestaltetes Open-Graph-Bild steigert die Klickrate deutlich. Fehlt es oder ist es falsch dimensioniert, führt das zu fehlerhaften Vorschauen, abgeschnittenen Thumbnails oder unprofessionellen Platzhaltern.
Klickrate
Seiten mit korrekt dimensionierten, kontrastreichen OG-Bildern erzielen durchgehend bessere Ergebnisse als Seiten ohne Bild oder mit minderwertigen Platzhaltern.
Mehr Klicks bei jedem Teilen
Markenwiedererkennung
Eine einheitliche visuelle Identität bei jedem geteilten Link schafft Vertrauen und Wiedererkennung, noch bevor Besucher Ihre Seite erreichen.
Konsistent über alle Netzwerke
SEO-Signal
Soziale Interaktionen durch ansprechende Vorschauen erzeugen Backlinks und Traffic-Signale, die langfristig das organische Ranking stärken.
Indirekter Ranking-Vorteil
Plattformspezifische Bildanforderungen
Jede soziale Plattform hat eigene Empfehlungen für Bildgröße, Seitenverhältnis und Dateigröße. Die Einhaltung verhindert Beschnitt, Verzerrungen und Platzhalter.
| Plattform | Empfohlene Größe | Seitenverhältnis | Maximale Dateigröße | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Universelle sichere Größe: 1200 × 630 Pixel
Ein 1200 × 630 px Bild im Seitenverhältnis 1,91:1 funktioniert auf Facebook, LinkedIn, WhatsApp, Slack und den meisten anderen Plattformen. Twitter zeigt es zwar mit 16:9 Beschnitt, wichtige Inhalte sollten zentriert bleiben, um Abschneiden zu vermeiden.
Designprinzipien für effektive Open-Graph-Bilder
Das Bild wird in sozialen Feeds klein angezeigt. Gestalten Sie zuerst für das Thumbnail, nicht für die Vollbildversion.
Platzieren Sie das wichtigste visuelle Element – Logo, prägnante Überschrift oder zentrale Illustration – im mittleren 80 % Bereich. Plattformen schneiden oft die Ränder ab, Inhalte am Rand können verloren gehen.
Hoher Kontrast
Verwenden Sie starken Kontrast zwischen Text, Vordergrund und Hintergrund. Bilder mit geringem Kontrast gehen in vollen Feeds neben auffälligen Beiträgen unter.
In jeder Größe lesbar
Klare Typografie
Enthält Ihr Bild Text, verwenden Sie große, fette Schriftarten (mindestens 36 px) und vermeiden Sie mehr als zwei Zeilen. Kleinere Schrift ist im Thumbnail kaum lesbar.
Auch klein gut lesbar
Markenkonsistenz
Fügen Sie in jedes OG-Bild Ihr Logo oder Ihre Markenfarben ein. Jeder geteilte Beitrag ist eine Markenpräsenz, auch ohne Klick.
Jedes Teilen = Markenberührung
Das richtige Bildformat wählen
Verwenden Sie JPEG für Fotos und PNG für Grafiken mit Text, Logos oder Transparenz. WebP wird immer besser unterstützt, ist aber noch nicht bei allen Social-Crawlern universal.
| Format | Am besten geeignet für | Unterstützung in sozialen Netzwerken | Typische Dateigröße | Empfehlung |
|---|---|---|---|---|
| JPEG | Fotos, Farbverläufe | Universell | 60 – 150 KB | Standard für Fotos |
| PNG | Text, Logos, Transparenz | Universell | 100 – 300 KB | Standard für Grafiken |
| WebP | Beides, kleinere Dateien | Twitter, Slack (nicht alle) | 40 – 120 KB | Nur Ergänzung |
Zielen Sie auf 100–200 KB für Ihr OG-Bild. Kleinere Dateien sind besser, aber vermeiden Sie zu starke Kompression, die Pixelbildung verursacht. WhatsApp begrenzt auf 300 KB – wenn WhatsApp wichtig ist, bleiben Sie darunter.
Mehr zu Bildformaten und deren Vor- und Nachteilen finden Sie in der Leitfaden zur Website-Bildoptimierung . Für die Umwandlung bestehender Bilder lesen Sie die JPG-zu-WebP-Anleitung für den täglichen Workflow.
HTML-Implementierung und Meta-Tags
Platzieren Sie Open-Graph-Meta-Tags im <head>-Bereich Ihres HTML. Der og:image-Tag muss eine absolute URL verwenden – relative Pfade werden von Social-Crawlern nicht unterstützt.
Mindestens erforderlich sind die Tags og:title, og:description, og:image und og:url. Der twitter:card-Tag aktiviert das große Bildkartenformat bei Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Geben Sie immer og:image:width und og:image:height an. Ohne diese Angaben müssen Plattformen das Bild erst laden und prüfen, was die Vorschau verzögert und die Gefahr eines Platzhalters erhöht.
Wenn Sie Blazor verwenden, übernimmt die Blazor SEO-Metadaten-Komponente verwaltet alle Open-Graph-Tags automatisch mit kulturspezifischen URLs.
Testen und Debuggen von Open-Graph-Bildern
Soziale Plattformen cachen Open-Graph-Metadaten stark. Nach Änderungen an Tags oder Bild nutzen Sie die offiziellen Debug-Tools, um einen frischen Crawl zu erzwingen und die Vorschau zu prüfen.
Facebook Sharing Debugger
Geben Sie Ihre URL bei developers.facebook.com/tools/debug ein, um frische Metadaten abzurufen, das von Facebook gewählte Bild zu sehen und Validierungswarnungen oder -fehler zu prüfen.
Cache-Aktualisierung erzwingen
Twitter Card Validator
Nutzen Sie cards-dev.twitter.com/validator, um die Twitter-Karte genau zu prüfen. Klicken Sie auf ‚Preview card‘, um Thumbnail, Titel und Beschreibung im Kartenformat zu sehen.
Vorschau vor dem Posten
LinkedIn Post Inspector
Der LinkedIn Post Inspector unter linkedin.com/post-inspector aktualisiert den Cache für Ihre URL und zeigt die Vorschau mit aktuellen Metadaten.
LinkedIn-Cache aktualisieren
Häufige Fehler und deren Behebung
Die meisten Probleme mit Open-Graph-Bildern beruhen auf wenigen wiederkehrenden Fehlern. Zu wissen, worauf zu achten ist, spart Zeit beim Debuggen.
- Relative URLs. Social-Crawler können relative Pfade nicht auflösen. Der Wert von og:image muss eine vollständige absolute URL mit Protokoll und Domain sein (https://ihredomain.de/pfad/bild.jpg).
- Fehlende Breiten- und Höhenangaben. Ohne og:image:width und og:image:height müssen Plattformen das Bild herunterladen und prüfen, bevor sie die Vorschau erstellen. Fügen Sie beide Angaben hinzu, um diesen Schritt zu vermeiden.
- Bilder hinter Authentifizierung. Crawler können nicht auf Bilder zugreifen, die eine Anmeldung erfordern oder durch robots.txt blockiert sind. Das OG-Bild muss öffentlich ohne Authentifizierung zugänglich sein.
- Falsches Seitenverhältnis. Ein Bild, das stark vom Seitenverhältnis 1,91:1 abweicht, wird beschnitten oder mit störenden Balken angezeigt. Testen Sie immer vor der Veröffentlichung.
- Veralteter Plattform-Cache. Wenn Sie die Bilddatei ändern, aber den Dateinamen oder Query-String nicht anpassen, liefern Plattformen die alte Version aus dem Cache. Ändern Sie den Dateinamen oder erzwingen Sie mit Debug-Tools eine Aktualisierung.
Automatisierung der Open-Graph-Bilderstellung
Für kleine Websites und Blogs ist ein statisches OG-Bild pro Seite die einfachste und zuverlässigste Lösung. Bei größeren Publikationen oder Anwendungen mit individuellen Vorschauen pro Seite ist dynamische Generierung sinnvoll.
Die dynamische OG-Bilderstellung erzeugt bei Anfrage oder Build-Zeit ein individuelles Bild basierend auf Titel, Beschreibung oder anderem Inhalt. So entsteht für jede Seite eine einzigartige, markenkonforme Vorschau ohne manuelle Bildbearbeitung.
Wann automatisieren
Automatisieren Sie, wenn viele Seiten jeweils ein eigenes Bild benötigen, Inhalte sich häufig ändern oder manuelle Bildbearbeitung nicht skalierbar ist.
Große Mengen oder dynamische Inhalte
Wann statische Bilder verwenden
Für die meisten Seiten – Landingpages, Anleitungen und Evergreen-Artikel – liefert ein sorgfältig gestaltetes statisches Bild bessere Qualität und Markenkonsistenz als ein generiertes.
Qualitätsorientierter Ansatz
Beliebte Tools für dynamische Generierung sind Cloudinary (Transformationen via URL-Parameter), Vercel OG (rendert React/HTML am Edge) sowie Puppeteer- oder Playwright-basierte Screenshot-Pipelines für jede Technologie.