Ausführbare HTML-Docs: Title-Tag

Q: Wie ändere ich den Seitentitel mit JavaScript?

Weise document.title einen Wert zu, zum Beispiel document.title = '(3) Inbox'. Der Browser aktualisiert den Tab sofort; so zeigen Web-Apps die Anzahl ungelesener Nachrichten an.

Q: Ist das Title-Tag dasselbe wie das title-Attribut?

Nein. Das -Element benennt die ganze Seite. Das Attribut title, das an fast jedem Element funktioniert, fügt einen Tooltip hinzu, der beim Überfahren dieses Elements mit der Maus erscheint.

Wohin das Title-Tag gehört

Jede Seite braucht ein <title>-Element in <head>. Sein Text ist der Name der Seite, den Browser im Tab und in Lesezeichen anzeigen und den Suchmaschinen meistens als Überschrift des Suchergebnisses zeigen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

Der Titel selbst erscheint nie in der Seite. Diese Vorschau läuft außerdem innerhalb der Coddy-Docs-Seite, dein Browser-Tab zeigt also weiter den Titel der Docs; das kleine Skript gibt aus, was ein Tab zeigen würde, wenn du das Beispiel als eigene Datei öffnest. Bearbeite den Text in <title>, und die Zeile aktualisiert sich.

Einen guten Titel schreiben

Der Titel ist oft das Erste, was jemand über deine Seite liest, in einem Suchergebnis oder einer Reihe von Tabs. Ein paar Regeln decken die meisten Seiten ab:

Sei konkret und eindeutig. Jede Seite einer Website sollte ihren eigenen Titel haben, der diese Seite beschreibt: „Rezept für Schokoladenkekse“, nicht „Startseite“ oder „Seite 1“.
Setz die wichtigen Wörter an den Anfang. Tabs sind schmal, und Suchergebnisse kürzen lange Titel. Halte die Kernphrase in den ersten etwa 50 bis 60 Zeichen.
Setz den Namen der Website ans Ende, getrennt durch | oder :, damit das Thema der Seite trotzdem zuerst kommt.
Schreib ihn für Menschen. Ein Titel voller wiederholter Keywords sieht nach Spam aus, und Suchmaschinen schreiben ihn vielleicht um.

Dieser nachgebaute Tab schneidet den Titel etwa bei der Breite eines echten Tabs ab. Probier einen kürzeren oder längeren Titel aus:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

Mit dem Namen der Website am Ende zeigt ein gekürzter Tab trotzdem, worum es auf der Seite geht. Dreh die Reihenfolge um („Bake Club | How to...“), und jeder Tab deiner Website würde mit denselben zwei Wörtern beginnen.

Title-Tag vs. h1 vs. das title-Attribut

	Wo	Angezeigt	Aufgabe
`<title>`	In `<head>`, einmal	Tab, Lesezeichen, Suchergebnisse	Benennt die Seite
`<h1>`	In `<body>`	Auf der Seite	Sichtbare Hauptüberschrift
Attribut `title="..."`	An jedem Element	Tooltip beim Überfahren	Zusätzlicher Hinweis zu diesem Element

Titel und <h1> stimmen inhaltlich meist überein, aber der Titel kann für die Suche formuliert sein und den Namen der Website tragen, während die Überschrift kürzer sein kann. Das Attribut title hat trotz des Namens nichts damit zu tun. Fahr mit der Maus über das unterstrichene Wort:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

Tooltips aus dem Attribut title erscheinen nicht auf Touchscreens und werden von Screenreadern nicht zuverlässig vorgelesen, schreib wichtige Informationen also nicht nur dort hinein.

In einen Titel gehört nur Text

Der Browser liest alles zwischen <title> und </title> als reinen Text. Tags werden nicht verarbeitet, Zeichenreferenzen wie & werden aber dekodiert, und mehrere Leerzeichen hintereinander werden zu einem zusammengefasst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

Das Ergebnis ist Salt & Pepper <b>Bold?</b>: Aus der Entity wurde &, aus den drei Leerzeichen eines, und die <b>-Tags blieben als wörtliche Zeichen stehen. Hervorhebung ist in einem Titel nicht möglich.

Den Titel mit JavaScript ändern

document.title lässt sich lesen und schreiben. Web-Apps nutzen es, um die Anzahl ungelesener Nachrichten oder den aktuellen Zustand im Tab anzuzeigen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

Auf einer echten Seite ändert sich der Browser-Tab im selben Moment wie der nachgebaute Tab hier. Suchmaschinen, die JavaScript ausführen, können einen per Skript gesetzten Titel sehen, aber ein Titel im HTML ist die zuverlässige Wahl für alles, was indexiert werden soll.

Häufige Fehler

Überhaupt kein Titel. Der Browser weicht auf die URL oder den Dateinamen aus, und die Seite ist ungültiges HTML. Gib jeder Seite einen, neben dem Meta-Viewport-Tag in deinem Template.
Derselbe Titel auf jeder Seite. Tabs, Lesezeichen und Suchergebnisse lassen sich dann nicht mehr auseinanderhalten.
<title> in <body> setzen. Browser verwenden ihn trotzdem, aber er gehört in <head>, und manche Tools übersehen ihn.
Zwei <title>-Elemente. Nur das erste zählt. Entferne die anderen.
Jeden Titel mit dem Namen der Website beginnen. Fang mit dem Thema der Seite an; der Name der Website kommt ans Ende.

Häufig gestellte Fragen

Was ist das Title-Tag in HTML?

<title> legt den Namen der Seite fest. Browser zeigen ihn im Tab und in Lesezeichen an, und Suchmaschinen zeigen ihn meistens als anklickbare Überschrift des Suchergebnisses. Es steht in <head> und enthält nur Text.

Wie lang sollte ein Title-Tag sein?

Suchmaschinen kürzen lange Titel nach Anzeigebreite, halte die wichtigen Wörter also in den ersten etwa 50 bis 60 Zeichen. In HTML gibt es keine feste Grenze, aber alles danach verschwindet vielleicht hinter Auslassungspunkten.

Was ist der Unterschied zwischen dem Title-Tag und h1?

<title> sind Metadaten: Es benennt die Seite in Tabs und Suchergebnissen und wird in der Seite selbst nicht angezeigt. <h1> ist die sichtbare Hauptüberschrift im body. Oft sagen beide Ähnliches, aber der Titel kann den Namen der Website ergänzen und für die Suche formuliert sein.

Darf ich HTML-Tags in das Title-Tag setzen?

Nein. Das title-Element enthält nur Text. Tags darin werden wörtlich angezeigt, <title>A <b>B</b></title> ergibt also einen Tab mit "A <b>B</b>". Zeichenreferenzen wie & funktionieren aber.

Wie ändere ich den Seitentitel mit JavaScript?

Weise document.title einen Wert zu, zum Beispiel document.title = '(3) Inbox'. Der Browser aktualisiert den Tab sofort; so zeigen Web-Apps die Anzahl ungelesener Nachrichten an.

Ist das Title-Tag dasselbe wie das title-Attribut?

Nein. Das <title>-Element benennt die ganze Seite. Das Attribut title, das an fast jedem Element funktioniert, fügt einen Tooltip hinzu, der beim Überfahren dieses Elements mit der Maus erscheint.

Verwandte Konzepte