Was Open-Graph-Tags sind
Wenn du einen Link bei WhatsApp oder LinkedIn einfügst, ruft die App die Seite ab und baut daraus eine kleine Vorschau mit Bild, Titel und kurzem Text. Diese Angaben kommen meist aus den Open-Graph-Tags: Meta-Tags im <head> deiner Seite, festgelegt im Open-Graph-Protokoll.
| Tag | Wofür |
|---|---|
| og:title | Die Überschrift der Vorschau |
| og:description | Ein, zwei Zeilen Text unter dem Titel |
| og:image | Das Vorschaubild (als vollständige URL) |
| og:url | Die Hauptadresse der Seite |
| og:type | Art des Inhalts, meist website oder article |
| og:site_name | Name deines Betriebs oder deiner Website |
| twitter:card | Sagt X, welches Layout es nutzen soll, z. B. summary_large_image |
Fehlen diese Tags, rät jede App selbst. Dann landet vielleicht ein zufälliges Logo, der Text deines Cookie-Banners oder gar kein Bild in der Vorschau. X liest Titel, Beschreibung und Bild aus den Open-Graph-Tags, braucht aber twitter:card, um das gewünschte Layout zu kennen.
Warum die Link-Vorschau wichtig ist
Bei kleinen Betrieben werden viele Links außerhalb von Google geteilt: Eine Kundin schickt deine Speisekarte per WhatsApp an eine Freundin, eine Physiotherapeutin teilt ihren neuen Blogartikel auf LinkedIn, eine lokale Facebook-Gruppe teilt deine Neueröffnung.
Eine klare Vorschau mit gutem Foto und konkretem Titel wirkt vertrauenswürdig und wird angeklickt. Ohne Bild oder mit abgeschnittenem Titel wirkt der Link eher wie Spam. Die Tags richtig zu setzen dauert etwa zehn Minuten und hilft bei jedem Link, der je geteilt wird.
Beispiel: Friseursalon
Titel: Startseite | Willkommen. Kein Bild.
Titel: Balayage und Färben in Leipzig | Studio Lina. Bild: helles Foto einer fertigen Frisur.
Die zweite Vorschau zeigt, was man bekommt, bevor man tippt.
Bildgrößen je Plattform
Ein Bild mit 1200 × 630 Pixeln (Seitenverhältnis 1,91 : 1) funktioniert fast überall gut. Die Werte unten sind Richtwerte – die Plattformen ändern ihre Darstellung immer wieder.
| Plattform | Empfohlenes Bild | Hinweise (ungefähr) |
|---|---|---|
| 1200 × 630 px (1,91 : 1) | Für die große Vorschau mindestens 600 × 315 px. Kleinere Bilder erscheinen eventuell nur als kleines Vorschaubild. | |
| 1200 × 627 px (ca. 1,91 : 1) | Nutzt og:image. Sehr kleine Bilder erscheinen als Miniatur. | |
| X (Twitter) | 1200 × 600 px oder 1200 × 630 px | summary_large_image zeigt das Bild etwa im Format 2 : 1, die Ränder werden also leicht beschnitten. |
| 1200 × 630 px | Dateigröße klein halten. Große Bilder (ab einigen Hundert KB) werden eventuell nicht angezeigt. | |
| Slack | 1200 × 630 px | Liest Open-Graph- und Twitter-Tags. Zeigt je nach Nachricht ein großes Bild oder eine Miniatur. |
- Wichtiges in die Mitte. Plattformen schneiden die Ränder unterschiedlich ab, lass also Abstand um Text und Logo.
- JPG oder PNG verwenden. Für Fotos ist JPG meist kleiner.
- Datei klein halten. Unter etwa 5 MB ist eine übliche allgemeine Grenze, kleiner ist aber besser. Ist dir WhatsApp wichtig, bleib deutlich unter 300 KB – das ist eine Faustregel, keine offizielle Grenze.
- Wenig Text im Bild. Auf dem Handy ist er sonst nicht lesbar.
Beispiel für die Meta-Tags
So sieht der Code aus, den das Tool erzeugt. Füge ihn in den <head> deiner Seite ein und ersetze die Werte:
<meta property="og:type" content="website">
<meta property="og:site_name" content="Café Rosa">
<meta property="og:title" content="Frühstück und hausgemachte Kuchen in Leipzig">
<meta property="og:description" content="Frisches Gebäck, guter Kaffee und Brunch am Wochenende in der Südvorstadt. Täglich ab 8 Uhr geöffnet.">
<meta property="og:url" content="https://www.cafe-rosa.example/">
<meta property="og:image" content="https://www.cafe-rosa.example/bilder/og-cafe.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Theke mit Kuchen und Kaffee im Café Rosa">
<meta name="twitter:card" content="summary_large_image">Die Tags og:image:width und og:image:height sind optional. Sie helfen aber manchen Plattformen, das Bild schon beim allerersten Teilen richtig anzuzeigen. og:image:alt beschreibt das Bild für Menschen, die einen Screenreader nutzen.
Jede Seite sollte eigenen Titel, eigene Beschreibung und am besten ein eigenes Bild haben. Mindestens aber ein Standard-og:image für alle Seiten.
Guter Titel und guter Text für die Vorschau
Vorschaukarten sind klein, vor allem auf dem Handy. Langer Text wird abgeschnitten, und jede App schneidet an einer anderen Stelle ab. Als grobe Orientierung:
- Titel: etwa 40 bis 60 Zeichen. Die wichtigsten Wörter nach vorn.
- Beschreibung: etwa 100 bis 150 Zeichen. Manche Apps zeigen eine Zeile, andere zwei oder drei, WhatsApp manchmal gar keine.
- Konkret sein: Sag, was du anbietest und wo. „Jeden Morgen frische Croissants in der Südvorstadt“ schlägt „Willkommen auf unserer Website“.
Das Tool prüft diese Längen und das Seitenverhältnis deines Bildes und markiert alles, was wahrscheinlich abgeschnitten wird. Du kannst auch den HTML-Code deiner Seite einfügen, dann füllt es die Felder aus den vorhandenen Tags. Das Bild lädt nur dein eigener Browser, um die Vorschau anzuzeigen; hochgeladen oder gespeichert wird nichts.
Cache: Warum noch die alte Vorschau erscheint
Plattformen speichern eine Vorschau, sobald ein Link zum ersten Mal geteilt wird (das nennt man Cache). Korrigierst du danach deine Tags, bleibt die alte Vorschau oft tage- oder wochenlang hängen. So erzwingst du eine Aktualisierung:
- Facebook: Öffne den Sharing Debugger, gib deine URL ein und klicke auf „Erneut scrapen“.
- LinkedIn: Gib die URL im Post Inspector ein. Er ruft die Seite neu ab und aktualisiert die Vorschau.
- X (Twitter): Der frühere Card Validator zeigt keine Vorschau mehr. Fang stattdessen an, einen Beitrag mit deinem Link zu schreiben, und schau dir die Karte vor dem Posten an. Veröffentlichen musst du ihn nicht.
- WhatsApp: Ein Tool zum Aktualisieren gibt es nicht. Häng einen Parameter wie
?v=2an den Link (zum Beispielhttps://www.example.com/speisekarte/?v=2). WhatsApp hält ihn für einen neuen Link und ruft die Seite neu ab.
Häufige Fehler
- Relative Bild-URLs.
/bilder/og.jpgfunktioniert nicht. Nutze die vollständige Adresse mithttps://. - Bild gesperrt. Blockiert deine robots.txt den Bilderordner oder liegt das Bild hinter einem Login, kommen die Plattformen nicht heran. Prüfen kannst du das mit dem robots.txt-Tester.
- Bild zu klein. Ein Logo mit 300 × 200 px wird zur winzigen Miniatur oder ignoriert.
- Kein og:image auf Unterseiten. Die Startseite hat ein Bild, Blogartikel oder Produktseiten aber nicht. Dann erscheint ein zufälliges Bild oder keins.
- http-Bild auf einer https-Seite. Manche Plattformen überspringen Bilder, die nicht über https geladen werden.
- Riesige Bilddateien. Ein 4-MB-Foto direkt aus der Kamera kann dazu führen, dass WhatsApp keine Vorschau zeigt. Verkleinere und komprimiere es vorher.
So setzt du die Tags auf deiner Website
Die meisten Baukästen und CMS haben ein eigenes Feld fürs Teilen in sozialen Netzwerken. Code von Hand schreiben musst du also selten:
- WordPress: SEO-Plugins wie Yoast SEO oder Rank Math haben pro Seite einen Social-Tab für Titel, Beschreibung und Bild.
- Wix und Squarespace: Such in den SEO-Optionen jeder Seite nach den Einstellungen fürs Teilen.
- Shopify: Leg in den Theme-Einstellungen ein Bild fürs Teilen fest; Produktseiten nutzen meist das Produktbild.
- Eigenes HTML: Füge den Tag-Block oben in den
<head>jeder Seite ein.
Dein Open-Graph-Titel kann derselbe sein wie dein Google-Titel, muss aber nicht. Für die Google-Seite nutzt du die Google-Vorschau, und der SEO-Check zeigt dir, ob einer Seite die Open-Graph-Tags fehlen.