Zusammenfassung: Inhalte, die mit korrekt konfigurierten Open-Graph-Tags in sozialen Medien geteilt werden, erzielen laut einem Bericht von Social Media Examiner aus dem Jahr 2024 bis zu 2,5-mal mehr Engagement als Beiträge ohne diese Tags.
Wenn Sie einen Link auf Facebook, LinkedIn, Twitter oder WhatsApp teilen, liest die Plattform die Open-Graph-Meta-Tags (OG) Ihrer Seite aus, um eine ansprechende Vorschau zu erzeugen: eine Karte mit Titel, Beschreibung und Bild. Fehlen diese Tags oder sind sie falsch konfiguriert, kann die Vorschau fehlerhaft aussehen, das falsche Bild anzeigen oder eine generische Beschreibung darstellen, die keine Klicks erzeugt.
Mit unserem kostenlosen OG-Vorschau-Tool auf sorank.com können Sie genau visualisieren, wie Ihre Seite beim Teilen auf jeder wichtigen sozialen Plattform aussehen wird, noch bevor Sie auf Veröffentlichen klicken. Erkennen Sie Fehler, optimieren Sie Ihre Visuals und maximieren Sie das Engagement in Echtzeit.
Was sind Open-Graph-Tags?
Open Graph ist ein ursprünglich 2010 von Facebook entwickeltes Protokoll, mit dem Webseiten zu reichhaltigen Objekten in einem sozialen Graphen werden. Indem Sie bestimmte <meta>-Tags im <head>-Bereich Ihrer Seite platzieren, steuern Sie, wie Plattformen Ihre Inhalte beim Teilen darstellen.
Zu den zentralen Open-Graph-Tags gehören:
og:title: Die Überschrift, die in der Teilen-Karte angezeigt wird. Halten Sie sie für beste Ergebnisse unter 60 Zeichen.
og:description: Eine ergänzende Beschreibung, die unter dem Titel erscheint. Streben Sie 150-200 Zeichen an.
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, Artikel, Produkt, Video usw.).
og:site_name: Der Name Ihrer Website oder Marke.
Twitter verwendet eine eigene Variante namens Twitter Cards mit Tags wie twitter:card, twitter:title, twitter:description und twitter:image. Twitter greift jedoch auf die Open-Graph-Tags zurück, wenn die eigenen Tags nicht vorhanden sind.
Warum die OG-Vorschau für Ihre SEO-Strategie wichtig ist
Sie fragen sich vielleicht: Was hat das Teilen in sozialen Medien mit SEO zu tun? Auch wenn soziale Signale kein direkter Google-Ranking-Faktor sind, sind die indirekten Vorteile erheblich:
Mehr Traffic von sozialen Plattformen: Eine attraktive, gut formatierte Teilen-Karte erhöht die Klickrate aus den sozialen Medien deutlich. Mehr Besucher aus sozialen Kanälen bedeuten mehr potenzielle Backlinks, Markenerwähnungen und Engagement-Signale.
Geringere Absprungrate: Wenn Nutzer vor dem Klick eine genaue Vorschau sehen, wissen sie, was sie erwartet. Diese Übereinstimmung zwischen Vorschau und Inhalt senkt die Absprungrate und verbessert die Verweildauer, beides positive Signale für die Nutzererfahrung.
Markenkonsistenz: Einheitliche, professionell wirkende Teilen-Karten auf allen Plattformen stärken Ihre Markenidentität und schaffen Vertrauen bei Ihrem Publikum.
Verstärkung des Link-Teilens: Menschen teilen Inhalte mit einer ansprechenden Vorschau eher. Jedes Teilen schafft eine weitere Gelegenheit für organische Entdeckung und potenzielle Backlinks.
So verwenden Sie das OG-Vorschau-Tool von Sorank
Unser OG-Vorschau-Tool hilft Ihnen, Ihre sozialen Teilen-Karten zu prüfen und zu optimieren:
Schritt 1: Geben Sie die URL der Seite ein, die Sie in der Vorschau ansehen möchten. Das Tool ruft die Seite ab und liest alle Open-Graph- und Twitter-Card-Meta-Tags aus.
Schritt 2: Sehen Sie sich die erzeugten Vorschauen für Facebook, Twitter/X, LinkedIn und WhatsApp an. Jede Plattform stellt Teilen-Karten etwas anders dar, daher zeigt unser Tool Ihnen das genaue Erscheinungsbild auf jeder einzelnen.
Schritt 3: Erkennen Sie Probleme. Das Tool hebt häufige Probleme hervor, etwa fehlende Tags, zu kleine Bilder, abgeschnittene Titel oder Beschreibungen, die die empfohlene Zeichenanzahl überschreiten.
Schritt 4: Korrigieren und erneut testen. Nachdem Sie Ihre Meta-Tags korrigiert haben, geben Sie die URL erneut ein, um zu überprüfen, ob nun alle Vorschauen perfekt aussehen.
Häufige Fehler bei OG-Tags und wie Sie sie beheben
Selbst erfahrene Entwickler machen Open-Graph-Fehler. Hier sind die häufigsten Probleme, die uns begegnen:
Fehlendes og:image-Tag: Dies ist der häufigste Fehler. Ohne Bild zeigen die Plattformen entweder eine leere Karte an oder ziehen ein zufälliges Bild von Ihrer Seite. Geben Sie immer ein hochwertiges Bild mit der Größe 1200×630 Pixel an.
Bild zu klein oder falsches Seitenverhältnis: Facebook verlangt Bilder von mindestens 200×200 Pixeln, empfiehlt jedoch 1200×630 für das große Kartenformat. Bilder, die zu klein sind oder nicht im Verhältnis 1,91:1 vorliegen, werden ungünstig zugeschnitten oder als kleine Miniaturansicht statt als große Karte angezeigt.
Verwendung relativer URLs statt absoluter URLs: Alle OG-Tag-Werte müssen absolute URLs verwenden (beginnend mit https://). Relative Pfade wie /images/og.jpg funktionieren auf sozialen Plattformen nicht.
Doppelte oder widersprüchliche Tags: Mehrere og:title- oder og:image-Tags auf derselben Seite verwirren die Crawler. Stellen Sie sicher, dass jedes OG-Tag genau einmal vorkommt.
Cache nicht leeren: Facebook und andere Plattformen speichern Ihre OG-Daten aggressiv im Cache. Nach dem Aktualisieren Ihrer Tags müssen Sie den Sharing Debugger von Facebook verwenden, um ein erneutes Auslesen zu erzwingen und die zwischengespeicherte Version zu löschen.
Fehlende Twitter-spezifische Tags: Twitter greift zwar auf OG-Tags zurück, doch durch die Angabe von twitter:card (mit dem Wert summary_large_image) stellen Sie sicher, dass Ihr Inhalt das große Bildformat statt der kleinen Zusammenfassungskarte erhält.
Plattformspezifische OG-Anforderungen
Jede soziale Plattform hat ihre eigenen Anforderungen und Eigenheiten:
Facebook: Mindestbildgröße 200×200 px, empfohlen 1200×630 px. Unterstützt og:type-Werte wie article, product und video. Speichert aggressiv im Cache, verwenden Sie den Sharing Debugger zum Aktualisieren. Maximale Titellänge: 60 Zeichen. Maximale Beschreibungslänge: 200 Zeichen.
Twitter/X: Erfordert das twitter:card-Meta-Tag. Unterstützt die Kartentypen summary (kleines Bild) und summary_large_image (großes Bild). Bildmindestgröße: 144×144 px für summary, 300×157 px für large image. Greift auf OG-Tags zurück, wenn Twitter-Tags fehlen.
LinkedIn: Verwendet OG-Tags direkt. Empfohlene Bildgröße: 1200×627 px. Unterstützt die Typen article und website. Verfügt über ein eigenes Post-Inspector-Tool zur Fehlersuche.
WhatsApp: Liest OG-Tags für Linkvorschauen aus. Erfordert, dass og:image über HTTPS ausgeliefert wird. Speichert Vorschauen auf dem Gerät im Cache, das Löschen erfordert, dass der Nutzer den App-Cache leert.
Best Practices für die Gestaltung von OG-Bildern
Ihr OG-Bild ist das wichtigste Element Ihrer sozialen Teilen-Karte. Befolgen Sie diese Gestaltungsrichtlinien:
• Verwenden Sie 1200×630 Pixel (Seitenverhältnis 1,91:1) für universelle Kompatibilität.
• Halten Sie wichtige Texte und visuelle Elemente innerhalb der mittleren 80 % des Bildes, um plattformspezifische Zuschnitte zu berücksichtigen.
• Binden Sie Ihr Markenlogo oder Ihre Markenfarben für sofortigen Wiedererkennungswert ein.
• Verwenden Sie fetten, gut lesbaren Text mit hohem Kontrast, da viele Nutzer soziale Medien auf Mobilgeräten nutzen.
• Halten Sie die Dateigröße unter 5 MB (idealerweise unter 1 MB) für schnelles Laden.
• Verwenden Sie JPEG für Fotos und PNG für Grafiken mit Textüberlagerungen.
• Erstellen Sie für Ihre wichtigsten Seiten individuelle OG-Bilder, statt ein generisches, seitenweites Bild zu verwenden.
• Testen Sie Ihr Bild auf einem dunklen 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 erzeugen OG-Tags automatisch auf Basis Ihrer Inhalte. Sie können das soziale Bild und den Titel auch pro Seite anpassen.
Webflow: Open-Graph-Einstellungen finden Sie im Bereich der Seiteneinstellungen unter dem Reiter Open Graph. 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 Vorgang.
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 sollten Sie immer unser OG-Vorschau-Tool verwenden, um vor der Veröffentlichung zu überprüfen, ob Ihre Tags auf allen sozialen Plattformen korrekt dargestellt werden.
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
