OG-Bilder: Warum deine Links in sozialen Medien schlecht aussehen (und wie du es behebst)

Was ist Open Graph und warum ist es wichtig

Open Graph (OG) ist ein Protokoll, das ursprünglich 2010 von Facebook entwickelt wurde und es Webseiten ermöglicht zu steuern, wie ihr Inhalt beim Teilen auf Social-Media-Plattformen erscheint. Wenn jemand eine URL auf Facebook, Twitter, LinkedIn, Slack oder Messaging-Apps teilt, liest die Plattform die im HTML der Seite eingebetteten Open-Graph-Meta-Tags und generiert eine reichhaltige Vorschaukarte mit Titel, Beschreibung und Bild.

Ohne Open-Graph-Tags versuchen Plattformen, deine Seite zu scrapen und zu erraten, was angezeigt werden soll. Das Ergebnis ist oft eine kaputte Vorschau mit fehlendem Bild, abgeschnittenem Titel oder einer irrelevanten Beschreibung. Das führt zu geringerem Engagement, weil Nutzer viel weniger wahrscheinlich auf einen Link klicken, der unvollständig oder unvertrauenswürdig aussieht.

Ein gut gestaltetes OG-Bild kann die Klickraten dramatisch verbessern. Studien haben gezeigt, dass Social-Media-Posts mit korrekten Vorschaubildern deutlich mehr Engagement erhalten als solche ohne. Für jede Webseite, die auf Social-Traffic angewiesen ist, ist Open Graph richtig einzurichten nicht optional — es ist unerlässlich.

OG-Bildspezifikationen

Empfohlene Größe

Die allgemein empfohlene OG-Bildgröße ist 1200 x 630 Pixel mit einem Seitenverhältnis von 1.91:1. Diese Abmessung funktioniert zuverlässig auf allen wichtigen Plattformen und Geräten. Während Plattformen Bilder möglicherweise zuschneiden oder in der Größe ändern, gewährleistet der Start mit 1200x630 die bestmögliche Anzeige überall.

Format und Dateigröße

• Unterstützte Formate: JPEG, PNG, GIF (nur erster Frame) und WebP (eingeschränkte Unterstützung)
• Empfohlenes Format: JPEG für Fotos, PNG für Grafiken mit Text oder Transparenz
• Maximale Dateigröße: Bilder unter 5 MB für Facebook und unter 5 MB für Twitter halten. Ziele in der Praxis auf unter 1 MB für schnelles Laden
• Mindestgröße: Facebook erfordert mindestens 200x200 Pixel, aber Bilder kleiner als 600x315 werden als kleine Thumbnails statt als große Vorschaukarten angezeigt

Details zum Seitenverhältnis

Seitenverhältnis	Abmessungen	Am besten für
1.91:1	1200 x 630	Facebook, LinkedIn, allgemeines Teilen
2:1	1200 x 600	Twitter summary_large_image
1:1	1200 x 1200	Twitter Summary Card, einige Apps

Plattformspezifische Anforderungen

Facebook

Facebook verwendet das Standard-Open-Graph-Protokoll und ist die toleranteste Plattform. Bilder müssen mindestens 200x200 Pixel groß sein, aber alles unter 600x315 wird als kleines Thumbnail gerendert. Für das große Vorschaukartenformat, 1200x630 Pixel verwenden. Facebook cached OG-Bilder aggressiv, also nach dem Aktualisieren eines Bildes muss der Cache mit dem Sharing Debugger geleert werden.

Twitter (X)

Twitter verwendet neben Open-Graph-Tags ein eigenes Card-System. Du musst twitter:card-Meta-Tags zusätzlich zu Standard-OG-Tags einbinden. Twitter unterstützt zwei relevante Card-Typen für Bilder:

• summary: Zeigt ein kleines quadratisches Thumbnail (mindestens 144x144, 1:1-Verhältnis)
• summary_large_image: Zeigt ein großes rechteckiges Bild (mindestens 300x157, empfohlen 2:1-Verhältnis)

Wenn keine Twitter-spezifischen Tags vorhanden sind, greift Twitter auf Standard-OG-Tags zurück.

LinkedIn

LinkedIn folgt dem Open-Graph-Standard eng. Die empfohlene Bildgröße ist 1200x627 Pixel. LinkedIn ist streng bei Bildabmessungen — zu kleine Bilder werden überhaupt nicht angezeigt. LinkedIn cached geteilte URLs ebenfalls, und du kannst deren Post-Inspector-Tool verwenden, um gecachte Vorschauen zu aktualisieren.

Slack und Messaging-Apps

Slack, Discord, Telegram, WhatsApp und iMessage lesen alle Open-Graph-Tags, um Link-Vorschauen zu generieren. Diese Plattformen verarbeiten 1200x630-Bilder generell gut. Slack profitiert besonders von og:image:width- und og:image:height-Tags, da es diese verwendet, um die Vorschau zu rendern, bevor das Bild vollständig geladen ist.

HTML-Meta-Tags für OG-Bilder

Hier ist der vollständige Satz von Meta-Tags, die du im <head>-Bereich deines HTML einbinden solltest:

<!-- Grundlegende Open-Graph-Tags -->
<meta property="og:title" content="Dein Seitentitel" />
<meta property="og:description" content="Eine kurze Beschreibung des Seiteninhalts." />
<meta property="og:image" content="https://example.com/images/og-preview.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- Empfohlene Bild-Tags -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Bildbeschreibung für Barrierefreiheit" />

<!-- Twitter-Card-Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Dein Seitentitel" />
<meta name="twitter:description" content="Eine kurze Beschreibung des Seiteninhalts." />
<meta name="twitter:image" content="https://example.com/images/og-preview.jpg" />
<meta name="twitter:image:alt" content="Bildbeschreibung für Barrierefreiheit" />

Wichtige Punkte zu den Tags

• og:image muss eine absolute URL verwenden. Relative Pfade wie /images/og.jpg funktionieren nicht. Immer die vollständige URL mit Protokoll (https://) angeben.
• og:image:width und og:image:height sind technisch optional, aber dringend empfohlen. Sie ermöglichen es Plattformen, den richtigen Platz für das Bild zuzuweisen, bevor es geladen wird, und verhindern Layout-Verschiebungen.
• twitter:card bestimmt das Layout, das Twitter verwendet. Auf summary_large_image setzen für das große Vorschauformat.
• og:image:alt bietet Barrierefreiheit für Screenreader und wird als Best Practice betrachtet.

Mehrere Bilder

Du kannst mehrere OG-Bilder angeben, indem du den og:image-Tag wiederholst. Plattformen verwenden typischerweise das erste, aber einige ermöglichen dem Nutzer, zu wählen:

<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image" content="https://example.com/images/secondary.jpg" />

Design-Best-Practices für effektive OG-Bilder

Text minimal und groß halten

Social-Media-Vorschaukarten erscheinen in verschiedenen Größen je nach Plattform, Gerät und Kontext. Text auf deinem OG-Bild sollte groß genug sein, um ihn zu lesen, auch wenn das Bild 400 Pixel breit gerendert wird. Beschränke dich auf eine Überschrift und optional einen kurzen Untertitel. Absätze oder Kleingedrucktes vermeiden.

Eine Safe Zone verwenden

Plattformen können dein Bild auf verschiedenen Geräten leicht zuschneiden. Alle wichtigen Inhalte — Text, Logos, wichtige visuelle Elemente — im mittleren 80% des Bildes halten. An jedem Rand mindestens 60 Pixel Abstand lassen.

Konsistent branden

Dein Logo oder Markenzeichen auf jedem OG-Bild einbeziehen, damit geteilte Links sofort erkennbar sind. Auf allen Seiten konsistente Markenfarben, Schriften und Layout-Vorlagen verwenden. Das baut visuelle Erkennung in sozialen Feeds auf.

Kontrastreiche Farben wählen

OG-Bilder erscheinen in belebten Social-Media-Feeds neben Fotos, Anzeigen und anderen Inhalten. Hoher Kontrast zwischen Text und Hintergrund gewährleistet Lesbarkeit. Dunkler Text auf hellem Hintergrund oder weißer Text auf dunklem Hintergrund funktionieren beide gut. Text über komplexen fotografischen Hintergründen ohne Farbüberlagerung vermeiden.

Textlastige Bilder vermeiden

Facebook hat historisch Anzeigen mit zu viel Text bestraft (die 20%-Regel), und obwohl dies jetzt nicht mehr streng durchgesetzt wird, bleibt das Prinzip solide. Bilder, die hauptsächlich aus Text bestehen, sehen aus wie Anzeigen und erhalten weniger Engagement. Das Bild zur Ergänzung des Titels nutzen, nicht zur Wiederholung.

Für den Dunkelmodus gestalten

Viele Nutzer browsen soziale Medien im Dunkelmodus. Testen, wie dein OG-Bild auf hellen und dunklen Hintergründen aussieht. Bilder mit transparenten Hintergründen oder weißen Rändern vermeiden, die im Dunkelmodus verschwinden.

Wie man OG-Bilder erstellt

Es gibt mehrere Ansätze zum Erstellen von OG-Bildern, von manuellem Design bis hin zu vollautomatischer Generierung.

Manuelle Design-Tools

Design-Tools wie Figma, Canva und Adobe Express bieten Vorlagen in 1200x630 Pixel Größe. Dieser Ansatz gibt dir volle kreative Kontrolle, lässt sich aber nicht gut skalieren, wenn du hunderte oder tausende von Seiten hast.

Automatisierte Generierung

Für Blogs und dynamische Inhalte ist die programmatische Generierung von OG-Bildern der effizienteste Ansatz. Viele Frameworks bieten eingebaute oder Community-Lösungen:

• Next.js: Das @vercel/og-Paket generiert Bilder an der Edge mit JSX-ähnlicher Syntax
• Statische Sites: Build-Skripte können Bibliotheken wie sharp oder canvas verwenden, um Bilder während des Build-Prozesses zu generieren
• API-Services: Dedizierte OG-Bild-APIs akzeptieren Parameter und geben gerenderte Bilder auf Anfrage zurück

Einen Online-Generator verwenden

Wenn du schnell ein OG-Bild ohne Infrastructure-Setup benötigst, ist ein Online-Generator der schnellste Weg. Probiere unseren kostenlosen OG-Bild-Generator aus, um korrekt dimensionierte Open-Graph-Bilder mit benutzerdefiniertem Text, Farben und Branding zu erstellen. Einfach den Titel eingeben, das Styling anpassen und das Bild herunterladen.

OG-Bilder testen und debuggen

Nachdem du Open-Graph-Tags zu deinen Seiten hinzugefügt hast, immer vor dem Teilen testen. Hier sind die wichtigsten Debugging-Tools:

Facebook Sharing Debugger

Den Facebook Sharing Debugger besuchen, die URL eingeben und auf "Debuggen" klicken. Das Tool zeigt genau, welche OG-Tags Facebook erkennt, zeigt das Vorschaubild an und meldet Warnungen oder Fehler. Nach dem Vornehmen von Änderungen den "Erneut scrapen"-Button verwenden, um Facebooks Cache zu leeren.

Twitter Card Validator

Der Twitter Card Validator zeigt eine Vorschau, wie dein Link in einem Tweet erscheinen wird. Die URL eingeben und überprüfen, ob der richtige Kartentyp, Bild, Titel und Beschreibung alle korrekt angezeigt werden.

LinkedIn Post Inspector

LinkedIns Post Inspector funktioniert ähnlich. Die URL der Seite eingeben, die du überprüfen möchtest, und es zeigt die Vorschaukarte, die LinkedIn generieren würde. Es zur Aktualisierung von LinkedIns Cache nach dem Aktualisieren der Tags verwenden.

Browser-Erweiterungen

Mehrere Browser-Erweiterungen ermöglichen es, Open-Graph-Tags auf einer beliebigen Seite zu inspizieren, ohne den Browser zu verlassen. Diese Tools zeigen alle Meta-Tags an, zeigen das Vorschaubild und markieren häufige Probleme. Sie sind nützlich, um Seiten von Mitbewerbern schnell zu überprüfen oder die eigene Site zu auditieren.

Manuelle Inspektion

Du kannst die rohen Meta-Tags jederzeit anzeigen, indem du den HTML-Quelltext der Seite inspizierst. In Chrome die Seite rechts-klicken, "Seitenquelltext anzeigen" auswählen und nach og: suchen, um alle Open-Graph-Tags zu finden. Überprüfen, dass die og:image-URL absolut und zugänglich ist.

Häufige Fehler, die vermieden werden sollten

Relative Bild-URLs verwenden

Der häufigste OG-Bild-Fehler ist die Verwendung eines relativen Pfads wie /images/og.jpg anstelle einer absoluten URL wie https://example.com/images/og.jpg. Social-Media-Crawler rufen das Bild von einem separaten Server ab und haben keine Möglichkeit, relative Pfade aufzulösen.

Vergessen, gecachte Bilder zu aktualisieren

Alle wichtigen Plattformen cachen OG-Bilder nach dem ersten Scrape. Wenn du dein Bild aktualisierst, aber den Cache der Plattform nicht leerst, erscheint das alte Bild weiterhin in Vorschauen. Nach dem Vornehmen von Änderungen immer das Debugging-Tool der Plattform verwenden, um ein erneutes Scrapen zu erzwingen.

Zu kleine Bilder verwenden

Bilder unter den Mindestabmessungen (200x200 für Facebook, 300x157 für Twitter) werden entweder überhaupt nicht angezeigt oder als winzige Thumbnails statt als große Vorschaukarten gerendert. Immer 1200x630 verwenden, um das große Kartenformat sicherzustellen.

Den twitter:card-Tag vergessen

Ohne den twitter:card-Meta-Tag verwendet Twitter standardmäßig die grundlegende "summary"-Karte mit einem kleinen quadratischen Bild. Wenn du die große Bildvorschau auf Twitter möchtest, musst du explizit <meta name="twitter:card" content="summary_large_image" /> einbinden.

Bilder über HTTP bereitstellen

Wenn deine Seite HTTPS verwendet, aber die og:image-URL auf eine HTTP-Ressource zeigt, werden einige Plattformen das Bild aufgrund von Mixed-Content-Einschränkungen blockieren oder ignorieren. OG-Bilder immer über HTTPS bereitstellen.

Bilddateigröße ignorieren

Ein 8-MB-OG-Bild könnte technisch die Dimensionsanforderungen erfüllen, aber Crawler könnten beim Herunterladen die Zeit überschreiten. JPEG-Bilder auf 80-85% Qualität komprimieren oder optimierte PNG-Dateien verwenden, um Dateigrößen unter 1 MB zu halten.

Alt-Text nicht einbeziehen

Der og:image:alt-Tag wird oft übersehen, hat aber einen wichtigen Barrierefreiheitszweck. Screenreader verwenden diesen Text, um das Bild für sehbehinderte Nutzer zu beschreiben. Es dauert nur wenige Sekunden zum Hinzufügen und verbessert das Erlebnis für alle Nutzer.

Fazit

Open-Graph-Bilder sind eine der einfachsten und wirkungsvollsten Optimierungen, die du für das Teilen in sozialen Medien vornehmen kannst. Durch die Verwendung der korrekten 1200x630-Abmessungen, das Einbeziehen der richtigen Meta-Tags und das Befolgen von Design-Best-Practices stellst du sicher, dass jeder geteilte Link deinen Inhalt im bestmöglichen Licht repräsentiert.

Beginne damit, deine bestehenden Seiten mit den oben genannten Debugging-Tools zu auditieren, Probleme zu beheben und eine konsistente Vorlage für neue Inhalte zu etablieren. Wenn du OG-Bilder schnell generieren musst, probiere unseren kostenlosen OG-Bild-Generator aus, um in Sekunden professionelle Vorschaukarten zu erstellen.