Dein Link zeigt die falsche Vorschau? Fünf Prüfungen für Link-Vorschauen

Für wen diese Anleitung ist

Jemand hat einen Link zu deiner Website, deinem Shop, deiner Buchungsseite oder deiner Statusseite geteilt, und die Vorschaukarte im Chat oder im sozialen Netzwerk zeigt das Logo einer anderen Firma, ein altes Bild, nur eine nackte Adresse oder gar nichts. Im Browser sieht die Seite selbst gut aus. Diese Anleitung erklärt, warum Vorschauen schiefgehen, und gibt dir fünf Prüfungen. Gehört der Link zu einer Seite, die du nicht betreibst, sagt dir der letzte Teil, wie du den Fehler so meldest, dass er schnell behoben wird.

Wie eine Vorschau entsteht

Wenn du einen Link einfügst, zeigt die App nicht deine Seite. Ein kleines Programm holt das HTML der Seite und liest ein paar Zeilen im Kopfbereich, die Open-Graph-Tags. Titel, Beschreibung und Bild der Karte stammen aus diesen Zeilen und von nirgendwo sonst. Fehlen sie, sind sie falsch oder aus einer Vorlage übernommen, zeigt die Karte genau das. Die App speichert eine Kopie des Ergebnisses, darum sieht man eine Korrektur oft nicht sofort.

Die fünf Prüfungen

1. Sieh, was andere sehen. Füge den Link in einen Chat mit dir selbst ein oder nutze ein Vorschau-Tool: den Sharing Debugger für Facebook und Instagram, den Post Inspector für LinkedIn. Sie zeigen Titel, Beschreibung und Bild, die sie gefunden haben, und listen Probleme auf. Schau auf die Karte, nicht auf deinen Browser: Was du auf der Seite siehst, ist nicht das, was das abrufende Programm liest.

2. Gib jeder Seite eigene Tags. Der Grundsatz besteht aus og:title, og:description, og:image und og:url, dazu og:type für die Art der Seite. Sie stehen im <head> der Seite:

   <meta property="og:title" content="Öffnungszeiten und Termin">
   <meta property="og:description" content="Buche ein kostenloses 30-Minuten-Gespräch.">
   <meta property="og:image" content="https://example.com/img/termin.png">
   <meta property="og:url" content="https://example.com/termin/">
   

   Ein Satz für die ganze Website heisst, dass jede Seite dieselbe Karte zeigt. Für eine kleine Seite ist das annehmbar, aber eine Statusseite, eine Buchungsseite und eine Produktseite verdienen eigene Karten.

3. Nimm ein Bild, das das Programm öffnen kann. Verwende eine vollständige Adresse mit https:// am Anfang, keinen Pfad wie /img/karte.png. Das Bild muss ohne Login, Cookie-Banner oder Weiterleitung aufgehen und darf nicht für Roboter gesperrt sein. Eine Grösse von 1200 mal 630 Pixeln, ein Verhältnis von etwa 1,91 zu 1, funktioniert bei den grossen Netzwerken gut; das Minimum von Meta liegt bei 200 mal 200 Pixeln. Halte die Datei klein, ein paar hundert Kilobyte genügen. Setze nur wenig Text ins Bild, denn es wird klein angezeigt.

4. Finde heraus, woher die Tags kommen. Zeigt die Karte ein Bild, das nicht deins ist, stammen die Tags von einer Stelle, die du nicht eingestellt hast. Die üblichen Ursachen:

   • ein Theme, eine Vorlage oder ein Website-Baukasten setzt ein Standardbild ein, oft sein eigenes
   • der Anbieter oder Dienst zeigt Programmen eine Platzhalterseite, zum Beispiel wenn die Adresse auf die falsche Seite oder ein unfertiges Projekt zeigt
   • die Tags werden per JavaScript erst nach dem Laden der Seite hinzugefügt. Viele Vorschau-Programme führen keine Skripte aus und sehen sie nie. Die Tags müssen im HTML stehen, das der Server sendet. Zum Prüfen öffnest du den Seitenquelltext (nicht den Inspektor) und suchst nach og:image.

5. Aktualisiere die gespeicherte Kopie. Facebook und LinkedIn behalten, was sie geholt haben. Lass den Link nach der Korrektur erneut durch den Debugger oder Inspector laufen und nutze die Schaltfläche, die ihn neu abruft. Manche Chat-Apps führen eine eigene Kopie, ohne dass es ein Werkzeug zum Leeren gibt. Ein harmloser Zusatz im Link, etwa ?v=2, lässt die App ihn als neuen Link behandeln. Nachrichten, die schon gesendet wurden, behalten ihre alte Karte.

Ein Selbsttest in zwei Minuten

• Füge deinen wichtigsten Link in ein Vorschau-Tool ein: Stimmen Titel, Beschreibung und Bild?
• Öffne den Seitenquelltext und suche nach og:image: Ist es da, mit vollständiger https://-Adresse?
• Öffne die Bildadresse in einem privaten Fenster: Lädt sie ohne Login?
• Ist das Bild auch klein scharf und lesbar, und gehört es dir?
• Hast du den Link nach der letzten Änderung neu abrufen lassen?

Wenn der Link auf der Seite von jemand anderem liegt

Liegt die falsche Vorschau auf der Seite eines Lieferanten oder Partners, kannst du sie nicht selbst beheben, aber du kannst die Meldung leicht umsetzbar machen. Schicke den Link, einen Screenshot der falschen Karte und das Ergebnis des Debuggers oder Inspectors. Nenne, welche der fünf Prüfungen fehlschlägt, zum Beispiel «die Seite hat kein og:image, darum zeigt die Karte ein fremdes Bild». Mit diesen drei Dingen kann das Team den Fehler in Minuten nachstellen. Es hilft auch, die App zu nennen, in der du ihn gesehen hast.

Wann du Hilfe holen solltest

Frag jemanden mit Erfahrung, wenn:

• du die Tags geändert hast und nach dem Aktualisieren noch die alte Karte erscheint
• du viele Seiten oder einen Shop betreibst und für jedes Produkt eine Karte brauchst
• die Tags im Quelltext stimmen, der Debugger aber Fehler meldet, die du nicht lesen kannst
• du Vorschau, Titel und Bilder zusammen mit dem Rest der Website prüfen lassen willst

Das gehört auch zur Checkliste vor dem Livegang. Wir gehen sie mit dir in einem kostenlosen 30-Minuten-Videogespräch durch: Gespräch buchen.