Open Graph Vorschau

Was Open Graph wirklich ist

Das Open-Graph-Protokoll wurde 2010 von Facebook geschaffen, um jede Webseite zu einem «reichen Objekt» in einem sozialen Graphen zu machen, einer strukturierten Sammlung von Metadaten, die andere Anwendungen (ursprünglich Facebook, jetzt auch LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp und Dutzende mehr) lesen können, um eine Vorschaukarte zu rendern, wenn jemand deine URL einfügt. Die offizielle Spec lebt unter ogp.me, und das Protokoll ist faktisch zur Lingua franca des Linkteilens im Web geworden.

Ohne OG-Tags scrapen soziale Plattformen deine Seite und raten: Sie schnappen sich eine Überschrift, greifen das erste Bild, das sie finden, und nennen das eine Karte. Das Ergebnis ist selten das, was du willst. Mit OG-Tags steuerst du Titel, Beschreibung und Bild, und das ist der Unterschied zwischen einem polierten Link und einem kaputt aussehenden.

Die vier erforderlichen Tags (laut ogp.me)

Die offizielle Open-Graph-Spec definiert vier erforderliche Eigenschaften. Damit eine Seite als Open-Graph-Objekt qualifiziert, muss sie alle vier deklarieren:

Empfohlene optionale Tags umfassen og:description (eine ein- bis zweisätzige Zusammenfassung), og:site_name (der Name deiner Seite als Etikett), og:locale (Sprache und Region) sowie die Bilddimensions-Hinweise og:image:width / og:image:height / og:image:alt. Die Dimensions-Hinweise erlauben Social-Clients, den richtigen Platz vorzuallokieren, und vermeiden Layout-Verschiebungen während das Bild lädt.

Twitter / X Cards: gleiche Idee, leicht andere Tags

X (früher Twitter) hat seinen eigenen Metadaten-Namensraum, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, aber wichtig: X greift auf OG-Tags zurück, wenn Twitter-spezifische fehlen. Eine Seite, die nur die OG-Tags ausliefert, bekommt also trotzdem eine Karte auf X. Wo die beiden sich unterscheiden, ist beim Kartentyp:

• twitter:card = summary, kleines quadratisches Thumbnail, Titel, Beschreibung.
• twitter:card = summary_large_image, Bild in voller Breite oben auf der Karte. Der moderne Standard für Content-Sharing, weil er im Feed mehr visuelle Aufmerksamkeit bekommt.
• app und player, für App-Installationen bzw. eingebettetes Video.

Hinweis: Die eigenständige Twitter-Card-Validator-Vorschau unter cards-dev.twitter.com/validator wurde am 2. August 2022 von X entfernt. Der aktuelle Weg, eine Karte zu verifizieren, ist, einen neuen Tweet im Tweet Composer zu beginnen, die URL einzufügen und die Vorschau rendern zu lassen, du musst den Tweet nicht wirklich posten. Manche Drittanbieter-Tools (dieses eingeschlossen) approximieren die gerenderte Karte, sodass du vor dem Live-Gehen iterieren kannst.

Bilddimensionen, die wirklich funktionieren

Es gibt keine eine perfekte Größe, aber ein 1200×630-Bild (Seitenverhältnis 1,91:1) ist die zuverlässigste Einzelwette, sie funktioniert überall ohne größere Beschneidungen. Empfehlungen pro Plattform:

Halte wichtigen Text und Gesichter nahe der Bildmitte, jede Plattform schneidet anders, und ein Logo in der Ecke kann hinter den UI-Overlays der Plattform verschwinden.

Warum deine Karte manchmal nicht erscheint

Wenn du OG-Tags hinzugefügt hast, die Vorschau aber immer noch kaputt oder leer ist, die üblichen Verdächtigen:

• HTTPS erforderlich. Facebook und die meisten modernen Plattformen lehnen http://-Bild-URLs ab. Liefere og:image über HTTPS aus.
• Bild nicht öffentlich zugänglich. Hinter Authentifizierung, durch IP-Allowlist blockiert oder gibt 403 an den Plattform-Crawler zurück. Teste, indem du die Bild-URL in einem privaten Browserfenster öffnest.
• Bild zu klein. Unter dem Plattform-Minimum (Facebook 200×200, LinkedIn 1200×627) fällt die Karte auf ein kleines Thumbnail oder gar kein Bild zurück.
• Falsches Seitenverhältnis. Ein 1:1 quadratisches Bild, das als summary_large_image auf X eingereicht wird, wird zentriert beschnitten, oft schlecht.
• Cache. Soziale Plattformen cachen deine OG-Metadaten aggressiv. Nach dem Beheben von Tags gehe zum Sharing Debugger von Facebook und klicke «Scrape Again», um zu refreshen; LinkedIns Post Inspector macht dasselbe; X holt Änderungen das nächste Mal, wenn jemand die URL einfügt.
• Robots.txt blockiert den Social-Crawler. Stelle sicher, dass User Agents wie facebookexternalhit, Twitterbot, LinkedInBot, Slackbot deine Seite und dein Bild abrufen können.
• Server gibt nicht-2xx an den Crawler zurück. Prüfe deine Server-Logs auf die User Agents der Social-Bots.
• Relative Bild-URLs. og:image muss eine absolute URL sein (https://deineseite.de/og.jpg), niemals /og.jpg.

Das Cache-Problem

Sobald eine soziale Plattform deine Seite scrapt, werden die Metadaten für eine Weile gecachet, die Community-Lore setzt sie für Facebook und LinkedIn auf etwa 7 Tage, obwohl keine der beiden Plattformen die exakte TTL dokumentiert. Das Aktualisieren deiner OG-Tags refresht den Cache nicht automatisch. Um ein Re-Scrape zu erzwingen, nutze die offiziellen Tools: Facebook Sharing Debugger, LinkedIn Post Inspector. X holt neue Metadaten, wenn die URL das nächste Mal geteilt wird. Slack und Discord refreshen ihre Vorschauen basierend auf den OG-Tags zum Fetch-Zeitpunkt, daher aktualisieren sie schneller als Facebook.

Häufige og:type-Werte

Das og:type-Tag sagt der sozialen Plattform, welche Art von Objekt die Seite repräsentiert. Die meisten Seiten sind website (der Standard) oder article; vertikale-spezifische Werte erlauben den Plattformen, reichere Karten zu rendern. Aus der Spec:

• website, Standard für allgemeine Seiten.
• article, Blogposts, Nachrichten. Paart sich mit article:published_time, article:author, article:section, article:tag.
• book, paart sich mit book:author, book:isbn.
• profile, für Nutzerprofilseiten.
• video.movie / video.episode / video.tv_show / video.other, für Videoinhalte.
• music.song / music.album / music.playlist / music.radio_station, für Musik.

Längenbegrenzungen in der Praxis

Keine Plattform setzt eine harte Obergrenze für Titel- oder Beschreibungslänge durch, aber jede schneidet ab einem bestimmten Punkt ab:

• Titel, halte ihn unter ~60 Zeichen, um plattformübergreifend sicher zu sein; ~70 schneidet auf den meisten ab. Kritische Botschaft in den ersten 50.
• Beschreibung, unter ~155–200 Zeichen vor dem Abschneiden. Mobil weniger (etwa 100). Setze die Schlüsselinformation nach vorn.
• Bild-Alt-Text, sollte vorhanden sein (og:image:alt) für Screenreader und barrierefreiheits-bewusste Clients; unter 100 Zeichen.

JSON-LD vs. Open Graph (das sind verschiedene Dinge)

Häufige Verwirrung: JSON-LD-strukturierte Daten (mit schema.org-Vokabularen) und Open-Graph-Meta-Tags machen unterschiedliche Jobs. OG / Twitter Cards steuern Social-Share-Vorschauen, das, was angezeigt wird, wenn jemand deine URL in Slack oder Facebook einfügt. JSON-LD mit schema.org hilft Google, deine Seite für reiche Suchergebnisse zu parsen, Rezeptkarten, Produktinfos, FAQ-Snippets in der Google-Suche. Beides ist empfohlen, und das eine ersetzt das andere nicht.

Häufige Fehler

1. Eine relative og:image-URL verwenden. Die Spec verlangt eine absolute URL. Relative Pfade werden stillschweigend verworfen.
2. Ein generisches Site-Logo für jede Seite verwenden. Das OG-Bild ist der Held deiner Karte, jede Seite verdient ein einzigartiges Bild, idealerweise mit dem Inhalt der Seite verbunden.
3. og:image:width und og:image:height vergessen. Manche Clients pre-allokieren Platz und verpassen das Bild ohne diese Hinweise.
4. Den summary_large_image-twitter:card-Typ vergessen. Ohne ihn fällt X auf die kleinere Summary-Karte mit quadratischem Thumbnail zurück, oft weniger ansprechend.
5. Wichtigen Text in die Ecken des Bildes setzen. Verschiedene Plattformen schneiden unterschiedlich. Motive und wichtiger Text sollten in den mittleren 80% liegen.
6. Tags aktualisieren, aber den Cache nicht refreshen. Besuche nach jeder Änderung den offiziellen Sharing Debugger / Post Inspector.
7. Eine HTTP-Bild-URL einreichen. Die meisten Plattformen lehnen Nicht-HTTPS-Bilder ab; die Karte erscheint ohne Bild.
8. Nur og:title und og:description verwenden. Ohne og:image rendert die Karte auf den meisten Plattformen als spärlicher Nur-Text-Stub.

Häufig gestellte Fragen

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Verwandte Tools