Linkvorschau testen
Fügen Sie einen Link in einen Chat ein, und er wird zu einer Karte mit Bild, Überschrift und einer Textzeile. Oder zu einem traurigen grauen Kasten. Dieser Check liest die Tags, aus denen die Karte entsteht, misst das Bild und zeichnet das Ergebnis für sechs Orte.
Was passiert, wenn Sie einen Link einfügen
Sobald Sie eine Adresse in einen Beitrag oder einen Chat einfügen, ruft ein Server dieses Dienstes die Seite ab. Er zeigt sie nicht an. Er liest den ersten Teil des HTML, sucht eine Handvoll <meta>-Tags, lädt das Bild herunter, auf das einer davon verweist, und baut aus diesen Teilen eine Karte. Dann speichert er die Karte, und alle, die den Link sehen, bekommen die gespeicherte Version.
Die Tags folgen einer Konvention namens Open Graph, die Facebook 2010 eingeführt hat und die heute fast jedes Netzwerk und jeder Messenger liest. Jeder beginnt mit og:. X liest dieselben Tags und fügt ein eigenes hinzu, twitter:card, um das Layout zu wählen.
Die Tags, nach Wirkung geordnet
og:image- Das Bild. Mehr als alles andere entscheidet es, ob der Link bemerkt wird. Die Adresse muss absolut sein und mit
https://beginnen. og:title- Die Überschrift der Karte. Ohne sie greifen Dienste auf das
<title>-Tag zurück, das oft mit einem Website-Namen endet, den Sie nicht wiederholt haben wollten. og:description- Ein oder zwei Sätze unter der Überschrift. Ersatzweise wird die Meta-Description genommen, danach eine Passage, die der Dienst für Sie auswählt.
twitter:card- Setzen Sie es auf
summary_large_image, und X zeigt das Bild in voller Breite. Ohne bekommen Sie ein kleines Quadrat neben dem Text. og:url- Die Adresse, unter der Likes und Shares gezählt werden. Sie sollte mit der kanonischen URL der Seite übereinstimmen.
og:site_name,og:type,og:locale,og:image:alt- Ergänzende Angaben: die Beschriftung über der Überschrift in Slack und Discord, die Art des Inhalts, die Sprache und eine Beschreibung des Bildes für Nutzer von Screenreadern.
Wie das Bild bewertet wird
Unser Server lädt die in og:image genannte Datei herunter (oder twitter:image, wenn nur diese vorhanden ist) und misst sie an diesen Schwellen.
| Gemessen | Ergebnis |
|---|---|
Überhaupt kein og:image | Problem. Gibt es nur twitter:image, wird daraus eine Warnung, denn X hat dann ein Bild und die anderen nicht. |
| Datei nicht abrufbar, kein Bild oder größer als 5 MB | Problem |
| Kleiner als 600 × 315 px | Problem. Facebook und LinkedIn verkleinern es zum Vorschaubild oder lassen es weg |
| Kleiner als 1200 × 630 px | Warnung. Wird gezeigt, ist aber auf Bildschirmen mit hoher Pixeldichte unscharf |
| Breite geteilt durch Höhe unter 1,6 oder über 2,2 | Warnung. Karten haben etwa 1,91 zu 1, die Ränder werden also abgeschnitten |
| Schwerer als 1 MB | Warnung. Manche Abrufdienste warten nicht so lange |
Relative Adresse wie /img/share.jpg | Warnung. Mehrere Dienste brauchen die vollständige URL |
Wenn Sie ein Rezept wollen, das überall funktioniert: ein JPEG oder WebP mit 1200 × 630 Pixeln, unter 300 KB, und Schrift nicht zu nah an den Rändern. Der Check meldet außerdem einen fehlenden Titel oder eine fehlende Beschreibung, ein <title> mit mehr als 60 Zeichen, eine Beschreibung mit mehr als 200 und eine og:url, die nicht zum Canonical-Link passt.
Die sechs Karten in den Ergebnissen sind Nachbauten aus Ihren Tags. Ihr Browser lädt das Bild als verkleinerte Kopie von unserem Server, die getestete Website sieht Ihren Besuch also nie.
Tags hinzufügen und alte Karten auffrischen
Die Ergebnisse enden mit einem Block, der mit dem Gefundenen ausgefüllt ist. Er gehört in den <head>:
<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">Achten Sie auf das Attribut. Open-Graph-Tags verwenden property=, das X-Tag verwendet name=. In einem CMS tippen Sie davon selten etwas von Hand. SEO-Plugins für WordPress, Shopify-Themes, Squarespace und Webflow haben alle ein Feld „Social-Media-Bild“ pro Seite und einen Standardwert für die ganze Website.
Korrigierte Tags ändern bestehende Karten nicht. Jeder Dienst behält seine gespeicherte Kopie für Tage oder Wochen. Einen neuen Abruf können Sie mit dem Sharing Debugger von Facebook oder dem Post Inspector von LinkedIn anfordern. In Chat-Apps reicht ein zusätzlicher Parameter wie ?v=2 am Link, damit er als neue Adresse zählt.
Zwei Grenzen sollten Sie kennen. Layouts ändern sich, die Zeichnungen zeigen also, welche Teile erscheinen, nicht die exakten Pixel. Und der Check liest das HTML, ohne Skripte auszuführen, genau wie die Vorschau-Abrufdienste. Tags, die per JavaScript eingefügt werden, fehlen hier, und sie fehlen auch in den Netzwerken.
Häufige Fragen
Wie groß sollte ein og:image sein?
1200 × 630 Pixel, ein Verhältnis von 1,91 zu 1, als JPEG, PNG oder WebP. Wenn möglich unter 300 KB, auf jeden Fall unter 1 MB. Unter 600 × 315 zeigen Facebook und LinkedIn es nicht mehr als große Karte.
Warum zeigt mein Link nach der Änderung noch das alte Bild?
Der Dienst hat die Karte beim ersten Teilen des Links zwischengespeichert. Geben Sie die Adresse in den Sharing Debugger von Facebook ein und klicken Sie auf „Scrape Again“, oder in den Post Inspector von LinkedIn. WhatsApp, iMessage und Slack haben kein solches Tool, ändern Sie dort die URL leicht, um eine neue Karte zu erzwingen.
Braucht X noch twitter:-Tags?
Nur eines. X liest og:title, og:description und og:image, wenn die twitter:-Versionen fehlen. Fügen Sie twitter:card mit dem Wert summary_large_image hinzu, um das breite Bild zu bekommen.
Warum gibt es gar keine Vorschau, wenn ich meinen Link einfüge?
Meist ist es eine Seite, die JavaScript braucht, um ihre Tags zu erzeugen, ein Server oder eine Firewall, die die Vorschau-Bots abweist, eine Login-Sperre oder eine og:image-Adresse, die einen Fehler liefert. Dieser Check meldet den Bildfehler, wenn es einen gibt.
Helfen Open-Graph-Tags beim Ranking in Suchmaschinen?
Nein. Suchmaschinen bauen ihre Snippets aus dem Title-Tag und der Meta-Description. Open-Graph-Tags bestimmen nur, wie der Link dort aussieht, wo Leute ihn teilen, und das beeinflusst, wie viele von ihnen klicken.