Erste Schritte

Erste Schritte mit OG Preview

Ein kostenloses, browserbasiertes Tool, mit dem du siehst, wie deine Links in sozialen Medien aussehen. Keine Anmeldung, keine Installation.

OG Preview läuft vollständig in deinem Browser. Du gibst deine Tag-Werte entweder von Hand ein oder lässt sie das Tool von einer Live-URL auslesen — und siehst sofort, wie die Seite auf Facebook, X (Twitter) und LinkedIn erscheinen würde.

Schritt 1: Das Tool öffnen

Öffne die Startseite. Sie startet standardmäßig im Modus Manuelle Eingabe, der für jede Seite funktioniert — auch für noch nicht veröffentlichte Entwürfe oder Seiten hinter einem Login.

Schritt 2: Tag-Werte eingeben (Manuelle Eingabe)

Fülle die Felder aus:

  • URL / Domain — wird als Quellzeile in den Vorschauen angezeigt.
  • Titel (og:title) — deine Überschrift; ziele auf unter 60 Zeichen.
  • Beschreibung (og:description) — eine kurze Zusammenfassung, etwa 150–160 Zeichen.
  • Bild-URL (og:image) — ein absoluter https://-Link zu deinem Vorschaubild (idealerweise 1200×630px).

Die Vorschauen für Facebook, X (Twitter) und LinkedIn aktualisieren sich live während der Eingabe. Es gibt keinen Upload — das Bild wird über seine URL referenziert.

Schritt 3 (optional): Tags von einer URL abrufen (Beta)

Wechsle zu URL abrufen (Beta), füge die URL einer öffentlichen Seite ein und klicke auf Vorschau. Das Tool ruft die Seite über einen öffentlichen CORS-Proxy ab, liest die bereits vorhandenen OG-/Twitter-Tags aus und zeigt die Vorschauen sowie eine Tabelle mit gefundenen und fehlenden Tags. Dieser Modus arbeitet nach bestem Bemühen: Manche Websites blockieren Proxys — in diesem Fall ist die Manuelle Eingabe der zuverlässige Ausweg.

Schritt 4: Verfeinern, bis es passt

Passe Titel, Beschreibung und Bild an, bis die Vorschauen so aussehen, wie du es möchtest. Achte auf ein fehlendes Bild oder einen Titel, der abgeschnitten wird.

Schritt 5: Die Tags in deine Seite einfügen

OG Preview exportiert keine Code-Datei — du fügst die Tags selbst in den <head> deiner Website ein. Mit den von dir gewählten Werten sieht das Markup so aus:

<meta property="og:title" content="Your Page Title"> <meta property="og:description" content="A short, compelling summary."> <meta property="og:image" content="https://yoursite.com/preview.jpg"> <meta property="og:url" content="https://yoursite.com/page"> <meta name="twitter:card" content="summary_large_image">

Wenn du ein CMS verwendest, bieten die meisten SEO-Plugins (zum Beispiel Yoast SEO oder Rank Math bei WordPress) Felder für genau diese Werte.

Schritt 6: Auf den echten Plattformen testen

Sobald die Tags live sind, überprüfe sie mit den offiziellen Debuggern, mit denen du auch den Cache der Plattform leeren kannst:

← Zurück zum Tool