share Open Graph & Twitter Card Generator star

Wie es funktioniert

Das Open-Graph-Protokoll wurde 2010 von Facebook eingeführt, damit jede Webseite sich selbst als reichhaltiges soziales Objekt beschreiben kann — welcher Titel, welche Beschreibung, welches Bild und welcher Seitenname erscheinen soll, wenn jemand den Link in einen Feed oder Chat einfügt. Dieses Tool erzeugt die vier tragenden Tags (og:title, og:description, og:image, og:url) plus das passende twitter:-Set und zeigt eine Live-Vorschau der resultierenden Karte, sodass Sie sehen, was Facebook, LinkedIn, WhatsApp oder X tatsächlich anzeigen werden, bevor Sie etwas veröffentlichen.

Das Feld og:type (website, article, product...) ist nicht rein kosmetisch — einige Plattformen ändern das Verhalten der Karte danach: Ein article-Typ kann eine Autor-/Datumszeile anzeigen, ein product-Typ kann auf Plattformen mit Open-Graph-Commerce-Erweiterungen eine Preisanzeige auslösen. Konkretes Beispiel: Eine Rezeptseite mit og:type=article und einem 1200×630-og:image erhält auf X eine Foto-Karte in voller Breite (via twitter:card=summary_large_image) und eine passende Vorschau auf WhatsApp — wird es falsch gesetzt oder og:image weggelassen, greifen die meisten Plattformen aufs Raten zurück und wählen meist das erste Bild der Seite oder gar keines.

Über die vier Kern-Tags hinaus feilen ein paar optionale Felder am Ergebnis: og:site_name zeigt Ihre Marke neben dem Titel auf manchen Plattformen, og:locale legt Sprache/Region fest (en_US, de_DE), damit mehrsprachige Seiten die richtige Variante rendern, und twitter:site ordnet die Karte einem Konto-Handle auf X zu. Der Wert twitter:card selbst hat neben summary und summary_large_image eine dritte Option — player — zum Einbetten von Video oder Audio direkt in der Timeline, benötigt aber zusätzliche player-spezifische Auszeichnung, die dieser Generator nicht abdeckt. Auch die Cache-Dauer variiert je nach Plattform: Manche Debugger aktualisieren innerhalb eines Tages nach einem frischen Scrape, während andere Plattformen eine veraltete Vorschau eine Woche oder länger festhalten können, da sie pro Link statt pro Crawl cachen — weshalb ein per Debugger erzwungenes erneutes Scrapen oft die einzige schnelle Lösung ist.

Wissenswertes

• 1200×630px (ein Verhältnis von 1,91:1) ist die sichere universelle Bildgröße über alle Plattformen hinweg; halten Sie die Datei unter etwa 1 MB, damit sie zuverlässig lädt, und verwenden Sie immer eine absolute URL (https://...) — relative Pfade schlagen stillschweigend fehl.
• Caching ist die häufigste Beschwerde: Sobald eine Plattform eine URL gescrapt hat, kann sie tagelang den alten Titel oder das alte Bild weiter anzeigen, selbst nachdem Sie die Tags korrigiert haben. Facebooks Sharing Debugger, LinkedIns Post Inspector und ähnliche Tools erzwingen ein frisches Scrapen.
• X greift für Titel, Beschreibung und Bild meist auf Open-Graph-Werte zurück, aber twitter:card ist eine eigene Einstellung (summary vs. das breite summary_large_image) und wird nicht automatisch abgeleitet — setzen Sie es explizit.
• Gar keine Tags bedeutet nicht keine Vorschau — die Plattform rät anhand dessen, was sie auf der Seite findet, und diese Vermutung ist selten schmeichelhaft.
• og:url sollte auf die kanonische Version der Seite zeigen — zeigt es auf eine URL mit Tracking-Parametern oder ein Weiterleitungsziel, teilt das das Share-Signal auf zwei verschiedene Adressen auf, statt es auf einer zu bündeln.
• Testen Sie vor dem Launch auf mehr als einer Plattform: Facebook, LinkedIn und X parsen Open Graph jeweils leicht unterschiedlich, und eine Karte, die auf einer Plattform korrekt aussieht, kann auf einer anderen das Bild beschneiden oder die Beschreibung weglassen.