Open-Graph-Tags: So steuern Sie die Linkvorschau
Wird ein Link auf Facebook, LinkedIn, WhatsApp, Slack oder X geteilt, entscheiden ein paar Zeilen im Head der Seite, welchen Titel, welchen Text und welches Bild die Leute sehen.
Fügen Sie einen Link in einen Chat oder einen Beitrag ein, und einen Moment später erscheint eine Karte mit Bild, Überschrift und einer Zeile Text. Diese Karte wird nicht aus der Seite erraten: Sie entsteht aus Open-Graph-Tags, einer Handvoll meta-Elementen im <head> der Seite. Seiten ohne diese Tags bekommen, was das Netzwerk eben auslesen kann, und das ist oft das Logo, ein Cookie-Banner oder gar kein Bild. Dieser Ratgeber erklärt die Tags, auf die es ankommt, die Regeln für das Bild und wie Sie eine Vorschau reparieren, die sich nicht aktualisieren will.
Was Open Graph ist
Open Graph ist ein kleiner Satz von Konventionen, den Facebook 2010 eingeführt hat, damit sich jede Webseite beim Teilen selbst beschreiben kann. Er hat sich weit über Facebook hinaus durchgesetzt: LinkedIn, WhatsApp, Telegram, Slack, Discord, Microsoft Teams und viele andere lesen dieselben Tags. Auch X liest sie, zusätzlich zu seinen eigenen twitter:-Tags. Wer sie einmal schreibt, deckt damit fast jeden Ort ab, an dem ein Link geteilt werden kann.
Die Tags sehen so aus:
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">Die Tags, auf die es ankommt
| Tag | Was er festlegt | Empfehlung |
|---|---|---|
og:title | Die fett gedruckte Überschrift der Karte | Darf vom Suchtitel abweichen: kürzer und einladender |
og:description | Die Zeile unter der Überschrift | Ein oder zwei Sätze; viele Apps zeigen nur die erste Zeile |
og:image | Das Bild | Eine vollständige https://-Adresse; siehe die Größenregeln unten |
og:url | Die Adresse, der das Teilen zugerechnet wird | Die kanonische Adresse, ohne Tracking-Parameter |
og:type | Die Art der Seite | website für die meisten Seiten, article für Beiträge |
og:site_name | Die Website, die über oder unter dem Titel steht | Ihr Markenname |
og:locale | Sprache und Region | Etwa en_US; optional |
Beachten Sie, dass Open Graph property verwendet, nicht name. Die meisten Plattformen akzeptieren beides, aber property ist das, was die Spezifikation vorsieht.
Das Bild: Größe und Format
Das Bild fällt als Erstes ins Auge, und hier geht bei den meisten Vorschauen etwas schief.
- Größe: 1200 × 630 Pixel, ein Seitenverhältnis von 1,91 zu 1, funktioniert überall. Bilder unter 600 × 315 werden womöglich nur als kleines Vorschaubild gezeigt oder ganz weggelassen.
- Format: JPG oder PNG sind sicher. WebP akzeptieren die meisten, aber nicht alle Plattformen; GIFs werden als Standbild angezeigt.
- Dateigröße: deutlich unter ein paar Megabyte bleiben. Manche Apps, allen voran WhatsApp, überspringen schwere Bilder.
- Adresse: eine absolute https://-Adresse, die jeder öffnen kann. Relative Pfade, Bilder hinter einem Login und Adressen, die per robots.txt gesperrt sind, funktionieren nicht.
- Sicherer Bereich: Halten Sie Text und Gesichter vom Rand fern, weil manche Apps das Bild auf ein Quadrat oder einen schmaleren Streifen zuschneiden.
Der Bildkonverter bringt ein Bild auf diese Maße und komprimiert es, ohne es hochzuladen.
X-Cards (Twitter)
X liest die Open-Graph-Tags für Titel, Beschreibung und Bild, aber eine Entscheidung braucht einen eigenen Tag: twitter:card. Mit summary_large_image erscheint das Bild breit über dem Text; mit summary ist es ein kleines Quadrat daneben. Ohne den Tag erscheinen Links unter Umständen nur als nackte URL. Mit twitter:site lässt sich das Konto hinter der Website nennen. Der Twitter Card Generator schreibt beide Sätze von Tags zusammen.
Open Graph und Suchmaschinen
Suchmaschinen bewerten Seiten nicht nach ihren Open-Graph-Tags; das Suchergebnis prägen stattdessen das <title>-Element und die Meta-Description. Beide Sätze tragen oft ähnlichen Text, dienen aber verschiedenen Lesern: Der Suchtitel sollte die Wörter enthalten, nach denen Menschen suchen, während der Titel für das Teilen für jemanden geschrieben sein darf, der durch einen Feed scrollt. Die Google-Vorschau zeigt, wie die Suchversion aussieht.
Warum eine Vorschau falsch ist oder fehlt
| Symptom | Wahrscheinliche Ursache | Lösung |
|---|---|---|
| Altes Bild oder alter Text nach einer Änderung | Die Plattform hat die erste Vorschau zwischengespeichert | Die Plattform bitten, die Seite neu einzulesen, etwa mit dem Facebook Sharing Debugger oder dem LinkedIn Post Inspector |
| Überhaupt kein Bild | Relative oder nicht erreichbare Bildadresse | Eine vollständige, öffentliche https://-Adresse verwenden |
| Winziges Vorschaubild statt eines breiten Bildes | Bild zu klein, oder auf X fehlt twitter:card | 1200 × 630 verwenden und summary_large_image ergänzen |
| Der falsche Titel | Tags werden erst nach dem Laden per JavaScript eingefügt | Die Tags in das HTML schreiben, das der Server ausliefert; die meisten Crawler führen keine Skripte aus |
| Nur auf einer Seite gar nichts | Die Seite sperrt Bots oder verlangt einen Login | Dem Crawler erlauben, die Seite abzurufen |
Der Punkt mit JavaScript trifft viele Single-Page-Apps: Erscheinen die Tags erst, nachdem Skripte gelaufen sind, bekommen die Crawler der sozialen Netzwerke sie nie zu sehen. Rendern Sie sie auf dem Server, oder rendern Sie zumindest die Seiten vorab, die am häufigsten geteilt werden.
Die Tags schreiben
Der Meta-Tag-Generator schreibt die Such-Tags, die Open-Graph-Tags und die X-Tags aus einem kurzen Formular, mit Vorschauen für Google, Facebook und X, die sich beim Tippen aktualisieren. Er kann auch die Tags einer bestehenden Seite aus ihrem HTML einlesen; das ist der schnellste Weg, eine vorhandene Seite zu überprüfen. Der Open Graph Generator öffnet ihn mit der Vorschau für soziale Netzwerke im Mittelpunkt.