HTML <title>-Tag
Der HTML <title>-Tag definiert den Titel eines HTML-Dokuments. Er erscheint in der Browser-Symbolleiste und auf Suchergebnisseiten.
Der HTML-Tag <title> definiert den Titel eines Dokuments. Er ist ein Teil der Metadaten des Dokuments: Er erscheint nirgendwo im eigentlichen Seiteninhalt, steuert jedoch, wie die Seite überall dort beschriftet wird, wo auf sie verwiesen wird — im Browser-Tab, als Lesezeichen, in einem Suchergebnis und als geteilter Link in sozialen Medien.
Diese Seite erklärt, warum jede Seite genau ein <title>-Element benötigt, wo es platziert werden muss und wie man einen Titel schreibt, der sowohl für Benutzer als auch für Suchmaschinen gut funktioniert.
Warum der <title> wichtig ist
Der <title> ist eines der wenigen Elemente, das in einem gültigen HTML-Dokument erforderlich ist. Browser und Suchmaschinen behandeln ihn als den kanonischen, für Menschen lesbaren Namen der Seite, weshalb er an vielen Stellen gleichzeitig erscheint:
- Browser-Tab / Fenster — der Text auf dem Tab ist der Seitentitel.
- Lesezeichen — wenn ein Benutzer die Seite als Lesezeichen speichert, wird der Titel zum Standard-Lesezeichennamen.
- Suchergebnisse (SERPs) — der Titel wird in der Regel als blauer, anklickbarer Headline des Ergebnisses verwendet und beeinflusst damit stark die Klickrate.
- Social Shares — wenn ein Link in einer Chat-App oder einem sozialen Netzwerk geteilt wird, wird der Titel in die Link-Vorschaukarte übernommen (zusammen mit Meta-Tags wie Open Graph).
- Barrierefreiheit — Screenreader lesen den Titel vor, wenn eine Seite geladen wird, und helfen Benutzern so zu bestätigen, wo sie sich befinden.
Da so viele Werkzeuge ihn verwenden, verbessert ein klarer, präziser Titel sowohl die UX (Benutzer erkennen den richtigen Tab oder das richtige Ergebnis) als auch die SEO (Suchmaschinen ranken die Seite für relevante Suchanfragen).
Der Titel sollte die wichtigsten Schlüsselwörter der Seite enthalten, damit Suchmaschinen die Seite für relevante Suchanfragen ranken — aber schreiben Sie ihn in erster Linie für Menschen.
Wo er hingehört: genau einmal, innerhalb von <head>
Der <title> muss im Abschnitt <head> stehen, wo die Dokument-Metadaten hingehören, und ein Dokument darf genau ein <title>-Element enthalten. Das <head>-Element enthält Informationen über die Seite (Titel, Zeichensatz, viewport, Meta-Daten) und keinen sichtbaren Inhalt, weshalb der Titel dort zusammen mit den übrigen beschreibenden Daten der Seite platziert wird.
Syntax
Das <title>-Element wird paarweise verwendet. Der Text wird zwischen dem öffnenden <title>- und dem schließenden </title>-Tag geschrieben und darf nur Text enthalten — keine anderen HTML-Elemente.
Beispiel des HTML-Tags <title>:
HTML <title>-Tag
<!DOCTYPE html>
<html>
<head>
<title>W3Docs - learn HTML, CSS, PHP, JavaScript online.</title>
</head>
<body>
<p>The main content of the page.</p>
</body>
</html>Einen guten Titel schreiben: schwach vs. optimiert
Ein vager oder fehlender Titel zwingt Browser dazu, auf die URL zurückzugreifen, und Suchmaschinen schreiben ihn möglicherweise um oder ignorieren ihn. Vergleichen Sie die beiden folgenden Seiten.
Schwacher Titel — zu kurz und zu allgemein:
<head>
<title>Home</title>
</head>Optimierter Titel — beschreibend, nach dem Muster Seitenname | Seitenname:
<head>
<title>HTML <title> Tag: Syntax, SEO and Examples | W3Docs</title>
</head>Das Template Seitenname | Websitename ist eine verbreitete, bewährte Konvention: der einzigartige, schlüsselwortreiche Teil des Titels steht zuerst (wo er in einem Suchergebnis und auf einem schmalen Browser-Tab am besten sichtbar ist), und der Websitename kommt zuletzt für den Markenwiedererkennungswert. Als Trennzeichen wird üblicherweise ein senkrechter Strich (|) oder ein Bindestrich (-) verwendet.
Praktische Richtlinien
- Halten Sie den Titel auf etwa 55–60 Zeichen. Das ist eine Empfehlung, keine feste Grenze — Suchmaschinen kürzen lange Titel, also stellen Sie die wichtigen Wörter an den Anfang.
- Seien Sie beschreibend. Vermeiden Sie ein- oder zweiwortige Titel; verwenden Sie einen aussagekräftigen Ausdruck, der die Seite zusammenfasst.
- Machen Sie jeden Titel einzigartig auf Ihrer gesamten Website, damit jede Seite in Tabs und Suchergebnissen unterscheidbar ist.
- Vermeiden Sie Keyword-Stuffing. Eine bloße Aneinanderreihung von Wörtern wirkt wie Spam und nützt niemandem.
- Vermeiden Sie ungewöhnliche Sonderzeichen, die verschiedene Browser möglicherweise inkonsistent darstellen.
Attribute
Der <title>-Tag unterstützt die Globalen Attribute. In der Praxis ist nur lang von Bedeutung — es deklariert die Sprache des Titeltexts, was hilfreich ist, wenn der Titel von der Dokumentsprache abweicht. Attribute wie id, class und style werden vom Parser akzeptiert, haben aber keinen Effekt, da der Titel nie im Seiteninhalt gerendert wird, wo Styling oder Scripting greifen könnten.