Open-Graph-Vorschau
Geben Sie eine URL ein und sehen Sie genau, wie Ihre Seite auf Facebook, X/Twitter, LinkedIn, Slack, Discord und WhatsApp erscheint.
Was ist Open Graph?
Open Graph ist das von Facebook 2010 veröffentlichte Protokoll, mit dem Websites strukturierte Metadaten zu einer Seite deklarieren können — Titel, Beschreibung, Bild, Typ, kanonische URL — damit auf Social-Plattformen geteilte Links als Rich Cards statt als nackte URLs erscheinen. Die meisten Plattformen werten es heute aus: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. X/Twitter hat einen eigenen twitter:*-Namensraum, greift aber bei fehlenden Twitter-Tags auf Open Graph zurück, sodass ein einziges Set von og:-Tags den Großteil des Ökosystems abdeckt.
So verwenden Sie diese Vorschau
Fügen Sie eine URL ein, um deren vorhandene Tags abzurufen, oder befüllen Sie die vier Kernfelder manuell, um eine Karte vor der Veröffentlichung zu gestalten. Die Vorschau aktualisiert sich live und nähert sich dem an, wie Facebook, LinkedIn und Slack die Karte darstellen. Achten Sie auf das Bild: Alles unter 1200 px Breite oder mit stark abweichendem Seitenverhältnis wird zugeschnitten oder herunterskaliert. Wenn die Karte passt, kopieren Sie das Snippet unten und fügen es in den <head> Ihrer Seite ein.
Warum sich Ihr Sharing-Bild nicht aktualisiert
Facebook, LinkedIn und die meisten anderen Plattformen cachen gescrapte Metadaten aggressiv — manchmal tagelang. Sobald eine URL einmal geteilt wurde, frischt das alleinige Ändern von og:image die Karte meist nicht auf. Die Lösungen: (1) den Sharing Debugger von Facebook nutzen, um ein Re-Scraping zu erzwingen, (2) den Bilddateinamen anpassen (card-v2.png), damit die gecachte Version invalidiert wird, oder (3) unter einer neuen URL veröffentlichen. Planen Sie das in Ihre Launch-Checkliste ein, statt unter Zeitdruck zu debuggen.
Tag-Referenz
| Tag | Zweck | Tipp |
|---|---|---|
og:title | Unter 60 Zeichen halten, um Kürzungen zu vermeiden. | Auf der Karte angezeigte Überschrift. |
og:description | 110–200 Zeichen wirken auf den meisten Plattformen gut. | Untertitel / Zusammenfassung. |
og:image | 1200×630 PNG oder JPEG über HTTPS, < 5 MB. | Kartenbild. |
og:url | Verwenden Sie die kanonische URL, nicht die getaggte. | Kanonische URL, auf die der Share auflöst. |
twitter:card | summary_large_image entspricht dem Stil der OG-Karte. | Twitter-Card-Typ. |
Häufig gestellte Fragen
Brauche ich sowohl Open-Graph- als auch Twitter-Card-Tags?
twitter:*-Tags, greift X/Twitter auf og:*-Tags zurück. Twitter-Tags sind nur dann nötig, wenn Sie auf X ein anderes Bild oder einen anderen Text als auf Facebook/LinkedIn möchten. Für die meisten Seiten reicht ein sauberer OG-Block.Was ist die richtige Bildgröße?
Warum sieht die Vorschau nicht exakt wie Facebooks Karte aus?
Ruft das Tool URLs über einen Server ab?
Kann ich ein Video als og:image verwenden?
og:video, zusammen mit einem Standbild als og:image-Fallback. Die meisten Plattformen zeigen weiterhin das Standbild auf der Karte und spielen das Video erst nach Klick ab.Wofür ist og:type da?
website, article, book, profile usw. Facebook stellte früher unterschiedliche Layouts pro Typ dar; heute beeinflusst es vor allem Discovery-Funktionen. Setzen Sie es für Blogposts auf article und für alles andere auf website — damit fahren Sie gut.