Linkvorschau kaputt? Warum geteilte Links falsch aussehen

Ein Linkvorschau-Bild stammt aus einer Zeile im HTML deiner Seite: dem og:image-Tag. Wenn eine Plattform wie WhatsApp, Slack, LinkedIn oder iMessage einen Link sieht, ruft ein Crawler die Seite ab, liest dieses Tag und lädt das Bild herunter. Ist die Vorschau leer oder falsch, ist in dieser Kette etwas schiefgegangen: Das Tag fehlt, die Bildadresse ist relativ, der Crawler ist blockiert, oder die Plattform zeigt noch eine alte Kopie aus ihrem Cache.

Warum Linkvorschauen kaputtgehen: eine Diagnosetabelle

Beginne mit dem Symptom, das du siehst. Die Tabelle unten deckt die acht Ursachen für kaputte Vorschauen ab, die üblichen Verdächtigen zuerst.

Die Tags, die eine funktionierende Vorschau braucht

Du brauchst erstaunlich wenig. Einen Titel, eine Beschreibung, eine vollständige Bild-URL, die Bildgröße und eine zusätzliche Zeile, damit X eine große Karte statt eines Thumbnails zeigt. Die kanonische URL der Seite in og:url hilft Plattformen, Shares derselben Seite zu bündeln.

<head>
  <title>Autumn menu | Hearth Bakery</title>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/autumn">
  <meta property="og:title" content="Our autumn menu is here">
  <meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
  <meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
  <meta name="twitter:card" content="summary_large_image">
</head>

Frameworks machen es leicht, das falsch zu machen. Eine Single-Page-App, die Tags erst nach dem Laden setzt, zeigt an ein paar Stellen eine gute Vorschau und scheitert an den meisten. Nutze stattdessen die serverseitige Metadaten-Funktion deines Frameworks oder erzeuge das Bild pro Seite, wie in dynamische OG-Bilder beschrieben.

So aktualisierst du eine zwischengespeicherte Linkvorschau

Plattformen rufen eine Seite einmal ab und behalten das Ergebnis eine Weile, deshalb repariert die Korrektur deiner Tags keine Beiträge, die schon geteilt wurden, und manchmal nicht einmal neue Shares. Nutze die Tools der Plattform, wo es sie gibt, und ändere die URL, wo nicht.

1. 1

   LinkedIn

   Füge die URL in den LinkedIn Post Inspector ein. Er ruft die Seite erneut ab und zeigt genau, was LinkedIn sieht.

2. 2

   Facebook, Instagram und WhatsApp

   Der Sharing Debugger von Meta in den Entwicklertools zeigt die gefundenen Tags und hat einen Button zum erneuten Einlesen. WhatsApp braucht manchmal länger, bis es nachzieht.

3. 3

   Slack, Discord, iMessage und andere

   Die meisten haben kein öffentliches Tool zum Aktualisieren. Benenne die Bilddatei um, zum Beispiel autumn-v2.png, und passe das Tag an, damit der Crawler eine neue Adresse sieht.

4. 4

   Hartnäckige Fälle

   Teile die Seite mit einem harmlosen Query-String wie ?v=2. Plattformen behandeln das als neuen Link und rufen ihn frisch ab.

Ein Bild gestalten, das überall gut aussieht

Funktionieren die Tags, entscheidet das Bild selbst, ob jemand tippt. Mach es 1200×630, ein breites Format von etwa 1,91 zu 1, das jede große Plattform akzeptiert. Manche Apps zeigen es kleiner oder beschneiden die Seiten ein wenig, und ein paar greifen auf ein Quadrat zurück, also halte den Text in der Mitte. Alles zu den Größen steht in OG-Bildgröße.

Eine Vorschau ist in einem Chatverlauf winzig, also gelten die Regeln aus Text auf Thumbnails: ein paar große Worte, starker Kontrast, eine Idee. In Gradiently hält der Mark eines Designs seinen ruhigsten Bereich hinter dem Text und wählt für jede Zeile helle oder dunkle Schrift, damit die Überschrift lesbar bleibt, egal wie die Plattform die Karte skaliert. Starte im Studio mit der Größe Linkvorschau, und dasselbe Design wird zu deinem Blog-Banner in 1200×600 und den übrigen Bildgrößen für Social Media.

Ein Test in zwei Minuten, bevor du teilst

1. Sieh dir den Seitenquelltext an und prüfe, dass og:image mit vollständiger https-URL vorhanden ist.
2. Öffne diese Bild-URL in einem privaten Browserfenster. Lädt sie dort nicht, können Crawler sie auch nicht laden.
3. Lass die URL durch den LinkedIn Post Inspector oder den Debugger von Meta laufen, um die eingelesenen Tags zu sehen.
4. Schick dir den Link in WhatsApp oder Slack selbst und sieh ihn dir auf dem Handy an.
5. Ist etwas veraltet, ändere den Dateinamen des Bildes und teste erneut.

Mach das einmal für jede Vorlage deiner Website, nicht für jede Seite, und kaputte Vorschauen überraschen dich nicht mehr. Baust du eine Website von Grund auf, behandelt die Anleitung Hero-Hintergrund für Websites das Hauptbild, das sich diese Vorschauen oft ausleihen.