Im ersten Jahr, in dem ich den SEOJuice-Blog betrieben habe, habe ich über Open Graph Images ehrlich gesagt überhaupt nicht nachgedacht. Wir haben Artikel veröffentlicht, sie auf LinkedIn und Twitter geteilt und uns dann nicht weiter darum gekümmert. Die Vorschauen sahen für mich okay aus — dachte ich zumindest, weil ich nie wirklich geprüft habe, was andere Leute sehen, wenn sie auf „Teilen“ klicken.
Dann schickte mir ein Kunde einen Screenshot von unserem Blogartikel, geteilt im Slack seiner Firma. In der Vorschau war nur unser Logo mit 50x50 Pixeln zu sehen, in ein graues Rechteck gezogen. Der Titel war abgeschnitten. Es wirkte schlicht kaputt. Dieser Beitrag hatte zwei Tage Schreibarbeit gekostet, und die Linkvorschau ließ ihn wie Spam aussehen.
Ich habe dann ein Wochenende damit verbracht, für unsere Top-20-Beiträge individuelle Open Graph Images einzubauen. Innerhalb eines Monats stiegen die Social-Click-Through-Rates dieser Beiträge im Schnitt von 1.8% auf 4.1%. Das ist eine Verbesserung um 2.3x für etwas, das pro Beitrag ehrlich gesagt ungefähr 15 Minuten Arbeit kostet. (Fairerweise: Das sind unsere eigenen Daten aus LinkedIn- und Twitter-Analytics, keine kontrollierte Studie. Deine Ergebnisse hängen von Zielgruppe und Plattform ab.)
Open Graph ist ein Protokoll, das Facebook 2010 eingeführt hat, damit du steuern kannst, wie deine Seiten aussehen, wenn sie in sozialen Netzwerken geteilt werden. Das Open Graph Image ist die visuelle Vorschau — also das große Bild in der Linkvorschau auf Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord oder jeder anderen Plattform mit URL-Vorschauen. Ohne OG-Tags raten Plattformen. Mit ihnen legst du fest, wie dein Inhalt in der Vorschau präsentiert wird.
Jede Plattform liest OG-Tags, aber sie zeigt sie unterschiedlich an. Das habe ich auf die harte Tour gelernt, als eine völlig ordentliche Facebook-Vorschau auf LinkedIn plötzlich beschnitten war. Hier ist die Referenztabelle, die ich mir als Lesezeichen gespeichert habe:
| Plattform | Empfohlene Größe | Seitenverhältnis | Format | Max. Dateigröße | Hinweise |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | Zeigt keine Bilder unter 200x200px an. 600x315 ist das Minimum für eine große Vorschau. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | Rendert keine große Vorschau für Bilder unter 300x157px. Nutzt twitter:image, wenn gesetzt, sonst og:image. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Das Mindestmaß von 1200 x 627 ist eine harte Untergrenze. Darunter zeigt LinkedIn das Bild gar nicht erst an. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB empfohlen | Hat auf langsamen mobilen Verbindungen Probleme mit Bildern über 300KB. Für zuverlässige Anzeige besser unter 200KB bleiben. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Zeigt Linkvorschauen in Kanälen automatisch an. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Unterstützt animierte GIFs in Vorschauen. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N/A | Verwendet OG-Tags für Linkvorschauen in Chatblasen. |
Twitters etwas höheres Seitenverhältnis (16:9 statt 1.91:1) bedeutet, dass dein 1200x630-Bild minimal beschnitten werden könnte. In der Praxis habe ich nie einen relevanten Unterschied gesehen. Erstelle keine separaten Bilder pro Plattform, außer du planst gerade eine große Kampagne, bei der wirklich jedes Pixel zählt.
Eine Sache will ich hervorheben, weil sie mich Zeit gekostet hat: Das Mindestmaß bei LinkedIn ist absolut verbindlich. Wenn dein Bild 1199 Pixel breit ist, zeigt LinkedIn nichts an. Keine kleinere Version — einfach nichts. Ich habe eine halbe Stunde mit Debugging verbracht, bevor ich überhaupt auf die Idee kam, die tatsächlichen Bildmaße nachzumessen.
OG-Tags gehören in den <head>-Bereich deines HTML. Hier ist das vollständige Set, das du für jede Seite brauchst:
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Wichtige technische Details, von denen ich die meisten mindestens einmal falsch gemacht habe:
og:image. Relative Pfade werden auf den meisten Plattformen nicht korrekt aufgelöst. Das war bei unserer ersten Einrichtung mit Abstand mein häufigster Fehler.og:image:width und og:image:height helfen Plattformen, die Vorschau schneller zu rendern, ohne zuerst das komplette Bild herunterladen zu müssen.twitter:card auf summary_large_image für die vollbreite Bildvorschau. Ohne das zeigt Twitter stattdessen nur ein winziges quadratisches Thumbnail. Das habe ich bei unserer ersten Implementierung übersehen und mich gewundert, warum die Twitter-Vorschauen so mickrig aussahen.WordPress: Plugins wie Yoast SEO, RankMath und SEOPress fügen in jedem Beitrags- und Seiteneditor Felder für OG-Tags hinzu. Du lädst das Bild hoch, trägst Titel und Beschreibung ein, und das Plugin gibt die Meta-Tags aus. Wenn du auf WordPress bist, ist das der einfachste Weg.
Next.js / React: Nutze die Komponente next/head oder die Metadata API (App Router), um OG-Tags pro Seite zu setzen. Wenn du mit dem App Router arbeitest, macht der Metadata-Export das ziemlich unkompliziert.
Statische Websites: Füge die Meta-Tags direkt in dein HTML-Template ein. Die meisten Static Site Generatoren (Hugo, Eleventy, Jekyll) unterstützen Front-Matter-Variablen, die OG-Tags automatisch befüllen.
Ein technisch korrektes Open Graph Image, das schlecht aussieht, ist schlimmer als gar kein Bild. Ich habe unser Open-Graph-Image-Template wahrscheinlich fünfmal überarbeitet, und das hier funktioniert aus meiner Erfahrung am besten:
Jede Plattform schneidet ein bisschen anders zu. Halte alle wichtigen Inhalte — Text, Logos, zentrale visuelle Elemente — innerhalb der mittleren 80% des Bildes. Das heißt bei einer 1200x630-Fläche mindestens 120px Luft zu jedem Rand. Gelernt habe ich das, nachdem LinkedIn bei einem unserer Open Graph Images den ersten Buchstaben eines Titels abgeschnitten hat.
Wenn dein Open Graph Image Text enthält (und meistens sollte es das — also den Titel des Artikels oder der Seite), dann mach ihn groß. Mindestens 48px bei einer Canvas-Breite von 1200px. Diese Bilder werden in mobilen Feeds oft nur mit 300px Breite angezeigt. Wenn du den Text bei 300px Breite nicht lesen kannst, ist er zu klein. Ich teste das in Figma, indem ich auf ungefähr 25% herauszoome — wenn ich die Headline dann noch lesen kann, funktioniert sie auch später im Feed.
Verwende deine Markenfarben, Schriften und die Platzierung deines Logos konsistent. Wenn jemand dein Open Graph Image im Feed sieht, sollte die Person schon vor dem Lesen erkennen, dass es von dir ist. Wir haben in Canva ein Template mit unseren Brand-Farben und unserer Logo-Position gebaut und nutzen es für jeden Beitrag wieder. Dauert inzwischen etwa 5 Minuten pro Bild.
Was nicht funktioniert: generische Stockfotos, nur dein Logo auf weißem Hintergrund oder ein Bild, das mit dem Inhalt nichts zu tun hat. Ich habe alle drei Varianten getestet. An denen wird jedes Mal vorbeigescrollt.
Ich prüfe OG-Tags in jedem Website-Audit, das wir durch SEOJuice laufen lassen. Dieselben Probleme tauchen immer wieder auf:
og:image erkennen Plattformen automatisch irgendein Bild auf deiner Seite. Das Ergebnis ist meist dein Logo in 100x100 Pixeln oder ein zufälliges Sidebar-Bild. Prüf deine Seiten mit unserem SEO audit tool — es markiert fehlende OG-Tags.http:// beginnt, wird sie nicht angezeigt.Teste deine OG-Tags immer vor und nach Änderungen. Ich prüfe jeden Beitrag vor der Veröffentlichung mindestens mit zwei dieser Tools:
| Tool | Plattform | URL | Hinweise |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
Leert auch den Facebook-OG-Cache. Nach dem Aktualisieren der Tags auf „Scrape Again“ klicken. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Zeigt eine Vorschau, wie deine Karte gerendert wird. Leert auch den Twitter-Cache. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Prüft und leert den LinkedIn-OG-Cache. | |
| OpenGraph.xyz | Multi-Plattform | opengraph.xyz |
Vorschau für mehrere Plattformen gleichzeitig. Generiert auch Open Graph Images. |
| SEOJuice Screenshot Generator | Erstellung | /tools/screenshot-generator/ | Erstellt automatisch Open Graph Images im Markenlook aus deinen Seiten. |
yoursite.com/page/?v=2. Entferne ihn wieder, sobald der Cache aktualisiert wurde.
Ich will hier präzise sein, weil das oft übertrieben dargestellt wird: Open Graph Images beeinflussen Google-Rankings nicht direkt. Google nutzt dein og:image-Tag nicht als Ranking-Signal. Punkt.
Aber die indirekten Effekte sind real, und ich habe sie bei unserem eigenen Content aus erster Hand gesehen:
<img>-Elemente auf deiner Seite bevorzugt werden, schadet ein hochwertiges Open Graph Image als Fallback definitiv nicht.Die CTR-Daten aus der Branche sind ziemlich überzeugend: Seiten mit optimierten Vorschaubildern sehen im Vergleich zu Seiten ohne Bild oder mit automatisch generierten Thumbnails bis zu 70% höhere Click-Through-Rates aus Social-Plattformen. Selbst konservative Schätzungen liegen bei 20%+ Verbesserung für Seiten, die von keinem Open Graph Image auf ein gut gestaltetes wechseln. Unsere eigenen Zahlen liegen ungefähr in der Mitte dieses Spektrums.
Nein. Ein 1200x630-Bild funktioniert auf beiden. Twitter bevorzugt technisch gesehen 1200x675, aber der Unterschied von 45 Pixeln ist in der Praxis unsichtbar. Erstelle plattformspezifische Bilder nur dann, wenn du bezahlte Social-Kampagnen fährst, bei denen jedes Detail zählt.
JPEG für Fotos und komplexe Bilder (kleinere Dateigröße). PNG für Grafiken mit Text, Logos oder Transparenz (schärfere Kanten). Für die meisten Open Graph Images, die Text auf einem Hintergrund kombinieren, liefert JPEG bei 80-85% Qualität das beste Verhältnis aus Dateigröße und Qualität. Genau das verwenden wir für alle unsere Bilder.
Twitter unterstützt WebP. Facebook und LinkedIn nicht zuverlässig. Bleib für maximale Kompatibilität bei JPEG oder PNG. Wenn jede Plattform WebP stabil unterstützt, kannst du umsteigen — aber Stand März 2026 sind wir noch nicht so weit.
Nur wenn sich der Inhalt wesentlich ändert. Wenn du einen Artikel aktualisierst und „2026 Guide“ in den Titel aufnimmst, sollte das Open Graph Image dazu passen. Aktualisiere Open Graph Images nicht einfach nur so — du musst danach die Caches auf jeder Plattform leeren, und der Aufwand lohnt sich nur, wenn sich der Inhalt wirklich materiell verändert hat.
Prüf diese Punkte in genau dieser Reihenfolge: (1) Ist die URL absolut und per HTTPS erreichbar? (2) Ist das Bild unter dieser URL tatsächlich abrufbar? (3) Erfüllt das Bild die Mindestgrößen? (4) Ist der Plattform-Cache veraltet? Nutze die Debugging-Tools oben zur Diagnose. Die häufigste Ursache ist meiner Erfahrung nach eine relative statt einer absoluten URL.
Ja, bei Content-Seiten (Blogposts, Artikel, Guides). Der Titel auf einem Hintergrund im Markenlook ist das effektivste Open-Graph-Image-Format. Für Produktseiten funktioniert ein sauberer Produktscreenshot mit deinem Logo meist besser. Die eine Ausnahme: Pack keinen Text auf Bilder, wenn der Titel ohnehin schon in der Linkvorschau angezeigt wird — manche Plattformen zeigen beides, und dann wirkt es doppelt gemoppelt.
no credit card required