Link-Vorschauen: die OG-Bildgröße, die überall funktioniert

Die Tags, die die Arbeit machen

Vier Open-Graph-Tags erledigen fast alles, und X liest dieselben, sofern Sie sie nicht überschreiben. Alles Übrige ist optionale Feinarbeit.

• `og:image` – eine absolute URL, samt Protokoll und Domain. Ein relativer Pfad ist der mit Abstand häufigste Grund dafür, dass eine Vorschau gar kein Bild zeigt.
• `og:title` – die Überschrift auf der Karte. Rund 60 Zeichen bis zur Kürzung, und sie muss nicht identisch mit Ihrem Seitentitel sein.
• `og:description` – ein bis zwei Sätze, etwa 150 bis 160 Zeichen. Plattformen kürzen an unterschiedlichen Stellen: Stellen Sie die Aussage nach vorn.
• `og:url` – die kanonische URL. Sie verhindert, dass dieselbe Seite, mit verschiedenen Tracking-Parametern geteilt, als mehrere getrennte Vorschauen zwischengespeichert wird.
• `twitter:card` mit dem Wert summary_large_image – ohne dieses Tag zeigt X womöglich eine kleine quadratische Miniatur neben dem Text statt der Karte in voller Breite.

Zwei Details erklären viele kaputte Vorschauen. Die Bild-URL muss öffentlich erreichbar sein, ohne Login-Sperre, denn der Crawler der Plattform ruft sie als anonyme Besucherin ab – ein Bild hinter einer Anmeldung oder auf einem geschützten Testserver scheitert schlicht. Und die Seite selbst muss für denselben Crawler erreichbar sein, weshalb Vorschauen häufig im Browser funktionieren und in einer Chat-App scheitern.

Dateigröße und Format

Kartenbilder haben Obergrenzen, und sie zu überschreiten lässt die Vorschau stillschweigend auf „kein Bild“ zurückfallen, statt einen Fehler anzuzeigen. Halten Sie ein OG-Bild als Arbeitsziel unter 1 MB – die harte Obergrenze liegt bei rund 8 MB, und X' eigene Grenze für Kartenbilder beträgt 5 MB bei mindestens 300 × 157 und höchstens 4096 × 4096 Pixeln.

WebP verdient eine Warnung. Die meisten Plattformen kommen inzwischen damit zurecht, einige ältere Vorschaudienste jedoch nicht, und die Folge ist ein fehlendes Bild statt eines Rückfalls. Wenn ein Link geschäftlich zählt, bleiben JPEG oder PNG die sichere Wahl; ein JPEG richtig zu komprimieren bringt Ihnen ohnehin den Großteil der Ersparnis. Transparenz ist die zweite Falle: Ein transparentes PNG wird auf den Hintergrund der Plattform gelegt, was im Dunkelmodus dunklen Text unsichtbar machen kann.

Eine Karte gestalten, die als Miniatur funktioniert

Eine Link-Vorschau wird selten in voller Größe gesehen. In Slack ist sie ein paar hundert Pixel breit; auf einem Telefon konkurriert sie mit allem anderen im Feed. Entwürfe, die auf einem Monitor funktionieren, scheitern in diesem Maßstab regelmäßig, und die Fehler wiederholen sich so verlässlich, dass man sie vermeiden kann.

• Höchstens sechs bis acht Wörter. Eine Karte ist ein Plakat, kein Absatz. Braucht die Überschrift bei 1200 Pixeln Breite drei Zeilen, ist sie bei 400 unlesbar.
• Setzen Sie die Schrift weit größer, als sich richtig anfühlt. 60 bis 90 Pixel für eine Überschrift auf einer 1200 Pixel breiten Fläche. Unter etwa 40 Pixeln verschwindet alles.
• Immer hoher Kontrast. Text über einem Foto braucht einen Schleier oder eine deckende Fläche dahinter; hellgrau auf weiß verschwindet in kleinen Größen vollständig.
• Wiederholen Sie die Überschrift nicht. Auf Facebook, LinkedIn und Slack zeigt die Karte Ihren og:title bereits als Text unter dem Bild (X zeigt höchstens eine kleine Überschrift). Dieselben Worte ins Bild zu setzen verschwendet den Platz – nutzen Sie ihn für ein Logo, eine Rubrik oder eine einzige bildliche Idee.
• Prüfen Sie es klein. Verkleinern Sie den Entwurf auf 400 Pixel Breite und sehen Sie ihn an. Das kommt dem, was die meisten sehen werden, näher als die Fläche, auf der Sie entworfen haben.
• Behalten Sie eine Vorlage. Funktioniert ein Layout, verwenden Sie es mit anderem Text wieder. Wiedererkennbare Karten sind mehr wert als einzeln clevere.

Wenn die Vorschau das Falsche zeigt

Sie korrigieren das Bild, teilen den Link – und trotzdem erscheint das alte Bild. Das ist Zwischenspeicherung, kein Fehler in Ihren Tags. Jede Plattform bewahrt die Vorschau auf, die sie beim ersten Teilen dieser URL gebaut hat, manchmal wochenlang, und ruft die Seite nicht erneut ab, bloß weil sie sich geändert hat.

Eine praktische Anmerkung zum Erstellen der Bilder: Kartengestaltung ist genau die kleine, wiederkehrende Aufgabe, die man ohne viel Nachdenken einem Online-Generator übergibt – und diese Generatoren laden hoch, was Sie ihnen geben, einschließlich Bildschirmfotos unveröffentlichter Produkte und Überschriften vor der Ankündigung. Die Gestaltungs- und Bildwerkzeuge hier – Plakatgestalter, Größenanpassung und Kompressor – laufen vollständig auf Ihrem Gerät, eine Karte für etwas unter Sperrfrist wird also lokal gebaut und exportiert, ohne dass etwas übertragen wird.