# Linkvorschau kaputt? Warum geteilte Links falsch aussehen
[Canonical HTML page](https://gradiently.design/de/guide/link-preview-image)
Du fügst deinen Link in einen Chat ein und bekommst einen grauen Kasten, das falsche Bild oder ein Logo, das in der Mitte abgeschnitten ist. Fast jede kaputte Vorschau hat eine von acht Ursachen, und alle lassen sich in Minuten beheben.
## The short version
- Ein Linkvorschau-Bild ist das Bild, das eine Plattform zeigt, wenn jemand eine URL teilt, und es stammt aus dem og:image-Tag der Seite.
- Die häufigsten Gründe für ein fehlendes Linkvorschau-Bild sind ein fehlendes og:image-Tag, eine relative Bild-URL, ein Bild, das der Crawler nicht erreicht, und Tags, die JavaScript erst nach dem Laden der Seite einfügt.
- Plattformen speichern Vorschauen im Cache, deshalb brauchst du nach der Korrektur einer Seite oft ein Debugging-Tool oder eine geänderte URL, bevor das neue Bild erscheint.
- Ein Bild in 1200×630 mit Text in der Mitte wirkt auf fast jeder Plattform gut.
- Einen Link in einer privaten Nachricht an dich selbst zu testen, ist der schnellste Weg zu sehen, was andere sehen werden.
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.
| Was du siehst | Wahrscheinliche Ursache | Lösung |
| --- | --- | --- |
| Gar kein Bild | Kein `og:image`-Tag auf der Seite | Füge das Tag in den `head` der Seite ein |
| Kein Bild, Tag ist vorhanden | Relative URL wie `/share.png` | Nutze die vollständige Adresse, beginnend mit `https://` |
| Nur in manchen Apps kein Bild | Tags werden per JavaScript eingefügt | Rendere die Tags auf dem Server, schon in der ersten HTML-Antwort |
| Kein Bild, URL ist korrekt | Bild hinter einem Login, einer Firewall oder einer `robots.txt`-Regel | Mach das Bild öffentlich erreichbar |
| Altes Bild nach einer Änderung | Die Plattform hat den ersten Abruf zwischengespeichert | Lass die Seite mit einem Debugger neu einlesen oder ändere die Bild-URL |
| Winziges Quadrat statt großer Karte | Bild zu klein oder kein Tag für die große Karte bei X | Nutze 1200×630 und setze `twitter:card` auf `summary_large_image` |
| Bild an den Seiten abgeschnitten | Text steht nah am Rand | Halte den Text in der Mitte des Bildes |
| Bild lädt langsam oder läuft in ein Timeout | Datei hat mehrere Megabyte | Komprimiere sie; ein paar hundert Kilobyte reichen völlig |
Arbeite die Liste von oben nach unten ab. Ist die Vorschau leer, liegt die Antwort fast immer in den ersten vier Zeilen.
## 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.
```html
Autumn menu | Hearth Bakery
```
Ein vollständiges Set. Achte auf die absolute https-Bild-URL; ein Pfad wie /share/autumn.png ist ein sehr häufiger Fehler.
> **Schau in den Quelltext, nicht auf die Seite** Crawler lesen das rohe HTML, das dein Server sendet, und führen meist kein JavaScript aus. Öffne deine Seite, wähle Seitenquelltext anzeigen und suche nach `og:image`. Steht es nicht in diesem Quelltext, findet es keine Chat-App, so korrekt es im Inspektor deines Browsers auch aussieht.
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](https://gradiently.design/de/guide/dynamic-og-images) 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. **LinkedIn** Füge die URL in den [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) ein. Er ruft die Seite erneut ab und zeigt genau, was LinkedIn sieht.
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. **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. **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](https://gradiently.design/de/guide/open-graph-image-size).
- Open Graph 1200×630: 1200 × 630
- LinkedIn Link 1200×627: 1200 × 627
- Quadratischer Fallback 1200×1200: 1200 × 1200
Die Karte in 1200×630, das fast identische Linkbild von LinkedIn und das Quadrat, auf das manche Apps zuschneiden. Zentrierter Text übersteht alle drei.
Ein Linkvorschau-Bild, bei dem die Überschrift über einem hellen Bereich des Verlaufs liegt und schwer lesbar ist
Der Text läuft quer über den hellsten Teil des Hintergrunds und verschwindet in Thumbnail-Größe.
Dasselbe Linkvorschau-Bild mit einem dunkleren, ruhigeren Bereich des Verlaufs hinter der Überschrift
Dieselbe Karte mit einem ruhigen, kontrastreichen Bereich hinter dem Text. Auch in einem vollen Chat lesbar.
### Besser nicht
- Dein Logo allein auf Weiß
- Ein Screenshot der Seite selbst
- Lange Sätze in kleiner Schrift
- Text, der den Rand berührt
- Dasselbe Bild für jede Seite
### Besser so
- Eine kurze Überschrift, die zur Seite passt
- Ein Hintergrund, den Leute als deinen erkennen
- Schrift, die bei 300 Pixel Breite lesbar ist
- Ein klarer Rand ringsum
- Ein Bild pro wichtiger Seite
Eine Vorschau ist in einem Chatverlauf winzig, also gelten die Regeln aus [Text auf Thumbnails](https://gradiently.design/de/guide/typography-for-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](https://gradiently.design/de/guide/social-media-image-sizes).
## 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](https://gradiently.design/de/guide/website-hero-background) das Hauptbild, das sich diese Vorschauen oft ausleihen.
## FAQ
### Warum wird mein Linkvorschau-Bild nicht angezeigt?
Meist fehlt auf der Seite das og:image-Tag, das Tag nutzt eine relative URL, das Bild ist für Crawler gesperrt, oder die Tags werden per JavaScript eingefügt. Prüfe zuerst den rohen Seitenquelltext.
### Wie aktualisiere ich eine Linkvorschau, die ein altes Bild zeigt?
Plattformen speichern Vorschauen im Cache. Lass die URL mit dem LinkedIn Post Inspector oder dem Sharing Debugger von Meta neu einlesen oder benenne die Bilddatei um, damit sich ihre URL ändert.
### Welche Größe sollte ein Linkvorschau-Bild haben?
1200×630 Pixel. Halte den Text in der Mitte, denn manche Apps beschneiden die Seiten oder zeigen die Karte als Quadrat.
### Warum zeigt X ein kleines Thumbnail statt eines großen Bildes?
Füge ein `twitter:card`-Meta-Tag mit dem Wert `summary_large_image` hinzu und achte darauf, dass das Bild groß genug ist, idealerweise 1200×630.
### Funktionieren Linkvorschauen mit Single-Page-Apps?
Nur wenn die Open-Graph-Tags im HTML stehen, das der Server sendet. Die meisten Crawler führen kein JavaScript aus, deshalb sind im Browser eingefügte Tags für sie unsichtbar.