Linkvorschau ohne Bild? So beheben Sie Open Graph Fehler bei WhatsApp, Facebook und LinkedIn

Wir, Talha Aslan und Team, gehen bei diesem Fehler immer in derselben Reihenfolge vor. Zunächst prüfen wir, ob die Tags vorhanden sind. Danach testen wir die Bildadresse. Dann folgt der Zugriff des Crawlers, und schließlich leeren wir die Caches.

Open Graph ist ein Satz von Meta Tags, der festlegt, wie eine Seite in sozialen Netzwerken erscheint. Das Protokoll selbst beschreibt ogp.me. Kurz gesagt schickt die Plattform einen Bot auf Ihre Seite, liest diese Tags und baut daraus die Karte.

Welches Symptom deutet auf welche Ursache?

Wer das Symptom richtig liest, spart viel Zeit. Erscheint zum Beispiel gar keine Karte, liegt das Problem meist beim Zugriff. Steht der Titel da, aber das Bild fehlt, betrifft es das Bild selbst. Ein altes Bild bedeutet dagegen fast immer: Cache.

Nutzen Sie diese Tabelle als Diagnoseplan. Deshalb gilt: Erst die erste Prüfung einer Zeile erledigen, dann weitergehen. In der Praxis lösen die ersten beiden Prüfungen die meisten Fälle.

Welche Open Graph Tags braucht Ihre Seite wirklich?

Laut Protokoll gibt es vier Grundeigenschaften: og:title, og:type, og:image und og:url. Der Leitfaden von Meta für Webmaster nennt dagegen og:url, og:title, og:description und og:image als Basis. Zusätzlich empfiehlt er og:type und og:locale.

• og:title: die Überschrift der Karte, gern kürzer als der Seitentitel.
• og:description: ein bis zwei Sätze unter dem Titel.
• og:image: das Bild der Karte, immer als vollständige Adresse.
• og:url: die kanonische, dauerhafte Adresse der Seite.
• og:type: der Inhaltstyp, meist website oder article.
• og:image:alt: eine Beschreibung des Bildinhalts; laut Protokoll gehört sie zu jedem og:image.

Alle Tags stehen im Kopfbereich (head) der Seite. Außerdem sollte jede Seite eigene Werte tragen. Ein einziges og:image für die ganze Website funktioniert zwar, allerdings sieht dann jede geteilte Seite gleich aus.

Warum muss og:image eine absolute URL sein?

Ein Bot interpretiert Pfade nicht wie ein Browser. Stattdessen übernimmt er den Wert des Tags wörtlich. Daher braucht die Bildadresse Protokoll und Domain. Mit einem relativen Pfad findet der Bot womöglich gar nichts.

Alle Beispiele im Protokoll verwenden vollständige Adressen mit https. Ein Beispielszenario: Ihr Theme schreibt /uploads/titelbild.jpg in das Tag. Richtig wäre https://example.com/uploads/titelbild.jpg.

Zudem muss sich das Bild auch öffnen lassen. Rufen Sie die Bildadresse in einem privaten Fenster auf, ohne Anmeldung. Ein Bild hinter einem Login, in einem geschützten Ordner oder mit Fehler 404 erscheint nicht in der Linkvorschau. Die Hilfeseite von LinkedIn weist ebenfalls auf Probleme mit geschützten Verzeichnissen hin.

Wann lohnt sich professionelle Hilfe?

Manchmal stimmen die Tags, das Bild öffnet sich, und alle Caches sind geleert. Trotzdem bleibt die Linkvorschau leer. Dann steckt die Ursache meist im Server, in der Sicherheitsschicht oder in den Vorlagen des Themes. Wer jetzt auf Verdacht Einstellungen ändert, schafft oft neue Probleme.

In solchen Fällen prüfen wir drei Dinge zusammen: was der Bot tatsächlich erhalten hat, wie das Theme den Kopfbereich schreibt und welche Sicherheitsregeln greifen. Wenn Sie eine Website möchten, bei der geteilte Links von Anfang an sauber aussehen, verankert unser professionelles Webdesign Open Graph in jeder Seitenvorlage.

Allerdings bringt eine saubere Karte allein noch keine Besucher. Sie entscheidet aber mit, ob jemand den Link antippt. Mehr dazu lesen Sie in unserem Beitrag über Website Traffic aus Social Media.

Welche Bildgröße und welches Seitenverhältnis passen?

Übernehmen Sie Maße aus den offiziellen Quellen, nicht aus Vermutungen. LinkedIn nennt mindestens 1200 x 627 Pixel, ein Seitenverhältnis von 1,91:1 und maximal 5 MB. Außerdem zeigt LinkedIn Bilder unter 401 Pixel Breite nur als Miniatur. Die Best Practices von Meta empfehlen mindestens 1080 Pixel Breite für hochauflösende Bildschirme.

Ein zu kleines Bild ist also ein häufiger Grund für eine Linkvorschau im Miniaturformat. Zusammengefasst ergibt sich ein praktisches Ziel: ein Querformat nahe 1,91:1 mit etwa 1200 Pixel Breite. Meta nennt JPEG, GIF und PNG als unterstützte Formate, daher sind Sie mit einem dieser drei auf der sicheren Seite.

Ist die Datei zu schwer, hilft unser Tool zum Bild verkleinern. Allgemeine Bildmaße für Websites finden Sie in unserem Beitrag zu Bildgrößen für Slider, Banner und Header. Hier geht es nur um die Karte beim Teilen.

Hinweis: Plattformen passen diese Werte gelegentlich an. Prüfen Sie den aktuellen Stand deshalb immer auf der offiziellen Seite.

Was bringen og:image:width und og:image:height?

Laut den Best Practices von Meta kann der Crawler das Bild mit diesen beiden Tags schon beim ersten Teilen sofort darstellen. Ohne sie muss er das Bild zunächst herunterladen und verarbeiten. Folglich erscheint die allererste Linkvorschau manchmal ohne Bild.

Das heißt: Wenn Sie eine neue Seite veröffentlichen, sofort in eine WhatsApp Gruppe schicken und kein Bild sehen, kann genau das der Grund sein. Taucht das Bild beim zweiten Teilen auf, spricht das ebenfalls dafür.

1. Ermitteln Sie Breite und Höhe des Bildes in Pixel.
2. Tragen Sie diese Werte in og:image:width und og:image:height ein.
3. Ergänzen Sie optional og:image:type, etwa image/jpeg.
4. Lassen Sie die Seite einmal im Sharing Debugger scrapen, damit der Cache vorab gefüllt ist.

Statt die Tags von Hand zu schreiben, erstellen Sie einen Entwurf mit unserem Meta Tag Generator und übernehmen ihn in Ihr Theme.

Braucht die WhatsApp Linkvorschau ein eigenes Tag?

Nein, ein eigenes WhatsApp Tag ist nicht nötig. Nach unserer Erfahrung baut WhatsApp die Linkvorschau aus denselben Open Graph Tags. Sind og:title, og:description und og:image korrekt, klappt es also meist auch bei WhatsApp.

Allerdings gibt es für WhatsApp kein öffentliches Testwerkzeug wie den Sharing Debugger. Deshalb prüfen wir die Tags zuerst im Sharing Debugger von Meta. Danach fügen wir den Link in einen neuen WhatsApp Chat ein und schauen uns das Ergebnis an.

Zudem erzeugt WhatsApp die Vorschau auf dem Gerät des Absenders. Derselbe Link kann daher auf zwei Telefonen eine Weile unterschiedlich aussehen. Zeigt ein Gerät noch die alte Karte, hängen Sie testweise einen Parameter an den Link an. So behandelt die App ihn wie eine neue Adresse.

Klickbare Chatlinks sind ein anderes Thema. Dafür eignet sich unser WhatsApp Link Generator.

Blockiert eine Firewall den Crawler Ihrer Linkvorschau?

Oft ja, und genau das übersehen viele. Die Seite von Meta zu Webcrawlern nennt den Bot für geteilte Links facebookexternalhit. Sie empfiehlt, entweder seine User Agent Kennungen oder seine IP Adressen auf die Freigabeliste zu setzen; IP Adressen gelten dort als die sicherere Variante.

Botschutz, Ländersperren, Anfragelimits oder eine Abfrage wie „Sind Sie ein Mensch?“ stufen diesen Bot womöglich als Angreifer ein. Folglich entsteht keine oder nur eine halbe Linkvorschau.

• Suchen Sie in den Firewallprotokollen Ihres Hosters nach Sperren für facebookexternalhit oder den LinkedIn Bot.
• Prüfen Sie, ob Ihr CDN oder Ihr Botschutz eine Ausnahme für soziale Crawler kennt.
• Berücksichtigen Sie bei Ländersperren die Regionen, aus denen Crawler kommen.
• Schalten Sie einen vergessenen Wartungsmodus oder Passwortschutz ab.

Ein Beispielszenario: Nach einer Angriffswelle aktiviert eine Website strengen Botschutz. Besucher merken nichts. Ab dem nächsten Tag erscheint jedoch jeder geteilte Link ohne Bild. Den Zusammenhang erkennt man oft erst nach Tagen, obwohl das Sicherheitsprotokoll ihn in Minuten zeigt.

Diese Einstellungen liegen beim Hosting, daher ändern Sie sie am besten gemeinsam mit Ihrem Hoster.

Wirkt sich die robots.txt auf die Vorschau aus?

Ja, das kann passieren. Laut Meta können Sie in der robots.txt für jeden Crawler einen eigenen User Agent Block anlegen. Außerdem speichern Crawler die robots.txt bis zu 24 Stunden zwischen. Eine Änderung braucht also unter Umständen so lange.

Ein Beispielszenario: Während der Entwicklung sperrte eine Regel alle Bots, und beim Livegang hat niemand sie entfernt. Das erste Anzeichen ist dann oft nicht weniger Suchtraffic, sondern eine Linkvorschau ohne Bild.

Dieselbe Seite erwähnt, dass der Bot die robots.txt bei Sicherheits und Integritätsprüfungen nicht immer beachtet. Trotzdem reicht ein gesperrter Bildordner, um die Karte zu beschädigen. Ihre Regeln prüfen Sie mit unserem robots.txt Generator.

Stören Ladezeit und Servereinstellungen die Linkvorschau?

Durchaus. Laut der Crawlerseite von Meta kann Facebook Inhalte womöglich nicht anzeigen, wenn der Bot sie nicht innerhalb weniger Sekunden erreicht. Zudem sollen die Open Graph Eigenschaften im ersten MB der Seite stehen. Außerdem soll Ihr Server gzip und deflate unterstützen.

Platzieren Sie die Tags also möglichst weit oben im Kopfbereich. Große eingebettete Skripte oder Stilblöcke am Anfang können die Tags sonst über diese Grenze schieben.

Ebenso wichtig ist HTTPS. Ein abgelaufenes oder fehlerhaftes Zertifikat hindert den Bot daran, Seite oder Bild abzurufen. Prüfen Sie es mit unserem SSL Check. Läuft die Bildadresse über mehrere Weiterleitungen, kürzen Sie die Kette; dabei hilft unser Redirect Checker.

Warum erscheint weiterhin das alte Bild?

Weil Plattformen Seite und Bild zwischenspeichern. Laut Meta landen Bilder anhand ihrer URL im Cache. Ändert sich die URL nicht, bleibt das alte Bild. Eine neue Datei unter demselben Namen hilft deshalb selten.

Die Best Practices nennen außerdem einen üblichen Zyklus von 24 Stunden. Für schnellere Aktualisierung empfiehlt Meta ein erneutes Scrapen im Sharing Debugger.

1. Laden Sie das neue Bild unter einem anderen Dateinamen hoch.
2. Ändern Sie og:image auf die neue Adresse.
3. Leeren Sie den Cache Ihres Plugins und Ihres CDN.
4. Lassen Sie die Seite im Sharing Debugger neu scrapen.
5. Prüfen Sie die Adresse erneut im LinkedIn Post Inspector.
6. Testen Sie den Link in einem neuen WhatsApp Chat.

Die Reihenfolge zählt. Scrapen Sie neu, bevor Sie Ihren eigenen Cache leeren, liest der Bot schlicht wieder die alten Tags.

Wie nutzen Sie den Sharing Debugger?

Der Sharing Debugger ist das offizielle Werkzeug von Meta, um Ihre Seite mit den Augen des Crawlers zu sehen. Laut Webmaster Leitfaden zeigt er die gelesenen Tags, Fehler und Warnungen. Zudem stößt er ein neues Scrapen an.

1. Öffnen Sie den Sharing Debugger und fügen Sie die vollständige Adresse ein.
2. Prüfen Sie den Antwortcode und die erkannten Tags.
3. Achten Sie auf Warnungen zu fehlenden Tags oder nicht erreichbaren Bildern.
4. Korrigieren Sie die Tags und lassen Sie die Seite erneut scrapen.
5. Kontrollieren Sie, ob Bild und Titel in der Linkvorschau stimmen.

Entscheidend ist, was der Bot gesehen hat. Ihr Browser zeigt die Seite vielleicht korrekt, während der Bot eine Loginseite, eine Cookie Abfrage oder eine Fehlerseite erhält. Dann liegt das Problem beim Zugriff, nicht bei den Tags.

Eine schnelle eigene Kontrolle bietet unser Tool Link Vorschau; den Cache der Plattform erneuert jedoch nur deren eigenes Werkzeug.

Was gilt für LinkedIn und X?

Auch LinkedIn liest Open Graph Tags. Laut Hilfeseite müssen title, image, description und url vorhanden sein. Erfüllt ein Bild die Vorgaben und erscheint trotzdem nicht, blockiert Ihre Website womöglich den Abruf durch LinkedIn.

Mit dem LinkedIn Post Inspector sehen Sie, wie eine Adresse auf LinkedIn erscheint. Prüfen Sie die Adresse dort nach jeder Korrektur erneut; so erneuern Sie auch eine alte Karte.

X nutzt für seine Kartenlayouts eigene Card Tags. Wenn Sie dort eine große Bildkarte möchten, brauchen Sie daher womöglich zusätzlich das Tag für den Kartentyp. Die aktuellen Tagnamen und Bildregeln entnehmen Sie der Entwicklerdokumentation von X, denn sie ändern sich.

Kurz gesagt deckt ein sauberes Open Graph Setup WhatsApp, Facebook und LinkedIn gleichzeitig ab. Für X kommt ein kleiner Zusatz hinzu.

Wo verwalten Sie die Tags in WordPress oder im Theme?

Auf den meisten Websites schreibt ein SEO Plugin oder das Theme die Open Graph Tags. Häufig gibt es dann zwei Quellen gleichzeitig. Das Theme schreibt ein og:image, das Plugin ein anderes, und die Plattform nimmt das erste.

• Öffnen Sie den Quelltext und suchen Sie nach og:image. Gibt es mehrere, finden Sie die jeweilige Quelle.
• Legen Sie im Plugin ein Standardbild für das Teilen fest.
• Wählen Sie für jede wichtige Seite ein eigenes Vorschaubild.
• Prüfen Sie nach jedem Theme Update, ob die Tags noch vorhanden sind.

Beiträge ohne Beitragsbild greifen auf das Standardbild zurück. Fehlt auch das, wählt die Plattform irgendein Bild, und in der Linkvorschau landet ein abgeschnittenes Logo. Für ähnliche Fälle in der Google Suche lesen Sie unseren Beitrag zum falschen Vorschaubild in Google; dort gilt eine andere Logik.

Kann ein Cookie Banner den Bot aussperren?

Ja. Manche Websites zeigen beim ersten Besuch eine ganzseitige Einwilligungsabfrage, eine Altersabfrage oder eine Sprachauswahl. Leitet diese Abfrage auf eine eigene Adresse um, liest der Bot diese Seite statt Ihres Inhalts. Folglich zeigt die Linkvorschau den Titel der Abfrage.

Die Lösung: Blenden Sie die Abfrage als Ebene über der Seite ein und lassen Sie den eigentlichen HTML Inhalt unverändert. So bleiben die Open Graph Tags für jeden Besucher und jeden Bot gleich. Ihre Pflichten nach DSGVO und TTDSG erfüllen Sie auch mit dieser Lösung. Dieser Beitrag ist keine Rechtsberatung; den Text der Einwilligung klären Sie bitte mit Ihrer Rechtsberatung.

Der Sharing Debugger macht das Problem sichtbar. Stammt der erkannte Titel von der Abfrage, haben Sie die Ursache gefunden.

Wie setzen mehrsprachige Websites og:url und og:locale?

Jede Sprachversion sollte in og:url ihre eigene Adresse angeben. Das Protokoll versteht og:url als dauerhafte Kennung des Objekts. Steht auf der deutschen Seite die englische Adresse, behandelt die Plattform beide womöglich als ein Objekt und zeigt die falsche Sprache.

og:locale beschreibt Sprache und Region des Inhalts. Meta zählt es zu den empfohlenen Zusatztags. Für deutsche Seiten passt etwa de_DE.

• og:url zeigt in jeder Sprache auf die eigene Adresse.
• Titel und Beschreibung stehen in der jeweiligen Sprache, nicht als rohe Maschinenübersetzung.
• Enthält das Bild Text, erstellen Sie pro Sprache eine Version.
• Automatische Sprachweiterleitungen schicken den Bot nicht auf eine andere Version.

Sprachsignale für Suchmaschinen sind ein eigenes Thema. Dafür eignet sich unser Hreflang Generator.

Verändern UTM Parameter die Karte?

Den Inhalt der Karte meist nicht, wohl aber das Caching. Plattformen behandeln eine Adresse mit Parametern oft als neue Adresse. Daher zeigen die Version mit und ohne Parameter eine Zeit lang womöglich unterschiedliche Karten.

Ein Beispielszenario: Vor einer Kampagne tauschen Sie das Bild aus, scrapen aber nur die Adresse mit Parametern neu. In WhatsApp zeigt der Kampagnenlink die neue Karte, der normale Link die alte. Teilt dann jemand im Team den normalen Link, wirkt der Fehler zufällig.

Setzen Sie deshalb in og:url immer die saubere kanonische Adresse und scrapen Sie vor dem Start beide Versionen. Unser UTM Generator hält Kampagnenlinks einheitlich, somit passen Messung und Linkvorschau zusammen.

Wie gestalten Sie das Vorschaubild?

Selbst mit perfekten Tags fällt ein schwaches Bild nicht auf. Im Chat ist die Karte klein, deshalb gehen Details und kleine Schrift verloren. Ein ruhiger Hintergrund, ein klarer Blickfang und wenige Wörter wirken besser.

• Platzieren Sie die Kernaussage mittig, denn Ränder werden in manchen Ansichten abgeschnitten.
• Halten Sie das Logo klein und in einer Ecke.
• Wählen Sie bei Text eine kräftige, große Schrift.
• Achten Sie auf genug Kontrast zwischen Schrift und Hintergrund.
• Erstellen Sie für jede wichtige Seite ein eigenes Bild.

Den Kontrast prüfen Sie mit unserem Kontrastrechner. Halten Sie außerdem die Dateigröße im Rahmen, denn schwere Dateien erschweren dem Bot den rechtzeitigen Abruf.

Wie formulieren Sie Titel und Beschreibung der Karte?

Der Text entscheidet ebenso über den Klick wie das Bild. Sie müssen den SEO Titel nicht in og:title kopieren. Ein kurzer, klarer Titel für das Teilen wirkt meist besser, zum Beispiel Produktname plus ein Nutzen.

Für og:description reichen ein bis zwei Sätze. Plattformen kürzen lange Texte, also gehört das Wichtigste in den ersten Satz. Zudem schafft ein korrekter Websitename auf der Karte Vertrauen. Zur Google Seite dieses Themas lesen Sie unseren Beitrag zum falschen Websitenamen in Google.

Gibt es auf dem Smartphone weitere Probleme?

Die meisten WhatsApp Links teilen Menschen vom Smartphone, und der Link öffnet sich im mobilen Browser. Selbst bei perfekter Linkvorschau springen Besucher ab, wenn die Seite auf dem iPhone kaputt aussieht. Das ist ein eigenes Problem, das wir im Beitrag zur fehlerhaften Website auf iPhone Safari behandeln.

Ebenso schränken Baukastensysteme die Kontrolle über Open Graph oft ein. Ob solche Lösungen für ein Unternehmen reichen, besprechen wir im Beitrag zu Google Sites für Unternehmen.

Beachten Sie außerdem: Das kleine Bild in den Google Ergebnissen und das Favicon stammen aus anderen Signalen als Open Graph. Ein neues og:image ändert Ihr Google Bild also nicht. Zum Favicon lesen Sie unseren Beitrag Favicon wird in Google nicht angezeigt.

Wie sieht die vollständige Checkliste für die Linkvorschau aus?

Gehen Sie diese Liste vor jeder Veröffentlichung einmal durch. So finden Sie Fehler vor dem Start und nicht erst beim Teilen.

1. og:title, og:description, og:image und og:url stehen im Kopfbereich.
2. og:image nutzt eine vollständige Adresse mit https.
3. Die Bildadresse öffnet sich ohne Anmeldung im Browser.
4. Das Bild ist ein Querformat nahe 1,91:1 und über dem offiziellen Minimum.
5. og:image:width, og:image:height und og:image:alt sind gesetzt.
6. Nur eine Quelle schreibt og:image.
7. Firewall und CDN lassen soziale Crawler durch.
8. Die robots.txt sperrt den Bildordner nicht.
9. Das Zertifikat ist gültig, die Weiterleitungskette kurz.
10. Sharing Debugger und Post Inspector zeigen keine Fehler.

Legen Sie die Liste in einem gemeinsamen Dokument ab. Dann hakt die Person, die veröffentlicht, jeden Punkt ab, und die technische Verantwortung prüft nur, was offen bleibt. Somit wissen Sie beim nächsten Mal sofort, wo Sie ansetzen.

Wie lange sollten Sie nach einem Bildwechsel warten?

Eine genaue Zeit können wir nicht nennen, denn sie hängt vom Cache der Plattform und Ihren Schritten ab. Meta nennt ohne manuelles Scrapen einen üblichen Zyklus von 24 Stunden. Bleibt die Bildadresse gleich, reicht allerdings selbst das womöglich nicht.

Warten Sie daher nicht passiv. Nutzen Sie stattdessen einen neuen Dateinamen, ändern Sie das Tag, leeren Sie den Cache und scrapen Sie neu. Mit diesen vier Schritten sehen Sie die Änderung meist noch am selben Tag.

Andererseits bleiben Karten in bereits verschickten Nachrichten oft unverändert. Neue Nachrichten zeigen dann die aktuelle Linkvorschau.

In welcher Reihenfolge gehen Sie am Ende vor?

Zusammengefasst prüfen Sie Tags, Bildadresse, Zugriff, Größe und Cache, in genau dieser Reihenfolge. So lösen sich die meisten Fälle, die wir sehen, in der ersten halben Stunde. Jede Website ist allerdings anders, eine Garantie gibt es nicht.

Liegt die Ursache im Theme oder im Server, hilft nur eine Korrektur auf Vorlagenebene. Wenn Sie Ihre Firmenwebsite erstellen lassen möchten und dabei Linkvorschau, Ladezeit und mobile Darstellung gemeinsam geplant haben wollen, finden Sie alles Weitere unter Firmenwebsite erstellen lassen.