BrowserTools
Startseite / Validatoren / Link-Vorschau

Link-Vorschau

Sehen Sie, wie ein Link zu Ihrer Seite in sozialen Netzwerken und in der Suche aussieht, und ergänzen Sie fehlende Tags.

Betreut von BrowserTools · Zuletzt aktualisiert 2026-09-29

Link-Vorschau wird geladen… Wenn nichts passiert, aktiviere JavaScript.

Wenn jemand einen Link in WhatsApp, Slack oder einen LinkedIn-Beitrag einfügt, lädt die App die Seite im Hintergrund und baut aus einer Handvoll Tags im Head eine kleine Karte: og:title, og:description, og:image und og:url aus dem Open-Graph-Protokoll sowie twitter:card für X. Fehlen diese Tags, sind sie zu lang oder verweisen auf einen relativen Pfad, erscheint die Karte als nackte URL, als Überschrift mit dem Anhängsel "| Firmenname" oder mit einem Bild, das an der falschen Stelle beschnitten ist. Dieses Tool zeigt Ihnen das Ergebnis vor der Veröffentlichung. Fügen Sie den Quelltext Ihrer Seite (oder nur den Head-Bereich) ein: Es liest jedes Meta-Tag mit dem HTML-Parser des Browsers, ermittelt, welchen Wert jede Plattform verwendet, und zeichnet nebeneinander eine Vorschaukarte für die Google-Suche, Facebook, X, LinkedIn, WhatsApp, Slack und Discord.

Häufig gestellte Fragen

Warum kann ich nicht einfach meine URL eingeben?
Eine Webseite darf eine andere Website nicht abrufen, weil die Same-Origin-Regeln des Browsers das blockieren, es sei denn, die Website erlaubt es ausdrücklich, und das tun nur wenige. Um das zu umgehen, bräuchte es einen Server, der die Seite für Sie herunterlädt, und diese Website erledigt bewusst alles auf Ihrem Gerät. Öffnen Sie Ihre Seite, wählen Sie Seitenquelltext anzeigen (Strg+U oder Cmd+Option+U), kopieren Sie ihn und fügen Sie ihn hier ein. Nur der Head-Bereich zählt, Sie können also auch nur diesen Teil einfügen.
Welche Größe ist für og:image am besten?
1200 × 630 Pixel, also ein Seitenverhältnis von 1,91:1, empfiehlt Facebook, und diese Größe funktioniert auch bei LinkedIn, WhatsApp, Slack und Discord gut. X beschneidet große Karten auf 2:1, halten Sie wichtigen Text und Gesichter also vom oberen und unteren Rand fern. Bilder unter 600 Pixel Breite erscheinen auf mehreren Plattformen als kleines quadratisches Vorschaubild, und Facebook ignoriert Bilder unter 200 × 200. Verwenden Sie JPG oder PNG unter etwa 300 KB, wenn Ihnen WhatsApp wichtig ist, und niemals SVG.
Welche Tags brauche ich wirklich?
Für eine zuverlässige Karte überall: og:title, og:description, og:image (absolute URL), og:url (die kanonische Adresse) und twitter:card mit dem Wert summary_large_image. og:type, og:site_name, og:image:width, og:image:height und og:image:alt sind empfohlene Ergänzungen. X greift ersatzweise auf die Open-Graph-Tags zurück, twitter:title, twitter:description und twitter:image brauchen Sie also nur, wenn Sie auf X einen anderen Text oder ein anderes Bild wünschen.
Warum zeigt Google einen anderen Titel als Facebook?
Die Google-Suche verwendet kein Open Graph. Sie baut das Ergebnis aus dem title-Element des HTML und der Meta-Description und kann beide umschreiben, wenn sie meint, dass ein anderer Teil der Seite sie besser beschreibt. Soziale Apps bevorzugen og:title und og:description. Deshalb liest die Google-Vorschau hier das title-Element, während die anderen Karten die Open-Graph-Werte lesen.
Ich habe meine Tags korrigiert, aber Facebook oder LinkedIn zeigen noch die alte Vorschau. Warum?
Plattformen speichern Link-Vorschauen zwischen, oft tage- oder wochenlang. Mit dem Sharing Debugger von Facebook und dem Post Inspector von LinkedIn können Sie die URL eingeben und einen neuen Abruf auslösen. X aktualisiert seinen Cache selbst, meist innerhalb einer Woche. WhatsApp und Slack speichern pro Unterhaltung, daher ist das Teilen des Links mit einem Parameter wie ?v=2 ein schneller Weg, die neue Version zu sehen.
Warum müssen og:image und og:url absolute URLs sein?
Die Crawler der Plattformen lesen Ihre Tags als reinen Text, und viele lösen Pfade nicht relativ zur Seitenadresse auf. Ein Wert wie /images/card.jpg kann auf einer Plattform funktionieren und auf einer anderen stillschweigend scheitern. Verwenden Sie die vollständige Adresse, beginnend mit https://. Das Tool markiert relative und protokollrelative Werte und schreibt, wenn Sie die Seiten-URL angeben, die aufgelöste absolute Version in den korrigierten Tag-Block.
Sind die Vorschauen pixelgenau?
Es sind enge Annäherungen an das aktuelle Layout jeder Plattform, gezeichnet mit den Stilen dieser Website, damit Sie Textlänge, Bildzuschnitt und sichtbare Elemente beurteilen können. Die echten Apps ändern ihr Design regelmäßig, und wo Text abgeschnitten wird, hängt von Bildschirmbreite, Schrift und Sprache ab. Die verwendeten Schwellen (etwa 60 Zeichen für Google-Titel, 160 für Beschreibungen, 600 Pixel für große Bilder) folgen den veröffentlichten Empfehlungen der Plattformen und dem beobachteten Verhalten.
Wird mein HTML oder mein Bild irgendwohin hochgeladen?
Nein. Das HTML wird mit dem eingebauten DOMParser des Browsers analysiert, der nie Skripte ausführt und nie Bilder oder Stylesheets aus dem eingefügten Code lädt. Ein hochgeladenes Bild wird über eine lokale Objekt-URL angezeigt und verlässt nie Ihr Gerät. Die Seite stellt keine Anfrage an Ihre Website oder an ein soziales Netzwerk.

Über Link-Vorschau

Die Seite kann Ihre URL nicht selbst abrufen: Browser blockieren solche Anfragen zwischen Websites, und diese Website hält alles auf Ihrem Gerät, sie kontaktiert also auch nie Ihren Server. Deshalb werden entfernte Bilder nicht heruntergeladen. Die Karten zeigen einen Platzhalter mit der Bildadresse, und wenn Sie die Bilddatei hochladen, sehen Sie sie genau so zugeschnitten, wie jede App es tun würde: 1,91:1 bei großen Karten, 2:1 bei X und quadratisch bei kleinen Vorschaubildern, zusammen mit der echten Pixelgröße und der Dateigröße. Wenn Sie die Seite noch entwerfen, wechseln Sie zum Formular, geben Titel, Beschreibung, URL und Bildadresse direkt ein und behalten die Zähler im Blick, wenn Sie sich den Grenzen nähern.

Unter den Vorschauen erklärt eine Liste von Prüfungen, was schiefgehen würde und warum: fehlende Open-Graph-Tags, ein twitter:card-Wert, den X nicht kennt, Titel über den rund 60 Zeichen von Google, Beschreibungen über 160 Zeichen, relative oder protokollrelative URLs, SVG-Bilder, die keine App darstellt, Bilder unter 600 Pixel Breite, die zu einem kleinen Vorschaubild schrumpfen, doppelte Tags, die jede App anders auflöst, und Tags außerhalb des Heads, wo manche Crawler bereits aufgehört haben zu lesen. Zum Schluss erzeugt es einen sauberen, korrigierten Tag-Block mit absoluten URLs, angegebenen Bildmaßen und den richtigen Attributen, bereit zum Kopieren in Ihre Vorlage. Sobald die neuen Tags online sind, denken Sie daran, dass Facebook, LinkedIn und X Vorschauen zwischenspeichern: Erzwingen Sie mit deren Debugging-Tools einen neuen Abruf.

Open Graph entstand für einen Gefällt-mir-Button

Facebook stellte das Open-Graph-Protokoll im April 2010 auf seiner Entwicklerkonferenz f8 vor, zusammen mit dem Gefällt-mir-Button, den jede Website einbinden konnte. Die Idee war, gewöhnliche Webseiten zu Objekten im sozialen Graphen von Facebook zu machen: Eine Seite über einen Film konnte sich als Film ausweisen, mit Titel, Bild und kanonischer URL, und ein Klick auf Gefällt mir verband Sie mit diesem Objekt wie mit einer Fanseite.

Das Protokoll war bewusst einfach gehalten und übernahm das property-Attribut von RDFa, damit Betreiber nur ein paar Meta-Tags ergänzen mussten. Genau diese Einfachheit trug es weit über Facebook hinaus. Twitter führte 2012 eigene Cards ein, entschied sich aber, auf Open-Graph-Werte zurückzugreifen, wenn die twitter:-Tags fehlten, und später begannen LinkedIn, Pinterest, Slack, Discord, WhatsApp, iMessage und Telegram, dieselben og:-Tags zu lesen. Heute bestimmt ein Standard, der für einen einzigen Button erfunden wurde, still das Aussehen fast jedes geteilten Links im Internet.

Verwandte Tools

URL-Parser

Zerlegen Sie eine Webadresse in ihre Teile: Domain, Pfad, Abfrageparameter und mehr.

llms.txt- und KI-robots.txt-Generator

Erstellen Sie eine llms.txt, die KI-Assistenten Ihre Website erklärt, und robots.txt-Regeln, die KI-Crawler zulassen oder sperren.

Favicon-Generator

Machen Sie aus einem Bild die kleinen Website-Icons, die Browser brauchen, in allen Größen.

SQL-Formatierer

Formatieren Sie eine SQL-Abfrage übersichtlich oder komprimieren Sie sie auf eine Zeile.
Unterstützen