Social Preview: Wie Ihre Seite auf Facebook, X, LinkedIn & Co. aussieht
Wenn jemand Ihre URL auf Facebook, X, LinkedIn, WhatsApp, Slack oder Discord teilt, generieren diese Plattformen aus den Open-Graph- und Twitter-Card-Metadaten Ihrer Seite eine Vorschaukarte. Die Karte entscheidet über die Klickrate: ein fehlendes og:image, ein zu langer Titel oder ein ungenutztes twitter:card kostet Reichweite.
Unser Social-Preview-Tool holt die Metadaten einer URL, prüft die Erreichbarkeit des og:image, rechnet per Plattform die Titel-/Description-Länge gegen die tatsächlichen Trunkierungsgrenzen und rendert sechs pixelnahe Vorschaukarten, die der echten Darstellung der jeweiligen Plattform entsprechen. Darunter: gefundene Probleme farbcodiert nach Schweregrad.
So nutzen Sie die Vorschau
- URL eingeben: Jede öffentlich erreichbare URL, z. B.
https://minoka.de/blog/beitrag. - Vorschau generieren: Ein Klick. Das Tool holt die Seite, extrahiert og:/twitter:-Meta, prüft das og:image per HEAD-Request und rendert die sechs Karten.
- Findings lesen: Rote Befunde sind Showstopper (fehlendes og:image, nicht erreichbares og:image). Gelbe Befunde sind verbesserungswürdig (og:image zu klein, Titel über Facebook-Limit). Blaue Befunde sind Hinweise (fehlendes twitter:card, kein theme-color).
- Pro Karte die Budget-Pillen prüfen: Jede Karte zeigt unten zwei Pillen: T (Title) und D (Description) mit aktueller / maximaler Zeichenzahl. Grün = passt, Rot = Plattform trunkiert.
Was der Preview prüft
| Feld | Relevanz | Ideale Werte |
|---|---|---|
| og:title / twitter:title | Überschrift der Karte auf allen Plattformen | ≤ 65 Zeichen (Facebook-Ceiling) |
| og:description | Text unter der Überschrift | ≤ 125 Zeichen (X-Ceiling) |
| og:image | Hauptbild der Karte | 1200×630 px, JPG/PNG/WebP, < 5 MB |
| og:image:width / height | Verhindert Layout-Shift beim Laden | Immer deklarieren |
| twitter:card | Gross/klein-Modus auf X | summary_large_image für maximalen Real Estate |
| theme-color | Akzentfarbe bei Slack/Discord | Ihr Brand-Hex, z. B. #0f172a |
Pro Plattform: Trunkierungsgrenzen
- Facebook: Title ~65 Zeichen, Description ~200 Zeichen, Bild 1.91:1
- X (Twitter): Title ~70, Description ~125;
summary_large_imagefür 1200×628, sonst kompakte Karte - LinkedIn: Title ~150, keine Description in der Vorschau, Bild 1200×627
- WhatsApp: Title ~65, Description ~170, kompakte Bubble-Karte mit kleinem Thumbnail
- Slack: Title ~80, Description ~150, farbiger linker Rand aus
theme-color - Discord: Title ~256, Description ~2048 (kaum Trunkierung), Embed mit farbigem linken Rand
Häufig gestellte Fragen
Warum zeigt X eine kompakte Karte statt der großen?
Ihre Seite hat kein twitter:card-Meta oder den Wert summary. Für die große Karte (viel bessere CTR) setzen Sie <meta name="twitter:card" content="summary_large_image">.
Warum sehe ich „No image“ auf meinen Karten?
Entweder hat die Seite kein og:image, oder der HEAD-Check konnte das Bild nicht abrufen (404, WAF-Block, SSL-Fehler). In beiden Fällen zeigen die Plattformen keine Vorschaukarte oder eine mit grauem Platzhalter.
Warum wird meine Vorschau auf Facebook trotz richtiger Meta nicht aktualisiert?
Facebook cacht og-Metadaten lange. Nutzen Sie den Facebook Sharing Debugger (developers.facebook.com/tools/debug), um den Cache zu invalidieren. Unser Tool greift immer live zu, zeigt also den aktuellen Stand – Facebook zeigt dagegen teils noch Tage alte Versionen.
Werden die Bild-Dimensionen selbst geprüft?
Wir lesen nur og:image:width und og:image:height aus den Meta-Tags. Das Bild selbst laden wir nicht herunter (HEAD-only), um den Traffic niedrig zu halten. Fehlen die Dimensionen, weisen wir darauf hin – korrekte Deklaration verhindert Layout-Shifts beim Laden.
Änderungsprotokoll
- Sechs plattformnahe Vorschaukarten: Facebook, X, LinkedIn, WhatsApp, Slack, Discord
- Pro Karte: Titel- und Description-Budget-Pillen mit „passt“ / „trunkiert“-Farbcodierung
- HEAD-Check der og:image-Erreichbarkeit mit WAF-/4xx-Detection
- Findings-Panel mit dreistufigem Schweregrad (Hoch / Mittel / Info)
- og:/twitter:/<meta>-Priority-Kaskade (wie in den offiziellen Plattform-Docs)
- Erkennt twitter:card-Typ (summary vs. summary_large_image) und rendert entsprechend
- theme-color fliesst als Akzentfarbe in Slack- und Discord-Karten ein
