Wenn Sie einen Link auf WhatsApp teilen, ruft die App Ihre Seite ab, liest einige Meta-Tags aus dem HTML und baut eine Vorschaukarte aus Titel, Beschreibung und Bild zusammen, noch bevor der Empfänger den Link antippt. Sind diese Tags falsch, verschwindet die Vorschau still. Dieser Leitfaden erklärt genau, welche Open-Graph-Tags WhatsApp liest, warum og:image eine absolute URL verwenden muss, welche Bildabmessungen tatsächlich funktionieren und wie Sie Vorschauen vor dem Senden testen und reparieren.
Wie WhatsApp Linkvorschauen liest
Jedes Mal, wenn jemand eine URL in einen WhatsApp-Chat einfügt, stellt der interne Crawler der App – manchmal WhatsApp Link Preview Bot genannt – eine HTTP-GET-Anfrage an diese URL. Er analysiert die HTML-Antwort und sucht nach <meta property="og:...">-Tags im <head>. Findet er die richtigen Tags, baut er eine Vorschaukarte zusammen. Findet er sie nicht, erscheint der Link als reiner Text ohne visuellen Kontext.
WhatsApp ist nicht der einzige Crawler, der so arbeitet – Facebook, LinkedIn, Slack, Telegram, iMessage und Twitter/X folgen alle demselben Open-Graph-Protokoll, das Facebook 2010 entwickelt hat. Die Spezifikation liegt auf ogp.me und definiert eine Reihe von <meta>-Tags, die jede Website hinzufügen kann, um zu steuern, wie ihre Seiten beim Teilen in sozialen Netzwerken erscheinen.
Wann findet das Crawlen statt?
WhatsApp crawlt eine URL, wenn Sie sie zum ersten Mal in einen Chat einfügen und die Vorschau lädt. Das Ergebnis wird aggressiv zwischengespeichert – WhatsApp liefert dieselbe Vorschaukarte noch Tage oder sogar Wochen nach dem ersten Abruf aus. Deshalb behebt das Aktualisieren Ihrer OG-Tags auf dem Server eine kaputte Vorschau nicht sofort; die zwischengespeicherte Version erscheint weiterhin. Mehr zum Cache-Busting in einem späteren Abschnitt.
Hinweis
Vorschauen in Gruppenchats gegenüber Direktnachrichten
WhatsApp erzeugt Vorschauen sowohl in Direktnachrichten als auch in Gruppenchats. Das Verhalten ist identisch – in beiden Kontexten werden dieselben OG-Tags verwendet. Es gibt jedoch eine Nuance: Wenn der Absender Linkvorschauen in seinen WhatsApp-Einstellungen deaktiviert hat (Einstellungen → Chats → Linkvorschau erstellen), erscheinen keine Vorschauen, egal wie korrekt Ihre Tags konfiguriert sind. Das ist eine clientseitige Einstellung, kein serverseitiges Problem.
Anforderung absoluter URL bei og:image
Dies ist die häufigste Ursache kaputter WhatsApp-Vorschauen: ein relativer Pfad im og:image-Tag. Die Spezifikation des Open-Graph-Protokolls ist hier eindeutig – og:image muss eine vollständige absolute URL sein. Kein wurzelrelativer Pfad, keine protokollrelative URL, kein Pfadfragment. Eine komplette URL mit Schema, Domain und Pfad.
| Format | Beispiel | Funktioniert in WhatsApp? |
|---|---|---|
| ✓ Absolute URL (korrekt) | https://ihredomain.com/images/share.jpg | ✓ Ja |
| ✗ Wurzelrelativer Pfad | /images/share.jpg | ✗ Nein – schlägt still fehl |
| ✗ Protokollrelative URL | //ihredomain.com/images/share.jpg | ✗ Unzuverlässig |
| ✗ Relativer Pfad | images/share.jpg | ✗ Nein |
| ✗ Data-URI | data:image/jpeg;base64,... | ✗ Nein |
Strukturierte Eigenschaften können angegeben werden, indem man einen Doppelpunkt nach den Eigenschaftsnamen setzt und ein weiteres og:image-Tag mit einer absoluten URL verwendet.
Warum relative Pfade still fehlschlagen
Wenn der Crawler von WhatsApp Ihre Seite abruft, analysiert er das HTML isoliert – er „kennt“ Ihre Basis-URL nicht so wie ein Browser. Ein relativer Pfad wie /images/share.jpg hat keinen Kontext, daher ignoriert der Crawler ihn entweder oder versucht, ihn gegen eine Basis-URL aufzulösen, die er möglicherweise falsch abgeleitet hat. Das Ergebnis ist ein fehlendes Bild ohne Fehlermeldung – die Vorschau erscheint ohne Bild oder gar nicht.
Verwenden Sie immer die vollständige absolute URL inklusive https://. Wenn Ihre Website sowohl HTTP als auch HTTPS unterstützt, verwenden Sie immer https:// – viele Social-Crawler weigern sich aus Sicherheitsgründen, Nicht-HTTPS-Bilder in Vorschauen zu laden.
Warnung
CDN und Bild-Hosts von Drittanbietern
Wenn Ihre Bilder von einem CDN oder einem Drittanbieter-Host (wie Cloudinary, Imgix oder einem Cloud-Storage-Bucket) ausgeliefert werden, gilt die Anforderung der absoluten URL weiterhin – verwenden Sie einfach die vollständige CDN-URL. Die einzige zusätzliche Überlegung sind CORS-Header: Stellen Sie sicher, dass Ihr CDN Cross-Origin-Anfragen erlaubt, da einige Crawler dies prüfen. Prüfen Sie außerdem, dass die CDN-URL keine ablaufenden Authentifizierungs-Token enthält – eine zeitlich begrenzte signierte URL macht Vorschauen für alle kaputt, die den Link nach Ablauf des Tokens anklicken.
Optimierer für Open-Graph-Vorschautext
Prüfen Sie, ob die Längen Ihres og:title und og:description gleichzeitig für WhatsApp, Facebook, LinkedIn und Twitter optimiert sind.
Größen- und Formatregeln für og:image
Die richtige Bild-URL ist nur die halbe Miete. WhatsApp hat außerdem Größen- und Formatanforderungen, die darüber entscheiden, ob das Bild prominent angezeigt oder ganz übersprungen wird.
Empfohlene Abmessungen
Die Open-Graph-Spezifikation empfiehlt 1200×630 Pixel bei einem Seitenverhältnis von 1,91:1. Dies ist das Maß, das gleichzeitig auf WhatsApp, Facebook, LinkedIn und Slack gut aussieht, es gibt also keinen Grund, es nicht als Standard zu verwenden.
| Plattform | Mindestgröße | Empfohlene Größe | Seitenverhältnis |
|---|---|---|---|
| 300×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 oder 1:1 | |
| Twitter/X | 280×150 px | 1200×628 px | 2:1 (summary_large_image) |
| Slack | 500×300 px | 1200×630 px | 1,91:1 |
WhatsApp zeigt Bilder bis hinunter zu etwa 300×200 Pixeln an, aber alles Kleinere wird tendenziell als winzige Miniaturansicht statt als prominentes Bild gerendert, und sehr kleine Bilder werden möglicherweise ganz weggelassen. Bilder unter dem Mindestschwellenwert oder mit extremen Seitenverhältnissen (etwa sehr hohe Hochformate) werden manchmal abgelehnt.
Unterstützte Dateiformate
- JPEG (.jpg, .jpeg) – Beste Wahl für Fotos und Bilder mit Verläufen. Weitgehend von allen Social-Crawlern unterstützt.
- PNG (.png) – Beste Wahl für Grafiken, Logos und Bilder mit Transparenz. Ebenfalls universell unterstützt.
- WebP – Uneinheitliche Crawler-Unterstützung. Vermeiden Sie WebP für og:image, auch wenn Ihre Website sonst WebP-Bilder verwendet.
- GIF – Weitgehend unterstützt, aber nur das erste Einzelbild wird gezeigt (keine Animation). Selten ideal für Vorschaubilder.
- SVG – Wird von den meisten Social-Crawlern einschließlich WhatsApp nicht unterstützt. Verwenden Sie stattdessen ein rasterisiertes PNG oder JPEG.
Überlegungen zur Dateigröße
Halten Sie Ihre og:image-Datei unter 300 KB. Der Crawler von WhatsApp läuft auf Metas Servern und ist auf Geschwindigkeit optimiert – sehr große Bilder brauchen länger zum Abrufen und erhöhen die Wahrscheinlichkeit eines Timeouts, was zu einer Vorschau ohne Bild führt. Ein gut optimiertes JPEG mit 1200×630 px sollte bequem unter 200 KB bleiben.
Tipp
Häufige Ursachen für kaputte Vorschauen
Selbst mit korrekten OG-Tags werden WhatsApp-Linkvorschauen manchmal nicht gerendert. Dies sind die häufigsten Ursachen.
Relative og:image-URL
Oben bereits behandelt, aber eine Wiederholung wert, weil es der häufigste Fehler ist. Verwenden Sie immer https://ihredomain.com/path/to/image.jpg – niemals /path/to/image.jpg. Nutzen Sie den OG-Tag-Validierer, um dies vor dem Teilen zu erkennen.
OG-Tags per JavaScript gerendert (nicht im serverseitigen HTML)
Der Crawler von WhatsApp führt kein JavaScript aus. Wenn Ihre Meta-Tags von einem clientseitigen Framework nach dem Laden der Seite eingefügt werden – üblich bei Single-Page-Anwendungen mit React, Vue oder Angular ohne serverseitiges Rendering – sieht der Crawler ein leeres <head> und erzeugt keine Vorschau. OG-Tags müssen in der ersten HTML-Antwort des Servers enthalten sein. Verwenden Sie serverseitiges Rendering (SSR) oder statische Seitengenerierung (SSG), damit die Tags im rohen HTML stehen.
Server blockiert den WhatsApp-Crawler
Sicherheitstools wie Cloudflares Bot Fight Mode, eigene WAF-Regeln oder aggressive robots.txt-Konfigurationen blockieren manchmal den WhatsApp-Crawler. Prüfen Sie Ihre robots.txt, ob sie nicht alle Crawler mit `User-agent: * Disallow: /` blockiert. Prüfen Sie beim Testen auch die Sicherheitsprotokolle Ihres Servers – möglicherweise finden Sie den Crawler mit einem 403- oder 429-Status blockiert.
og:image liefert einen anderen Status als 200
Wenn die Bild-URL einen 404, 403, eine 301-Weiterleitung oder irgendeine andere Antwort als 200 zurückgibt, verwirft WhatsApp das Bild still aus der Vorschau. Prüfen Sie, ob Ihre Bild-URL direkt erreichbar ist (keine Weiterleitungen, keine Authentifizierung), indem Sie sie in einem privaten Browserfenster öffnen und den Status kontrollieren. Nutzen Sie den HTTP-Header-Inspektor, um die Antwort-Header einer beliebigen Bild-URL zu prüfen.
og:image liegt auf HTTP (nicht HTTPS)
Social-Crawler erzwingen aus Sicherheitsgründen üblicherweise HTTPS. Ein über einfaches HTTP ausgeliefertes Bild wird oft übersprungen, selbst wenn der Rest Ihrer Seite HTTPS verwendet. Stellen Sie immer sicher, dass Ihre og:image-URL mit https:// beginnt.
og:image überschreitet das Größenlimit oder hat ein ungültiges Format
Sehr große Bilder (über 5 MB) oder nicht unterstützte Formate (SVG, WebP bei manchen Crawlern) werden still übersprungen. Bleiben Sie bei JPEG oder PNG unter 300 KB bei 1200×630 px.
Warnung
WhatsApp-Vorschauen aus dem Cache zwingen
WhatsApp cached Linkvorschauen pro URL. Sobald eine URL gecrawlt wurde, wird dieselbe Vorschau allen Empfängern dieses Links ausgeliefert – unabhängig davon, ob Sie die OG-Tags seither aktualisiert haben. Die Cache-Lebensdauer ist nicht öffentlich dokumentiert, kann in der Praxis aber mehrere Tage bis zu einer Woche betragen.
Die Query-String-Methode
Der zuverlässigste Workaround ist, beim Teilen eine Query-Zeichenkette an die URL anzuhängen. WhatsApp behandelt https://ihredomain.com/seite?v=2 als eigenständige URL gegenüber https://ihredomain.com/seite, crawlt die Seite also frisch und erzeugt eine neue Vorschau. Die Query-Zeichenkette kann alles sein – ?v=2, ?ref=wa, ?share=1 – solange sie sich von der zuvor geteilten unterscheidet.
Tipp
Den Sharing Debugger von Facebook zum Vorwärmen des Cache nutzen
Der Sharing Debugger von Facebook (developers.facebook.com/tools/debug) ist ein Tool, das Ihre OG-Tags validiert und ein erneutes Crawlen Ihrer URL auf Metas Infrastruktur erzwingt. Da WhatsApp und Facebook dieselbe Open-Graph-Infrastruktur unter Meta nutzen, kann ein Crawl über den Sharing Debugger manchmal den WhatsApp-Vorschaucache für dieselbe URL vorbereiten (oder leeren). Es lohnt sich, ihn nach jeder Tag-Änderung zusammen mit der Query-String-Methode auszuführen.
Zusammenfassung: Cache-Busting-Workflow
- Aktualisieren Sie Ihre OG-Tags auf dem Server und prüfen Sie, ob die rohe HTML-Antwort die neuen Werte enthält.
- Lassen Sie Ihre URL durch den OG-Tag-Validierer laufen, um die Tags zu bestätigen.
- Reichen Sie die URL beim Sharing Debugger von Facebook ein, um ein erneutes Crawlen zu erzwingen.
- Hängen Sie beim Teilen auf WhatsApp eine neue Query-Zeichenkette (z. B. ?v=2) an, um ein frisches Crawlen zu gewährleisten.
Fortgeschrittene OG-Tag-Muster
Sobald die Grundlagen funktionieren, geben Ihnen einige fortgeschrittene Muster mehr Kontrolle darüber, wie Ihre Inhalte auf WhatsApp und anderen sozialen Plattformen erscheinen.
Mehrere og:image-Tags
Die Open-Graph-Spezifikation erlaubt mehrere og:image-Tags auf einer Seite. Jedes weitere Bild-Tag gilt als Alternative – Crawler verwenden üblicherweise das erste gültige Bild, das sie finden. Das ist nützlich für einen Fallback:
<!-- Primary: large landscape (WhatsApp, Facebook, LinkedIn) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Fallback: square (some LinkedIn contexts, Instagram) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x1200.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />og:image getrennt von twitter:image verwenden
Twitter/X liest twitter:image zuerst und greift nur dann auf og:image zurück, wenn keine Twitter-Card-Tags vorhanden sind. Das bedeutet, Sie können ein anderes Bild für Twitter angeben, ohne WhatsApp zu beeinflussen. Twitters empfohlene Bildgröße für eine summary_large_image-Karte ist 1200×628 px (Verhältnis 2:1) statt 1200×630 px. Der Unterschied ist klein, aber wenn Sie auf beiden Plattformen pixelgenaues Rendering möchten, geben Sie beide an:
<!-- Used by WhatsApp, Facebook, LinkedIn, Slack -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<!-- Used by Twitter/X specifically -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/share-1200x628.jpg" />Dynamische OG-Bilder
Viele moderne Websites erzeugen OG-Bilder dynamisch – für Blogbeiträge, Produktseiten oder Nutzerprofile – über Dienste oder serverseitiges Rendering. Wenn Sie Bilder programmatisch generieren, denken Sie daran, dass die URL weiterhin absolut und öffentlich erreichbar sein muss. Dynamische OG-Bild-URLs sehen oft so aus: https://ihredomain.com/api/og?title=Mein+Beitragstitel – das ist völlig gültig, solange der Endpunkt ein echtes Bild mit korrektem Content-Type-Header (image/jpeg oder image/png) zurückgibt und keine HTML-Seite.
Strukturierte Daten zusammen mit OG-Tags validieren
Open-Graph-Tags arbeiten neben (nicht statt) JSON-LD-strukturierten Daten. Für Artikel, Produkte und lokale Unternehmen ermöglichen strukturierte Daten die Rich Results von Google, während OG-Tags die Social-Sharing-Vorschauen übernehmen. Die beiden Systeme ergänzen sich – Sie brauchen beide. Nutzen Sie den Validierer für strukturierte Daten, um Ihr JSON-LD-Schema zu prüfen, während der OG-Tag-Validierer Ihre Open-Graph-Implementierung abdeckt. Der Meta-Tag-Generator kann einen kompletten <head>-Bereich mit OG- und Twitter-Card-Tags in einer Ausgabe erzeugen.
Vollständiger empfohlener head-Bereich
Als Referenz finden Sie hier einen vollständigen, produktionsreifen <head>-Bereich mit Open Graph (WhatsApp, Facebook, LinkedIn), Twitter Card und Standard-SEO-Meta-Tags:
<head>
<!-- Standard SEO -->
<title>Your Page Title | Site Name</title>
<meta name="description" content="A concise 150-160 character page description." />
<link rel="canonical" href="https://yourdomain.com/your-page" />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary for social sharing." />
<meta property="og:image" content="https://yourdomain.com/images/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card (Twitter/X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/share-1200x628.jpg" />
</head>Meta-Tag-Generator
Erzeugen Sie in einem Durchgang einen kompletten Satz aus Open-Graph-, Twitter-Card- und SEO-Meta-Tags – ohne manuelles Schreiben.
Die wichtigsten Punkte
- WhatsApp liest vier Open-Graph-Tags, um eine Linkvorschau zu erstellen: og:title, og:description, og:image und og:url.
- og:image muss eine vollständige absolute HTTPS-URL sein – relative Pfade schlagen in WhatsApp und allen anderen Social-Crawlern still fehl.
- Verwenden Sie ein JPEG oder PNG mit 1200×630 px unter 300 KB als og:image für die beste plattformübergreifende Darstellung.
- Geben Sie og:image:width und og:image:height an, damit Crawler das Layout der Vorschau vor dem Laden des Bildes festlegen können.
- OG-Tags müssen im serverseitig gerenderten HTML stehen – per JavaScript eingefügte Meta-Tags werden von WhatsApp nicht gelesen.
- WhatsApp cached Vorschauen pro URL tagelang. Hängen Sie beim Teilen eines aktualisierten Links eine Query-Zeichenkette (?v=2) an.
- Nutzen Sie den OG-Tag-Validierer, um vor dem Teilen alle Tags zu prüfen, und den Sharing Debugger von Facebook, um nach Änderungen ein erneutes Crawlen zu erzwingen.