Zusammenfassung: Inhalte, die in sozialen Medien mit korrekt konfigurierten Open-Graph-Tags geteilt werden, erhalten bis zu 2,5× mehr Engagement als Beiträge ohne sie, laut einem Bericht von Social Media Examiner aus 2024.

Wenn Sie einen Link auf Facebook, LinkedIn, Twitter oder WhatsApp teilen, liest die Plattform die Open-Graph-(OG)-Meta-Tags Ihrer Seite, um eine reichhaltige Vorschau zu generieren — eine Karte mit Titel, Beschreibung und Bild. Wenn diese Tags fehlen oder falsch konfiguriert sind, kann die Vorschau fehlerhaft aussehen, das falsche Bild anzeigen oder eine generische Beschreibung zeigen, die keine Klicks generiert.

Unser kostenloses OG-Preview-Tool auf sorank.com ermöglicht es Ihnen, genau zu visualisieren, wie Ihre Seite beim Teilen auf jeder großen sozialen Plattform erscheinen wird — bevor Sie veröffentlichen. Erkennen Sie Fehler, optimieren Sie Ihre Visuals und maximieren Sie das Engagement in Echtzeit.

Was sind Open-Graph-Tags?

Open Graph ist ein Protokoll, das ursprünglich 2010 von Facebook erstellt wurde und es Webseiten ermöglicht, zu reichhaltigen Objekten in einem sozialen Graphen zu werden. Durch das Platzieren spezifischer <meta>-Tags im <head>-Bereich Ihrer Seite steuern Sie, wie Plattformen Ihre Inhalte beim Teilen anzeigen.

Die wichtigsten Open-Graph-Tags umfassen:

og:title — Die Überschrift, die in der Share-Karte angezeigt wird. Halten Sie sie unter 60 Zeichen für beste Ergebnisse.

og:description — Eine unterstützende Beschreibung, die unter dem Titel erscheint. Zielen Sie auf 150–200 Zeichen.

og:image — Das Vorschaubild. Dies ist das visuell wirkungsvollste Element. Empfohlene Größe: 1200×630 Pixel.

og:url — Die kanonische URL der geteilten Seite.

og:type — Definiert den Inhaltstyp (website, article, product, video, etc.).

og:site_name — Ihr Website- oder Markenname.

Twitter verwendet seine eigene Variante namens Twitter Cards mit Tags wie twitter:card, twitter:title, twitter:description und twitter:image. Twitter greift jedoch auf Open-Graph-Tags zurück, wenn eigene Tags nicht vorhanden sind.

Warum OG-Preview für Ihre SEO-Strategie wichtig ist

Sie fragen sich vielleicht: Was hat Social Sharing mit SEO zu tun? Obwohl soziale Signale kein direkter Google-Rankingfaktor sind, sind die indirekten Vorteile erheblich:

Mehr Traffic von sozialen Plattformen: Eine attraktive, gut formatierte Share-Karte erhöht die Klickraten aus sozialen Medien dramatisch. Mehr Besucher aus sozialen Kanälen bedeutet mehr potenzielle Backlinks, Markenerwähnungen und Engagement-Signale.

Reduzierte Absprungrate: Wenn Nutzer vor dem Klicken eine genaue Vorschau sehen, wissen sie, was sie erwartet. Diese Übereinstimmung zwischen Vorschau und Inhalt reduziert die Absprungrate und verbessert die Verweildauer — beides positive Nutzererfahrungssignale.

Markenkonsistenz: Konsistente, professionell aussehende Share-Karten auf allen Plattformen stärken Ihre Markenidentität und bauen Vertrauen bei Ihrem Publikum auf.

Link-Sharing-Verstärkung: Menschen teilen eher Inhalte mit einer ansprechenden Vorschau. Jedes Teilen schafft eine weitere Gelegenheit für organische Entdeckung und potenzielle Backlinks.

So verwenden Sie das Sorank OG-Preview-Tool

Unser OG-Preview-Tool hilft Ihnen beim Debuggen und Optimieren Ihrer Social-Share-Karten:

Schritt 1: Geben Sie die URL der Seite ein, die Sie vorschauen möchten. Das Tool ruft die Seite ab und liest alle Open-Graph- und Twitter-Card-Meta-Tags.

Schritt 2: Sehen Sie die generierten Vorschauen für Facebook, Twitter/X, LinkedIn und WhatsApp. Jede Plattform rendert Share-Karten leicht unterschiedlich, daher zeigt unser Tool die exakte Darstellung auf jeder einzelnen.

Schritt 3: Identifizieren Sie Probleme. Das Tool hebt häufige Probleme hervor wie fehlende Tags, zu kleine Bilder, abgeschnittene Titel oder Beschreibungen, die empfohlene Zeichenlimits überschreiten.

Schritt 4: Korrigieren und erneut testen. Nach der Korrektur Ihrer Meta-Tags geben Sie die URL erneut ein, um zu überprüfen, dass alle Vorschauen jetzt perfekt aussehen.

Häufige OG-Tag-Fehler und wie man sie behebt

Selbst erfahrene Entwickler machen Open-Graph-Fehler. Hier sind die häufigsten Probleme:

Fehlende og:image-Tag: Dies ist der Fehler Nummer eins. Ohne Bild zeigen Plattformen entweder eine leere Karte oder ziehen ein zufälliges Bild von Ihrer Seite. Geben Sie immer ein hochwertiges Bild mit 1200×630 Pixeln an.

Bild zu klein oder falsches Seitenverhältnis: Facebook erfordert Bilder von mindestens 200×200 Pixeln, empfiehlt aber 1200×630 für das große Kartenformat. Zu kleine Bilder oder solche ohne 1,91:1-Verhältnis werden ungünstig beschnitten oder als kleine Miniatur angezeigt.

Relative statt absolute URLs: Alle OG-Tag-Werte müssen absolute URLs verwenden (beginnend mit https://). Relative Pfade wie /images/og.jpg funktionieren nicht auf sozialen Plattformen.

Doppelte oder widersprüchliche Tags: Mehrere og:title- oder og:image-Tags auf derselben Seite verwirren Crawler. Stellen Sie sicher, dass jede OG-Tag genau einmal erscheint.

Cache nicht geleert: Facebook und andere Plattformen cachen Ihre OG-Daten aggressiv. Nach der Aktualisierung Ihrer Tags müssen Sie Facebooks Sharing Debugger verwenden, um ein erneutes Scraping zu erzwingen und die gecachte Version zu löschen.

Fehlende Twitter-spezifische Tags: Obwohl Twitter auf OG-Tags zurückgreift, stellt die Angabe von twitter:card (mit dem Wert summary_large_image) sicher, dass Ihr Inhalt das große Bildformat statt der kleinen Summary-Karte erhält.

Plattformspezifische OG-Anforderungen

Jede soziale Plattform hat ihre eigenen Anforderungen und Besonderheiten:

Facebook: Minimale Bildgröße 200×200px, empfohlen 1200×630px. Unterstützt og:type-Werte wie article, product und video. Cacht aggressiv — verwenden Sie den Sharing Debugger zum Aktualisieren. Maximale Titellänge: 60 Zeichen. Maximale Beschreibungslänge: 200 Zeichen.

Twitter/X: Erfordert die twitter:card-Meta-Tag. Unterstützt summary (kleines Bild) und summary_large_image (großes Bild) Kartentypen. Bildminimum: 144×144px für Summary, 300×157px für großes Bild. Greift auf OG-Tags zurück, wenn Twitter-Tags fehlen.

LinkedIn: Verwendet OG-Tags direkt. Empfohlene Bildgröße: 1200×627px. Unterstützt die Typen article und website. Hat ein eigenes Post-Inspector-Tool zum Debuggen.

WhatsApp: Liest OG-Tags für Link-Vorschauen. Erfordert, dass og:image über HTTPS bereitgestellt wird. Cacht Vorschauen auf dem Gerät — das Löschen erfordert, dass der Nutzer den App-Cache leert.

Best Practices für OG-Bild-Design

Ihr OG-Bild ist das wichtigste Element Ihrer Social-Share-Karte. Befolgen Sie diese Design-Richtlinien:

• Verwenden Sie 1200×630 Pixel (Seitenverhältnis 1,91:1) für universelle Kompatibilität.
• Halten Sie wichtigen Text und visuelle Elemente in den zentralen 80 % des Bildes, um plattformspezifisches Beschneiden zu berücksichtigen.
• Integrieren Sie Ihr Markenlogo oder Ihre Farben für sofortige Wiedererkennung.
• Verwenden Sie fetten, lesbaren Text mit hohem Kontrast — viele Nutzer durchsuchen soziale Medien auf Mobilgeräten.
• Halten Sie die Dateigröße unter 5 MB (idealerweise unter 1 MB) für schnelles Laden.
• Verwenden Sie JPEG für Fotografien und PNG für Grafiken mit Textüberlagerungen.
• Erstellen Sie einzigartige OG-Bilder für Ihre wichtigsten Seiten statt eines generischen seitenweiten Bildes.
• Testen Sie Ihr Bild auf dunklem Hintergrund, da Plattformen wie Twitter/X den Dunkelmodus unterstützen.

OG-Tags in Ihr CMS integrieren

Die meisten modernen CMS-Plattformen und Frameworks unterstützen Open-Graph-Tags nativ oder über Plugins:

WordPress: Plugins wie Yoast SEO oder Rank Math generieren automatisch OG-Tags basierend auf Ihrem Inhalt. Sie können auch das Social-Bild und den Titel pro Seite anpassen.

Webflow: Open-Graph-Einstellungen sind im Seiteneinstellungspanel unter dem Open-Graph-Tab verfügbar. Sie können Titel, Beschreibung und Bild für jede Seite festlegen.

Next.js / React: Verwenden Sie die <Head>-Komponente oder die Metadata-API, um OG-Tags programmatisch hinzuzufügen. Bibliotheken wie next-seo vereinfachen diesen Prozess.

Statisches HTML: Fügen Sie OG-Meta-Tags direkt im <head>-Bereich jeder Seite hinzu. Verwenden Sie unser Meta-Tags-Generator-Tool auf sorank.com, um den Code automatisch zu erstellen.

Unabhängig von Ihrer Plattform — verwenden Sie immer unser OG-Preview-Tool, um zu überprüfen, dass Ihre Tags auf allen sozialen Plattformen korrekt gerendert werden, bevor Sie veröffentlichen.