Open-Graph-Vorschau — prüfe Social-Share-Karten
Open-Graph-Tags entscheiden, wie deine Seite bei jedem Teilen aussieht: Ein fehlendes Bild oder ein fehlender Titel kostet dich Klicks und Shares. Füge deine og:/twitter:card-Tags oder eine URL ein, um die Share-Karte für Facebook, X und im WhatsApp-Stil zu sehen, fehlende Felder zu finden und das Bildformat zu korrigieren. Schritte: Tags einfügen oder URL laden, die drei Karten und die Feldtabelle lesen, dann Fehlendes ergänzen. Der Einfüge-Modus läuft auf deinem Gerät; der URL-Modus ruft die Seite einmal ab und speichert sie nicht. Beispiel: eine Seite mit einem 1200×630 großen og:image wird als große Karte geteilt.
So funktioniert es
Die Vorschau parst die eingefügten og:/twitter:-Tags (oder extrahiert sie aus dem für eine URL geladenen HTML) und zeichnet drei Karten. Facebook zeigt das 1.91:1-Bild links, darunter Titel, Beschreibung und Domain. X folgt twitter:card: summary_large_image zeigt ein großes Bild oben, summary ein kleines neben dem Text. Messaging-Apps wie WhatsApp zeigen eine große Karte. Die Tabelle markiert og:title, og:description und og:image als Pflicht und listet optionale Felder.
Regeln der Vorschau
Das sind die Bildgrößen und Fallbacks der Plattformen, laut Open-Graph-Protokoll und der X-Cards-Dokumentation.
- Pflichtfelder: og:title, og:description und og:image. Fehlende werden markiert, damit du sie vor dem Veröffentlichen ergänzt.
- og:image mit 1200×630 px (1.91:1) funktioniert auf allen großen Plattformen. Facebook unterstützt inzwischen auch 2:1- und 1:1-Zuschnitte; sehr kleine Bilder werden oft vergrößert und wirken unscharf.
- twitter:card summary_large_image passt zu einem großen Bild, summary zu einem kleinen. Ohne twitter:card leiten die Plattformen eine summary-Karte aus den og:-Tags ab.
- Fehlen og:title oder og:image, verwenden die Plattformen den HTML-Titel, die Meta-Description und das erste Bild der Seite.
- Die Größe wird durch Laden des Bildes im Browser gemessen; lässt es sich nicht laden (blockiert, offline oder falsche URL), meldet die Prüfung „unbekannt“.
Beispiel
Die Beispiel-Tags beschreiben einen Blogbeitrag mit 1200×630 großem og:image und twitter:card summary_large_image. Die Vorschau zeigt eine Facebook-Karte mit Bild links, eine große X-Karte, eine WhatsApp-Stil-Karte und eine Tabelle, in der alle Pflichtfelder vorhanden sind.
Geeignete Einsätze
- Vor dem Veröffentlichen eines Beitrags oder einer Landingpage die Tags einmal einfügen und prüfen, ob die Karte auf Facebook, X und in Messaging-Apps korrekt aussieht.
- Zeigt ein geteilter Link kein Bild oder ein beschnittenes, die og:-Tags einfügen und prüfen, ob og:image fehlt oder das Format falsch ist.
- Nach einem CMS- oder Theme-Update die Live-URL laden und prüfen, ob die og:-Tags noch zur Seite passen.
Frequently asked questions
Was passiert, wenn eine Seite keine Open-Graph-Tags hat?
Facebook, X und WhatsApp bauen die Vorschau aus HTML-Titel, Meta-Description und dem ersten Bild der Seite. Die Karte kann unvollständig sein oder das falsche Bild zeigen – genau deshalb gibt es die Pflicht-felder og:.
Wie groß sollte og:image sein?
Die sichere Größe ist 1200×630 px, ein 1.91:1-Format, das alle großen Plattformen akzeptieren. Facebook unterstützt inzwischen auch 2:1- und 1:1-Zuschnitte. Sehr kleine Bilder werden oft vergrößert und wirken unscharf.
Wie hängt twitter:card mit den og:-Tags zusammen?
twitter:card wählt das Layout: summary_large_image zeigt ein breites Bild, summary ein kleines. Fehlen twitter:title, twitter:description oder twitter:image, fällt X auf das jeweilige og:-Tag zurück.
Was macht eine Plattform, wenn og:image fehlt?
Sie fällt auf das erste Bild im Seiten-HTML zurück oder zeigt die Karte ohne Bild. Ein fehlendes og:image ist der häufigste Grund, warum ein geteilter Link kein Vorschaubild hat.
Warum meldet die Format-Prüfung „unbekannt“?
Die Vorschau versucht, og:image mit einem Browser-Bildladevorgang zu laden, um die echte Größe zu lesen. Ist das Bild blockiert, offline, langsam oder lehnt der Server die Anfrage ab, kann die Größe nicht gelesen werden und die Prüfung meldet unbekannt.
Werden meine Tags irgendwohin hochgeladen?
Nein. Im Einfüge-Modus laufen Analyse und Vorschau auf deinem Gerät. Der URL-Modus ruft die Seite einmal über unseren Worker ab und speichert sie nicht.
Fragen oder Feedback
Unklar, kaputt oder etwas fehlt? Schreib unten eine Nachricht — wir lesen jede Notiz zu diesen Tools.