Social-Share-Vorschau

So nutzt du es

1. Gib die Adresse einer Seite ein, etwa example.com/blog/launch, und klick auf Prüfen. Keine Seite zur Hand? Probier eines der Beispiele.
2. Sieh dir die Karte an, die jede App dafür baut: X, Facebook, LinkedIn, Slack, Discord, WhatsApp und iMessage. Ein grüner Punkt heißt, die Karte sieht richtig aus; ein gelber oder roter sagt unter der Karte, was nicht stimmt.
3. Öffne Korrekturen und Tags zeigen, um jeden geprüften Tag einzeln zu sehen. Fehlende Tags kommen fertig zum Einfügen in deinen <head>: Kopiere sie, füll die Werte aus, veröffentliche die Änderung und prüfe erneut.

Die Adresse der Prüfung steht in der Adressleiste deines Browsers, du kannst sie also an die Person schicken, die sich um die Seite kümmert.

Wie Linkvorschauen funktionieren

Wenn du einen Link in einen Beitrag oder einen Chat einfügst, ruft der Crawler der App die Seite einmal ab und liest die Tags in ihrem <head>. Er führt kein JavaScript aus, meldet sich nicht an und akzeptiert keine Cookie-Banner, Tags, die ein Skript nach dem Laden der Seite hinzufügt, sieht er also nicht. Der Checker ruft die Seite genauso ab: eine Anfrage, kein JavaScript, und Weiterleitungen werden so verfolgt, wie ein Crawler sie verfolgt.

Jede App liest dieselben wenigen Tags, mit eigenen Ausweichlösungen:

• Open Graph (og:title, og:description, og:image, og:url, og:site_name) lesen Facebook, LinkedIn, Slack, Discord, WhatsApp und iMessage.
• X liest zuerst twitter:card, twitter:title, twitter:description und twitter:image und greift sonst auf die Open-Graph-Tags zurück. Ohne twitter:card zeigt es eine kleine Zusammenfassungskarte, selbst wenn es ein Bild gibt.
• Fehlt og:title, nutzen die meisten Apps den <title>. Fehlt og:description, nutzen manche die Meta-Beschreibung und manche zeigen gar keinen Text.
• Discord färbt den Rand seiner Karte mit theme-color.

Die Vorschauen hier folgen diesen Regeln. Jede App ändert ihr Design außerdem ab und zu, sieh sie also als nah dran, nicht als exakt.

Das Vorschaubild

Ein Bild funktioniert überall: 1200 × 630 Pixel (1,91:1), PNG oder JPEG, unter einer vollständigen https://-Adresse.

• Unter 600 Pixel Breite zeigen Facebook und LinkedIn ein kleines Vorschaubild statt einer großen Karte. Unter 200 × 200 zeigt Facebook gar kein Bild.
• X nimmt Bilder bis 5 MB, Facebook bis 8 MB. WhatsApp lässt Bilder über etwa 600 KB oft weg, ein gut komprimiertes JPEG ist also die sichere Wahl.
• SVG unterstützt keine der großen Apps.
• Eine relative Adresse wie /og.png funktioniert nicht bei jedem Crawler. Schreib die vollständige URL.
• Quadratische Zuschnitte sind häufig (WhatsApp, iMessage bei kleinen Links), halte den wichtigen Teil des Bildes also nahe der Mitte.

Der Checker ruft auch das Bild ab, misst es anhand seines Dateikopfs und zeigt es in den Vorschauen.

Warum eine Vorschau noch alt aussieht

Apps cachen, was sie abgerufen haben, von Minuten bis etwa einer Woche. Nachdem du deine Tags korrigiert hast, zeigt der Checker sofort die neue Version, aber ein bereits geteilter Link behält die alte Vorschau, bis die App ihn erneut abruft. Der Sharing Debugger von Facebook und der Post Inspector von LinkedIn rufen eine Seite auf Anfrage erneut ab. In Slack bekommt ein Link, der nach einer Weile erneut gepostet wird, eine neue Vorschau. Ein angehängter Query-String wie ?v=2 lässt jede App ihn als neuen Link behandeln.

Häufige Fragen

Warum hat meine Vorschau kein Bild?

Die üblichen Ursachen, der Reihe nach: Es gibt keinen og:image-Tag, die Bildadresse ist relativ oder liefert einen Fehler, das Bild ist zu klein oder zu groß, oder der Tag wird nach dem Laden der Seite per JavaScript hinzugefügt. Die Zeile unter jeder Karte nennt die zutreffende Ursache.

Welche Tags brauche ich mindestens?

og:title, og:description, og:image mit einem Bild in 1200 × 630, og:url und twitter:card auf summary_large_image. Der Meta-Tag-Generator schreibt sie für dich.

Kann es Seiten prüfen, die eine Anmeldung brauchen?

Nein. Crawler melden sich nicht an, also hat eine Seite hinter einem Login nirgends eine Vorschau. Der Checker sieht, was sie sehen, und ruft nur öffentliche Adressen ab: Private und interne Netzwerke werden abgelehnt.

Speichert der Checker die Seiten, die er abruft?

Nein. Er ruft die Seite und ihre Bilder ab, wenn du auf Prüfen klickst, und schickt dir, was er gefunden hat. Das Ergebnis wird zwei Minuten aufbewahrt, damit eine zweite Prüfung derselben Adresse sofort da ist, und dann verworfen. Er liest bis zu 2 MB HTML und 8 MB pro Bild und gibt nach 8 Sekunden auf.

Warum sagt er, meine Seite antwortet mit 403, obwohl sie sich in meinem Browser öffnet?

Manche Websites und Firewalls blockieren Anfragen, die nicht von einem Browser kommen, oder von großen Crawlern, die sie kennen. Bekommt der Checker eine 403, bekommen Facebook oder LinkedIn vielleicht auch eine: Prüfe die Bot-Einstellungen deiner Firewall.

Gibt es eine Grenze?

Zwanzig Prüfungen pro Minute von einer Adresse. Jede Website wird außerdem höchstens 60-mal pro Minute abgerufen, über alle Nutzer des Checkers hinweg, damit er nicht zum Überfluten einer Website missbraucht werden kann. Ergebnisse werden zwei Minuten aufbewahrt, eine kurz danach erneut geprüfte Adresse kommt also sofort zurück; ein erneuter Klick auf Prüfen auf der Seite, die du gerade ansiehst, ruft sie immer frisch ab.