Link-Vorschau wird nicht angezeigt? Ursachen und Lösungen

Eine Link-Vorschau wird aus Open Graph-Tags im HTML der Zielseite aufgebaut - og:title, og:description, og:image und og:url. Wenn Sie einen Link in WhatsApp, Facebook, Slack oder X einfügen, ruft der Crawler dieser Plattform die Seite ab, liest diese Tags und rendert die Card. Wenn die Vorschau nicht angezeigt wird, liegt es fast immer an einer von zwei Ursachen: Die Tags fehlen oder sind fehlerhaft, oder die Plattform hat ein leeres Ergebnis gecacht und zeigt es weiterhin an.

Diese eine Tatsache - die Vorschau stammt von der Zielseite, nicht vom Link - macht das Problem lösbar. Sie debuggen nicht die Plattform; Sie debuggen die Tags der Seite und löschen dann den Plattform-Cache. Diese Anleitung erklärt, warum Vorschauen brechen, welche Tags wichtig sind, ob Kurzlinks die Ursache sind (meistens nicht) und welches Tool Sie bei jeder Plattform verwenden.

Wenn Sie den Link auch kürzen möchten, behandelt So kürzen Sie eine URL diese Seite, und die Frage zu Kurzlinks bekommt unten einen eigenen Abschnitt, weil es der häufigste Irrtum ist.

Warum Link-Vorschauen brechen#

Vorschauen scheitern aus einer kleinen, vorhersehbaren Anzahl von Gründen - diese zu benennen ist bereits die halbe Lösung.

• Fehlende oder fehlerhafte Open Graph-Tags. Kein og:title oder og:image bedeutet, dass der Crawler nichts hat, woraus er eine Card aufbauen kann - Sie erhalten einen kahlen Link. Das ist die bei weitem häufigste Ursache.
• Ein nicht erreichbares oder zu großes Bild. Die og:image-URL gibt einen 404-Fehler zurück, liegt hinter einem Login oder ist zu groß, als dass die Plattform sie rechtzeitig abrufen könnte. Die Card wird ohne Bild gerendert oder gar nicht.
• Gecachte Leere. Die Plattform hat die URL einmal gecrawlt, bevor die Tags existierten, hat "keine Vorschau" gespeichert und zeigt das weiterhin an, bis sie gezwungen wird, erneut nachzuschauen.
• Nur-JavaScript-Rendering. Die meisten Social-Crawler führen kein JavaScript aus; sie lesen das rohe HTML. Wenn Ihre Tags clientseitig eingefügt werden, sieht der Crawler sie nie.

Der letzte Punkt trifft moderne Single-Page-Apps ständig. Der Crawler fragt nach dem HTML, erhält eine leere Hülle und verlässt die Seite. Die Open Graph-Protokollspezifikation definiert, wie die Tags im bereitgestellten HTML aussehen sollen - die Lösung besteht immer darin, sicherzustellen, dass sie im HTML stehen, das der Crawler empfängt, und nicht später durch ein Skript hinzugefügt werden.

Die Open Graph-Tags, die eine Vorschau antreiben#

Vier Tags erledigen fast die gesamte Arbeit. Machen Sie diese richtig, und die meisten Plattformen rendern eine saubere Card.

og:title ist die Überschrift der Card. og:description ist die Textzeile darunter. og:image ist das Bild - und hier machen die meisten Menschen Fehler: Verweisen Sie auf eine absolute URL eines Bildes mit etwa 1200x630 Pixeln, öffentlich erreichbar, nicht hinter einer Authentifizierung. og:url ist die kanonische Adresse der Seite, die die Vorschau stabil hält, auch wenn der Link Tracking-Parameter trägt.

X liest seine eigene twitter:card-Tag-Familie und greift auf Open Graph zurück, wenn diese fehlen - deshalb kann eine Seite auf Facebook perfekt vorgeschaut werden und auf X kahl aussehen. Der sichere Weg besteht darin, beides einzuschließen: die vier Open Graph-Tags plus twitter:card, twitter:title, twitter:description und twitter:image. Das sind ein paar Zeilen HTML im Seiten-head, und es ist der Unterschied zwischen einer Card, die überall funktioniert, und einer, die nur an einem Ort funktioniert. Google dokumentiert das verwandte Crawler- und Sondertag-Verhalten, wenn Sie auch die Suchperspektive wünschen.

Beschädigen Kurzlinks Link-Vorschauen?#

Das ist die Frage, die Menschen auf den Blog eines URL-Kürzers bringt - und die Antwort ist beruhigend: Ein sauberer Kurzlink beschädigt keine Vorschauen. Wenn Sie einen Kurzlink teilen, folgt der Crawler der Plattform der Weiterleitung zur Zielseite und liest dort die Open Graph-Tags, sodass die Card die Vorschau der Zielseite genau so zeigt, wie es die lange URL täte.

Vorschauen brechen bei Kurzlinks nur in bestimmten Fällen. Eine Kette von Weiterleitungen - ein Kurzlink, der auf einen anderen Kurzlink zeigt, der auf die Seite zeigt - kann einen Crawler verwirren oder zum Timeout führen. Halten Sie es bei einem Hop, was dieselbe Disziplin ist, die Weiterleitungen schnell und SEO-sauber hält. Ein URL-Kürzer, der iframe-Maskierung statt einer echten Weiterleitung verwendet, wird die Vorschau beschädigen, weil der Crawler die Hülle sieht, nicht die Zielseite - einer von mehreren Gründen, warum diese Technik keine gute Idee ist, behandelt in Link-Cloaking und URL-Maskierung. Und wenn die Zielseite selbst keine Open Graph-Tags hat, kann kein Kurzlink diese erfinden. Verwenden Sie eine Ein-Hop-Weiterleitung auf einer eigenen Domain, die auf eine Seite mit guten Tags zeigt, und die Vorschau ist identisch mit dem ungekürzten Link.

Wenn Sie Kurzlinks möchten, die sauber in einem Hop weiterleiten und nie zwischen Ihrem Publikum und einer guten Vorschau stehen, starten Sie einen kostenlosen Elido-Workspace und verweisen Sie Ihren ersten Link auf eine Seite mit ordentlichen Tags.

So beheben Sie es - Plattform für Plattform#

Sobald die Tags stimmen, besteht die verbleibende Aufgabe darin, den Cache jeder Plattform zu leeren - und jede wichtige Plattform stellt dafür ein Tool bereit.

1. Facebook und Instagram. Führen Sie die URL durch den Facebook Sharing Debugger. Er zeigt die gefundenen Tags und eine Schaltfläche "Erneut crawlen", die die Seite neu abruft und die gecachte Card löscht. Das gilt auch für Instagram, das denselben Crawler verwendet.
2. LinkedIn. Verwenden Sie den LinkedIn Post Inspector. LinkedIn cacht Vorschauen etwa eine Woche lang, und der Inspector ist die einzige Möglichkeit, eine vorzeitige Aktualisierung zu erzwingen.
3. X (Twitter). Der Card-Validator ruft die Seite neu ab und zeigt, wie die Card gerendert wird; bestätigen Sie, dass die twitter:card-Tags vorhanden sind, und testen Sie erneut.
4. WhatsApp, iMessage, Slack, Discord. Diese haben keinen öffentlichen Debugger. Sie folgen Open Graph, cachen aber stark. Der Workaround besteht darin, eine leicht veränderte URL zu teilen - fügen Sie einen harmlosen Query-Parameter hinzu oder ändern Sie ihn -, die die App als neu behandelt und frisch crawlt.

Das Muster ist überall gleich: Tags auf der Seite korrigieren, dann die Plattform zwingen, erneut nachzuschauen. Eine Vorschau, die nur gecacht ist, wird innerhalb von Minuten nach dem erneuten Crawlen korrigiert; eine Vorschau mit fehlenden Tags erscheint, sobald der Crawler die Seite das nächste Mal sieht.

Die Checkliste vor dem Teilen#

Bevor ein Link an ein Publikum geht, verhindert eine dreißig Sekunden lange Prüfung die peinliche Situation mit einem kahlen Link.

• Bestätigen Sie, dass die Zielseite og:title, og:description, og:image und og:url sowie die Twitter Card-Tags hat.
• Öffnen Sie die og:image-URL direkt im Browser - sie muss öffentlich laden, bei etwa 1200x630 Pixeln.
• Führen Sie die endgültige URL, einschließlich des Kurzlinks, durch den Facebook-Debugger, um die echte Card zu sehen.
• Wenn Sie einen Kurzlink teilen, überprüfen Sie, dass es ein Ein-Hop-Link zur Zielseite ist und keine Kette.

Tun Sie diese vier Dinge, und die Vorschau erscheint beim ersten Mal auf jeder Plattform, die zählt. Die Card ist keine Magie und es liegt nicht an der Plattform - es sind vier Tags auf Ihrer Seite und ein Cache, den es zu leeren gilt.

Weitere Beiträge im Blog#

• So kürzen Sie eine URL: kostenlose, gebrandete und Massenlinks
• Eigene Domains für Kurzlinks: die DNS- und TLS-Anleitung
• Link-Cloaking und URL-Maskierung: was für SEO sicher ist
• Schaden URL-Kürzer der SEO? Die ehrliche Antwort
• Smart Links erklärt: Edge-Routing ohne zusätzlichen Service