Open Graph-Tags verstehen
Das Open Graph-Protokoll wurde 2010 von Facebook eingefuehrt, um Webseiten zu reichhaltigen Objekten in einem sozialen Graphen werden zu lassen. Wenn jemand eine URL auf Facebook, LinkedIn, Pinterest oder anderen sozialen Plattformen teilt, ruft die Plattform die Seite ab und liest ihre Open Graph-Meta-Tags, um zu bestimmen, welcher Titel, welche Beschreibung, welches Bild und welche anderen Metadaten in der Freigabevorschau angezeigt werden sollen. Ohne diese Tags raten Plattformen anhand des Seiteninhalts, was oft zu schlechten Vorschauen mit fehlenden Bildern, abgeschnittenen Titeln oder irrelevanten Beschreibungen fuehrt.
Das Protokoll definiert vier erforderliche Eigenschaften: og:title (der Titel der Seite), og:type (der Objekttyp, wie "website" oder "article"), og:image (die URL des anzuzeigenden Bilds) und og:url (die kanonische URL). Zusaetzliche optionale Eigenschaften umfassen og:description, og:site_name, og:locale und medienspezifische Tags fuer Video- und Audioinhalte. Diese Tags werden im <head>-Bereich Ihres HTML als <meta property="og:..." content="...">-Elemente platziert.
Twitter Cards
Twitter verwendet sein eigenes Meta-Tag-System namens Twitter Cards, greift aber auf Open Graph-Tags zurueck, wenn Twitter-spezifische Tags nicht vorhanden sind. Das twitter:card-Tag ist das wichtigste und steuert das Anzeigeformat. Der Kartentyp "summary" zeigt ein kleines quadratisches Bild neben Titel und Beschreibung, geeignet fuer allgemeine Inhalte. Der Kartentyp "summary_large_image" zeigt ein grosses rechteckiges Bild ueber Titel und Beschreibung, ideal fuer Blogbeitraege, Artikel und visuelle Inhalte, die von einer prominenten Bildvorschau profitieren.
Twitter-spezifische Tags wie twitter:title, twitter:description und twitter:image ueberschreiben ihre Open Graph-Entsprechungen auf Twitter. Wenn diese nicht gesetzt sind, greift Twitter automatisch auf og:title, og:description und og:image zurueck. Das bedeutet, Sie muessen nur dann Twitter-spezifische Tags hinzufuegen, wenn die Twitter-Vorschau von der Facebook-Vorschau abweichen soll. Das twitter:site-Tag kann auch Ihr Twitter-Handle angeben, das mit der Karte angezeigt wird.
Best Practices fuer Bilder
Das Vorschaubild ist das wirkungsvollste Element einer sozialen Freigabe. Facebook empfiehlt Bilder mit mindestens 1200 x 630 Pixeln fuer hochaufloesende Displays, mit einem Minimum von 600 x 315 Pixeln. Twitters summary_large_image-Karten funktionieren am besten mit 1200 x 628 Pixeln im 2:1-Seitenverhaeltnis. Halten Sie Dateigroessen unter 5 MB. Verwenden Sie JPEG fuer Fotos und PNG fuer Grafiken mit Text oder Transparenz. Vermeiden Sie Bilder mit uebermassigem Text, da Facebook die Verbreitung von Beitraegen mit Bildern reduzieren kann, die mehr als 20 Prozent Textueberlagerung enthalten. Testen Sie Ihre Bilder immer mit den Debugging-Tools der Plattformen, bevor Sie sie veroeffentlichen.
Debugging und Validierung
Soziale Plattformen cachen geteilte URLs aggressiv, sodass Aenderungen an Ihren OG-Tags moeglicherweise nicht sofort erscheinen. Facebooks Sharing Debugger ermoeglicht es, eine URL erneut zu scrapen, um den Cache zu aktualisieren und genau zu sehen, wie Ihre Tags geparst werden. Twitters Card Validator zeigt Ihre Twitter Card-Vorschau und validiert das Markup. LinkedIns Post Inspector fuehrt eine aehnliche Validierung durch. Scrapen Sie nach dem Aktualisieren von OG-Tags immer die URL in diesen Tools, um die gecachte Vorschau zu loeschen. Haeufige Probleme sind relative Bild-URLs (verwenden Sie immer absolute URLs), fehlende erforderliche Tags, zu kleine Bilder und SSL-Zertifikatsfehler, die den Crawler der Plattform am Abrufen des Bilds hindern.
Haeufig gestellte Fragen
Was sind Open Graph-Tags?
HTML-Meta-Tags, die steuern, wie URLs beim Teilen in sozialen Medien angezeigt werden. Sie legen Titel, Beschreibung, Bild und URL fuer Freigabevorschauen auf Facebook, LinkedIn und anderen Plattformen fest.
Warum sind Open Graph-Tags wichtig?
Ohne sie raten soziale Plattformen, was angezeigt werden soll, was oft zu schlechten Vorschauen fuehrt. Richtige OG-Tags erhoehen die Klickraten und gewaehrleisten Markenkonsistenz beim sozialen Teilen.
Was ist das twitter:card-Meta-Tag?
Es steuert, wie Inhalte auf Twitter angezeigt werden. "summary" zeigt ein kleines Bild, "summary_large_image" zeigt ein grosses Bannerbild. Twitter greift auf OG-Tags fuer Titel, Beschreibung und Bild zurueck, wenn Twitter-spezifische Tags fehlen.
Welche Bildgroesse sollte ich verwenden?
Facebook empfiehlt mindestens 1200 x 630 Pixel. Twitter summary_large_image funktioniert am besten mit 1200 x 628 Pixeln (2:1-Verhaeltnis). Halten Sie Dateien unter 5 MB. Verwenden Sie absolute URLs und das JPEG- oder PNG-Format.
Wie debugge ich Open Graph-Tags?
Verwenden Sie Facebooks Sharing Debugger, Twitters Card Validator oder LinkedIns Post Inspector. Diese Tools zeigen, wie Plattformen Ihre Tags parsen, und ermoeglichen das Aktualisieren gecachter Vorschauen.
Save your results & get weekly tips
Get calculator tips, formula guides, and financial insights delivered weekly. Join 10,000+ readers.
No spam. Unsubscribe anytime.