M&DMICHAEL & DiVIP STUDIO077 206 88 88Geschichte, Erfahrung und Erfolge ↗
← Zum Journal

VIP STUDIO MICHAEL & Di · 23.10.2026

Linkvorschauen: Titel, Beschreibung und Titelbild aufeinander abstimmen

Illustration: Eine Webseite wird zur Linkvorschau auf einem Smartphone
Originale Konzeptillustration, kein Screenshot einer echten Anwendung.

Sie schicken einem Kunden einen hilfreichen Artikel. In der Nachricht erscheinen jedoch ein allgemeines Studiobild und ein unklarer Titel. Noch bevor der Leser die Seite öffnet, muss er erraten, was der Link enthält. Beginnen Sie die Korrektur nicht damit, wahllos alle Felder umzuschreiben, sondern mit einer einfachen redaktionellen Frage: Welche Seite stellen wir vor, und was sollen Leser vor dem Klicken verstehen?

Zuerst drei Kontexte unterscheiden

Das HTML-Element <title> benennt das Dokument im Browser-Tab. MDN-Referenz. Eine Seitenbeschreibung lässt sich mit meta name="description" hinterlegen. MDN zu meta.

Google erzeugt Suchergebnistitel automatisch aus mehreren Quellen. Google-Dokumentation. Suchausschnitte stammen überwiegend aus dem Seiteninhalt, manchmal aus der Metabeschreibung, und hängen von der Suchanfrage ab. Dokumentation zu Snippets.

Open Graph verlangt og:title, og:type, og:image und og:url. Optionale og:image:width und og:image:height bestimmen die Abmessungen; og:image:alt beschreibt das Bild, nicht seine Bildunterschrift. Open-Graph-Spezifikation.

Geben Sie jedem Kontext eine eigene Zeile im Arbeitsdokument: „Tab“, „Suche“ und „Teilen“. Notieren Sie den gewünschten Text neben dem tatsächlich beobachteten Ergebnis. So verwechselt das Team eine redaktionelle Entscheidung nicht mit dem Verhalten einer bestimmten Anwendung.

Ein kleines Briefing für den Link schreiben

Stellen Sie sich einen Artikel über die Vorbereitung von Portfoliofotos vor. Statt „Nützliche Informationen“ könnte der Titel lauten: „So wählen Sie 12 Fotos für Ihr Portfolio aus“. Eine mögliche Beschreibung: „Auswahlkriterien, Bildreihenfolge und Prüfung vor der Veröffentlichung“. Das ist ein erfundenes Formulierungsbeispiel, kein Ergebnisversprechen: Die Zahl 12 passt nur, wenn der Artikel tatsächlich mit einer solchen Auswahl arbeitet.

Prüfen Sie das Briefing ohne Bild. Ist das Thema verständlich? Entfernen Sie anschließend die Beschreibung: Bleibt der Titel konkret? Bitten Sie einen Kollegen, in einem Satz zu sagen, was er nach dem Klicken erwartet. Passt die Antwort nicht zum Artikel, ändern Sie die Formulierung, statt werbliche Adjektive hinzuzufügen.

Startseite und Artikel brauchen unterschiedliche Titelbilder

Für die Startseite eignet sich eine wiedererkennbare Markenkomposition. Ein einzelner Artikel sollte ein Bild erhalten, das sein Thema erklärt: eine Fotoauswahl, einen Ausschnitt aus dem Arbeitsprozess oder eine einfache thematische Illustration. Gemeinsame Farben und ein kleines Markenzeichen können die Serie verbinden, sollten den Inhalt aber nicht ersetzen.

Probieren Sie im Bildeditor einen breiten und einen quadratischen Ausschnitt als Belastungstest aus, nicht als allgemeingültige Plattformvorgabe. Platzieren Sie das wichtige Motiv eher mittig und lassen Sie Platz an den Rändern. Betrachten Sie die verkleinerte Grafik auf dem Smartphone. Ist Text nur vergrößert lesbar, entfernen oder kürzen Sie ihn deutlich.

Checkliste vor dem Teilen

  1. Adresse festhalten. Testen Sie die endgültige öffentliche URL in der gewünschten Sprache, nicht einen Entwurf oder die Startseite.
  2. Inhalte abgleichen. Titel, Beschreibung und Titelbild sollten denselben Artikel darstellen. Entfernen Sie versehentlich von einem anderen Beitrag übernommene Felder.
  3. Bild separat öffnen. Stellen Sie sicher, dass die Adresse ohne Anmeldung zur gewünschten Datei führt.
  4. Seite statt nur Formular prüfen. Ein gespeichertes Redaktionsfeld belegt noch nicht, dass die gewünschten Daten im veröffentlichten HTML stehen.
  5. Tatsächliche Vorschau ansehen. Prüfen Sie in der Zielanwendung Bild, Zuschnitt, Text und Zieladresse. Wenn kein Test stattgefunden hat, kennzeichnen Sie das entsprechend.
  6. Sprachversionen wiederholen. Übersetzen Sie nicht nur den Titel: Prüfen Sie auch Beschreibung, Bilder mit Text und Zielseite.

Was „fertig“ bedeutet

Führen Sie ein kurzes Protokoll: Adresse, Sprache, Uhrzeit, Anwendung, Ergebnis und nächster Schritt. Unterscheiden Sie „Felder gespeichert“, „HTML geprüft“ und „Vorschau gesehen“. Erscheint nach einer Änderung eine ältere Version, versprechen Sie keine sofortige Aktualisierung und erfinden Sie keine Cache-Dauer. Sichern Sie ein Beispiel und prüfen Sie, welche Möglichkeit zum erneuten Einlesen der jeweilige Dienst bietet. Das Ziel ist einfach: Leser verstehen den Link, und das Team weiß genau, was bereits bestätigt ist.

Quellen

Weiterlesen

Fehlermeldungen in Formularen sollen helfen: vom roten Rand zum nächsten Schritt