Anleitung
- Geben Sie den og:title und die og:description ein, die Sie auf der Seite verwenden oder verwenden möchten.
- Fügen Sie die vollständige URL des og:image ein. Das Tool lädt das Bild und zeigt seine tatsächliche Pixelgröße an.
- Geben Sie die Seiten-URL oder Domain ein. Vergleichen Sie dann die Vorschauen der großen und kleinen Karte und beheben Sie angezeigte Warnungen.
So funktioniert es
Wenn jemand einen Link teilt, rufen die meisten sozialen Netzwerke und Chat-Apps die Seite ab und lesen ihre Open-Graph-Tags: og:title, og:description, og:image und og:url. Daraus erstellen sie eine Vorschaukarte. Ein breites Bild mit einem Seitenverhältnis von etwa 1,91:1 ergibt meist eine große Karte mit dem Bild oben. Bei einem kleinen oder quadratischen Bild wird oft eine kompakte Karte mit einem Vorschaubild neben dem Text angezeigt.
Dieses Tool zeigt zwei allgemeine Kartenstile, damit Sie Textlängen und Bildausschnitt besser einschätzen können. Es prüft die tatsächliche Bildgröße, nachdem der Browser das Bild geladen hat: Bei weniger als 200 × 200 px lassen viele Apps das Bild weg, bei weniger als 600 × 315 px verwenden sie meist das kleine Layout. Weicht das Seitenverhältnis deutlich von 1,91:1 ab, wird das Bild beschnitten. Die weit verbreitete Empfehlung von 1200 × 630 px sorgt dafür, dass das Bild auch auf Bildschirmen mit hoher Pixeldichte scharf bleibt.
Die Vorschau zeigt nicht genau, was eine bestimmte App anzeigen wird. Apps unterscheiden sich darin, wie viele Zeilen des Titels und der Beschreibung sie anzeigen. Manche ignorieren die Beschreibung, und die meisten speichern eine Vorschau nach dem ersten Teilen eine Weile im Cache. Änderungen an Ihren Tags werden daher möglicherweise nicht sofort angezeigt. Viele Plattformen bieten eigene Debugging-Tools, mit denen sich dieser Cache aktualisieren lässt.
Beispiele
Ein Screenshot als og:image
Ein Screenshot mit 1440 × 900 Pixeln hat ein Seitenverhältnis von 1,6:1. Das Tool warnt vor dem Seitenverhältnis: Bei einer großen Karte würden oben und unten Bildteile abgeschnitten. Mit einem Export im Format 1200 × 630 vermeiden Sie Überraschungen.
Ein Logo als einziges Bild
Ein Logo mit 180 × 180 Pixeln ist kleiner als 200 × 200 px. Daher würden viele Apps kein Bild anzeigen. Verwenden Sie stattdessen ein größeres, breites Banner, in das das Logo eingebettet ist.
Titellänge prüfen
Ein og:title mit 90 Zeichen wird in der Vorschau der großen Karte auf drei Zeilen umgebrochen. Mit etwa 60 Zeichen bleibt die Karte in den meisten Apps übersichtlich.
Häufig gestellte Fragen
Warum sieht mein Link auf Facebook, LinkedIn und X unterschiedlich aus?
Jede Plattform stellt Karten mit einem eigenen Layout, Bildausschnitt und Textlimit dar. Manche zeigen die Beschreibung an, andere nicht. Diese Vorschau ist eine allgemeine Annäherung und keine exakte Nachbildung des Designs einer Plattform.
Ich habe og:image geändert, aber das alte Bild wird weiterhin angezeigt. Warum?
Plattformen speichern Linkvorschauen im Cache. Verwenden Sie den Sharing-Debugger der jeweiligen Plattform, um die Seite erneut abzurufen, oder warten Sie, bis der Cache abläuft. Auch ein geänderter Bilddateiname kann helfen.
Kann ich ein SVG- oder WebP-Bild verwenden?
SVG wird von den meisten Plattformen nicht unterstützt. WebP funktioniert in vielen, aber nicht in allen Apps. JPG oder PNG ist die sicherste Wahl.
Warum kann das Tool mein Bild nicht laden?
Für die URL ist möglicherweise eine Anmeldung erforderlich, sie verweist eventuell auf eine HTML-Seite statt auf ein Bild, oder der Server blockiert Anfragen von anderen Websites. Wenn der Browser das Bild hier nicht laden kann, kann es sein, dass auch der Crawler eines sozialen Netzwerks keinen Zugriff darauf hat.
Datenschutz
Ihre Eingaben bleiben in Ihrem Browser. Zum Prüfen des Bildes ruft Ihr Browser es direkt über die eingegebene URL ab (ohne Referrer). Der Server erhält dabei eine normale Bildanfrage. Es werden keine Daten an TIG Tools gesendet.