Seiten mit Titeln versehen
Jede Seite muss ein `<title>`-Element haben, das ihr Thema oder ihren Zweck beschreibt. Der Titel wird von Screenreadern beim Laden der Seite vorgelesen und erscheint in Tabs, Lesezeichen, Verlauf und Suchergebnissen.
Was gefordert wird
Das <title>-Element im Dokumentkopf muss beschreiben, worum es auf der Seite geht. Nutzende eines Screenreaders hören ihn in dem Moment, in dem die Seite lädt — er ist der erste Orientierungshinweis, den sie erhalten. Sehende Nutzende sehen ihn im Browser-Tab, im Verlauf, beim Anlegen von Lesezeichen und in den Suchergebnissen. Ein Titel, der dieses Erfolgskriterium nicht erfüllt, lässt all diese Nutzenden im Unklaren darüber, wo sie gelandet sind.
Der Titel muss nicht kreativ sein. Er muss spezifisch sein. „Startseite“ scheitert. „Preise — Acme CRM“ besteht.
Erfüllungshinweise
- Einen Titel schreiben, der zuerst die Seite und dann die Website nennt:
„Rollstuhlgerechte Hotels in Berlin — Disability World“. - Den Titel clientseitig bei SPA-Routenwechseln aktualisieren. Next.js, React Router und Vue Router benötigen jeweils explizite
document.title-Aktualisierungen oder framework-spezifische Hilfsmittel. - Formularfehler und Suchergebnisse im Titel widerspiegeln:
„3 Fehler — Kontoeinstellungen“oder„Suche: chronische Erschöpfung — 47 Ergebnisse“. - Die aussagekräftigsten Informationen an den Anfang stellen. In einer 30-Zeichen-Tab-Leiste verbirgt „Disability World — Wie man SSDI beantragt“ das eigentliche Thema.
- Bei mehrstufigen Formularen den Schritt angeben:
„Schritt 2 von 4: Adresse — Leistungsantrag“.
Häufige Fehler
- Allgemeingültige websiteweite Titel: Jede Seite zeigt
„Acme Inc.“, weil die Vorlage den Standard nie überschreibt. - Leeres
<title></title>— überraschend häufig, wenn CMS-Vorlagen davon ausgehen, dass Redakteure es immer ausfüllen. - Titellose SPA-Routen: Das initiale HTML hat einen allgemeinen Titel, und der Router aktualisiert ihn bei der Navigation nie.
- Titel bestehen ausschließlich aus dem Markennamen ohne Seitenthema (
„Acme“auf der Kontakt-, Preis- und Produktseite gleichermaßen). - „Untitled Document“ aus einem WYSIWYG-Export übernommen.
Warum es wichtig ist
Für Nutzende eines Screenreaders ist der Seitentitel das Äquivalent zu einem Blick an den oberen Rand des Browser-Fensters — er zeigt, ob sie dort angekommen sind, wo sie hin wollten. Ohne ihn klingen beim Laden alle Seiten gleich. Er ist außerdem eine Grundvoraussetzung für SEO und Link-Vorschauen — die Behebung dieses Erfolgskriteriums ist daher erfahrungsgemäß leicht gegenüber Produkt-, Marketing- und Redaktionsteams durchzusetzen.