raatools/

Open Graph Vorschau

Vorschau wie Ihre Seite in sozialen Medien aussieht.

Facebook / LinkedIn Preview

1200 × 630 image
example.com
My Amazing Page Title
A detailed description of what this page is about. Make it compelling!

Twitter / X Preview

1200 × 628 image
My Amazing Page Title
A detailed description of what this page is about. Make it compelling!
🔗 example.com

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).

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.