Open Graph Vorschau

Was ist ein Open-Graph-Previewer?

Ein Open-Graph-Previewer zeigt, wie Ihre Webseite aussieht, wenn sie auf Facebook, Twitter/X, LinkedIn oder WhatsApp geteilt wird. Er liest die og:-Meta-Tags und generiert eine Vorschau der Social-Media-Karte.

Open Graph ist ein Protokoll von Facebook (2010), das es Webseiten ermoeglicht, ihre Darstellung in sozialen Netzwerken zu steuern. Ohne og:-Tags waehlen Plattformen selbst Titel, Bild und Beschreibung — oft falsch.

Wichtige Open-Graph-Tags

• og:title — der Titel der Seite in der Social-Media-Vorschau. Kann vom HTML-title abweichen.
• og:description — Kurzbeschreibung unter dem Titel. 2-3 Saetze, die zum Klicken animieren.
• og:image — das Vorschaubild. Optimal 1200x630 Pixel. Groessere Bilder werden zugeschnitten. Ohne Bild erscheint die Vorschau klein und unattraktiv.
• og:url — die kanonische URL der Seite. Verhindert Duplikate bei verschiedenen URL-Varianten.
• og:type — Seitentyp: 'website' fuer Startseiten, 'article' fuer Blogposts. Beeinflusst die Darstellung auf einigen Plattformen.

So verwenden Sie dieses Tool

Geben Sie eine URL ein und das Tool liest die Meta-Tags der Seite. Es zeigt Vorschauen fuer Facebook, Twitter/X und LinkedIn und markiert fehlende oder problematische Tags mit Verbesserungsvorschlaegen.

Twitter/X Card Tags

Twitter verwendet eigene Meta-Tags (twitter:card, twitter:title usw.), faellt aber auf og:-Tags zurueck. twitter:card steuert das Kartenformat: 'summary' (klein) oder 'summary_large_image' (grosses Bild).

Beispiel aus der Praxis

Setze og:title auf eine 55 Zeichen lange Überschrift, og:description auf eine 155 Zeichen lange Zusammenfassung und og:image auf ein 1200x630 Pixel großes Bild und füge dann die URL ein, um die Vorschaukarte zu sehen. Auf dieses Seitenverhältnis (1,91:1) schneiden Facebook und LinkedIn zu, sodass ein zentriertes Motiv sichtbar bleibt. Fehlt og:image, müssen Plattformen raten und greifen oft ein Logo oder das erste Bild der Seite ab, was in einem geteilten Feed selten gewollt wirkt.

Häufige Fehler

Der häufigste Fehler ist ein zu kleines Bild — Plattformen wollen mindestens 1200x630, und alles unter 600x315 wird eventuell als winziges Thumbnail dargestellt oder verworfen. Relative Bild-URLs sind eine weitere Falle: Open Graph verlangt eine absolute https://-URL, weil der Scraper auf einem externen Server läuft. Schließlich werden Änderungen zwischengespeichert; nutze daher den Debugger der jeweiligen Plattform, um nach dem Bearbeiten der Tags ein erneutes Auslesen zu erzwingen.

Haeufig gestellte Fragen

Warum sehe ich ein altes Bild in der Vorschau?

Soziale Netzwerke cachen Open-Graph-Daten. Bei Facebook: Facebook Sharing Debugger verwenden und 'Scrape Again' klicken. Bei Twitter: Twitter Card Validator verwenden. Bei LinkedIn: Post Inspector verwenden.

Wie gross sollte das og:image sein?

Optimal: 1200x630 Pixel (1.91:1 Seitenverhaeltnis). Mindestens 600x315 Pixel. Unter 200x200 wird das Bild auf vielen Plattformen nicht angezeigt. Dateiformate: JPEG, PNG, WebP. Max. 5 MB.

Brauche ich Twitter-Card-Tags, wenn ich bereits Open Graph habe?

Twitter greift für Titel, Beschreibung und Bild auf Open-Graph-Tags zurück, sodass grundlegendes Teilen auch ohne sie funktioniert. Füge twitter:card (meist summary_large_image) hinzu, wenn du das größere Layout oder eine Twitter-spezifische Zuordnung über twitter:site möchtest. Andernfalls genügt Open Graph allein.