Website teilen: Vorschaubild und Favicon richtig setzen

Das Vorschaubild ist der Baustein mit der größten Wirkung und der höchsten Fehlerquote. Als robustes Format hat sich eine Größe von 1200 mal 630 Pixeln etabliert, was einem Seitenverhältnis von etwa 1,91:1 entspricht – dem Zuschnitt, den die große Kachel erwartet. Kleinere Bilder werden von vielen Plattformen zur kleinen Vorschau degradiert oder gar nicht angezeigt; als Untergrenze für die große Darstellung gelten rund 600 mal 315 Pixel. Die Bildadresse in og:image muss absolut sein, also mit vollständiger Domain und über https, sonst finden die abrufenden Dienste das Bild nicht. Als Dateiformat eignen sich JPG oder PNG; die Datei sollte nicht unnötig schwer sein, damit die Vorschau schnell erscheint. Steht Text im Bild, gehört er in die Mitte, weil Ränder je nach Plattform beschnitten werden. Und schließlich: Ein einziges Bild für die ganze Website ist besser als keines, aber ein eigenes Motiv je wichtiger Seite wirkt deutlich stärker. Wie Bildformate, Kompression und Alternativtexte grundsätzlich zusammenspielen, vertieft der Beitrag zu Bildern auf der Website.

Titel und Beschreibung der Kachel dürfen von den Angaben für die Suche abweichen. Der og:title ist der fette Text unter dem Bild; er sollte kurz und konkret sein, damit er nicht mitten im Satz abgeschnitten wird – als Faustregel bleiben etwa 40 bis 65 Zeichen sicher sichtbar. Während ein Seitentitel für die Suche oft den Ortsnamen und eine Leistung bündelt, darf der Teilen-Titel stärker auf Neugier und Nutzen setzen, weil er in einem persönlichen Kontext erscheint. Die og:description ergänzt ein bis zwei Sätze, die den Mehrwert des Links auf den Punkt bringen. Nicht jede Plattform zeigt die Beschreibung an, deshalb muss die Kachel auch ohne sie funktionieren – Bild und Titel tragen die Hauptlast. Wer mehrere Sprachen anbietet, sollte die Angaben je Sprachversion pflegen, damit die geteilte Kachel zur Zielseite passt. Wie ein Titel für die Suchergebnisliste dagegen aufgebaut ist, zeigt der Beitrag zu Titel und Description für mehr Klicks.

Ein häufiges Ärgernis: Das Vorschaubild wurde längst korrigiert, in der Kachel erscheint aber weiter das alte Motiv oder ein grauer Kasten. Der Grund ist ein Zwischenspeicher. Sobald ein Link zum ersten Mal geteilt wird, ruft die Plattform die Seite ab und legt die Vorschau für eine Weile ab, statt sie bei jedem Teilen neu zu erzeugen. Änderungen am Kopfbereich greifen deshalb nicht sofort. Zwei Wege helfen: Viele Plattformen bieten ein Vorschau- oder Debug-Werkzeug, mit dem sich der Abruf erneut anstoßen lässt; und wer das Bild ohnehin austauscht, gibt der neuen Datei einen neuen Namen, damit die Vorschau die Änderung sicher bemerkt. Wichtig ist, die Vorschau vor der ersten großen Verteilung zu prüfen – denn der erste Abruf prägt für viele Nutzer das Bild. Aus demselben Grund gehört der Vorschau-Test in die Startphase einer neuen Seite, wie sie die Checkliste für die ersten Wochen nach dem Livegang beschreibt.

Vorschaubild und Favicon sind genau die Art von Detail, das in der Hektik eines Website-Projekts hinten runterfällt – und beim ersten geteilten Link auffällt. XICflow nimmt diese Bausteine von Beginn an mit: Für jede Seite werden die Open-Graph-Angaben mit absoluter Bildadresse gesetzt, das Vorschaubild im passenden Zuschnitt erzeugt und die komplette Favicon-Staffel samt Apple-Touch-Icon und Manifest aus dem Marken-Symbol abgeleitet. Weil die Seiten als statisches HTML ausgeliefert werden, steht die Vorschau stabil im Kopfbereich, statt von einem Skript nachträglich zusammengesetzt zu werden – beim Teilen bricht damit nichts weg. Welche Bausteine dazugehören, zeigt die Übersicht der Leistungen von XICflow; wie eine Seite Schritt für Schritt entsteht, beschreibt So funktioniert XICflow. Das ersetzt nicht die eigene Auswahl eines guten Motivs – das Bild bleibt eine gestalterische Entscheidung –, nimmt aber die technische Fehlerquelle aus der Hand.