<title>

Das <title> Element definiert den Titel deiner Webseite. Dieser erscheint im Browser-Tab, in Lesezeichen, in den Suchergebnissen von Google und Co., und wenn jemand deine Seite auf Social Media teilt. Es ist eines der wichtigsten Elemente für SEO und Benutzererfahrung.

Steckbrief <title>

Kategorie: Meta & Scripting
Art: Metadaten
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

Grundlagen

Das <title> Element ist ein Pflichtelement in jedem HTML-Dokument und muss im <head> Bereich stehen. Es darf nur einmal pro Seite vorkommen und darf nur Text enthalten, keine HTML-Tags.

Der Titel sollte für jede Seite deiner Website einzigartig sein und präzise beschreiben, worum es auf der jeweiligen Seite geht. Suchmaschinen verwenden den Titel als Hauptüberschrift in den Suchergebnissen, deshalb ist er extrem wichtig für SEO.

Idealerweise ist der Titel zwischen 50 und 60 Zeichen lang. Längere Titel werden in Suchergebnissen und Browser-Tabs abgeschnitten.

Syntax

index.html

Grundsyntax

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Meine erste Webseite</title>
</head>
<body>
  <p>Inhalt</p>
</body>
</html>

Beispiele

3 Beispiele

index.html

Einfacher Seitentitel

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Über uns</title>
</head>
<body>
  <h1>Über unser Team</h1>
</body>
</html>

index.html

SEO-optimierter Titel

<!DOCTYPE html>
<html lang="de">
<head>
  <title>HTML Tutorial für Anfänger | Programmieren mit Mario</title>
</head>
<body>
  <h1>HTML Tutorial</h1>
</body>
</html>

Ein gutes Muster für SEO-Titel ist: “Primary Keyword | Markenname”. Das gibt Suchmaschinen klare Signale und Nutzer erkennen sofort, worum es geht und wer die Quelle ist.

index.html

Startseite

<!-- Startseite -->
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Startseite | Meine Website</title>
</head>
<body>
  <p>Willkommen</p>
</body>
</html>

<!-- Blog-Seite -->
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Blog | Meine Website</title>
</head>
<body>
  <p>Alle Blog-Artikel</p>
</body>
</html>

<!-- Kontakt-Seite -->
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Kontakt | Meine Website</title>
</head>
<body>
  <p>Kontaktformular</p>
</body>
</html>

Jede Seite sollte ihren eigenen, einzigartigen Titel haben, der den Inhalt dieser spezifischen Seite beschreibt.

Barrierefreiheit

Das <title>-Element ist für die Barrierefreiheit wichtiger, als viele denken:

Screenreader lesen den Titel zuerst vor: Wenn ein Screenreader eine Seite lädt, ist der Titel die erste Information, die der Nutzer hört. Ein guter Titel gibt sofort Orientierung, auf welcher Seite man sich befindet.
Tab-Navigation: Nutzer, die zwischen mehreren Tabs wechseln, sind auf aussagekräftige Titel angewiesen. Ein generischer Titel wie “Seite 1” hilft niemandem, den richtigen Tab zu finden.
Seitenwechsel ankündigen: In Single-Page-Applications (SPAs) wird der Titel oft per JavaScript aktualisiert. Wenn sich der Titel ändert, erkennen Screenreader, dass eine neue Seite geladen wurde. Bleibt der Titel gleich, bemerkt der Nutzer den Seitenwechsel möglicherweise nicht.
Eindeutiger Titel pro Seite: Jede Seite sollte einen einzigartigen Titel haben, der den spezifischen Inhalt beschreibt. Das erleichtert die Navigation über Browser-Verlauf und Lesezeichen, besonders für Nutzer assistiver Technologien.

Häufige Fehler

5 Fehler

01 Fehlendes title Element

Wenn du das <title> Element vergisst, zeigt der Browser oft die URL oder “Untitled” im Tab an. Außerdem wird deine Seite von Suchmaschinen schlechter bewertet.

02 Zu langer Titel

Google zeigt in den Suchergebnissen etwa 50-60 Zeichen an. Alles darüber wird abgeschnitten und mit ”…” ersetzt. Halte deine Titel prägnant.

03 Gleicher Titel auf allen Seiten

Viele Anfänger verwenden denselben Titel auf allen Unterseiten. Das ist schlecht für SEO und verwirrt Nutzer. Jede Seite braucht einen einzigartigen Titel, der ihren spezifischen Inhalt beschreibt.

04 HTML-Tags im Titel

Das <title> Element darf nur Text enthalten, keine HTML-Tags. <title>Meine <strong>tolle</strong> Seite</title> ist ungültig und wird fehlerhaft angezeigt.

05 Keyword-Stuffing

Vermeide es, zu viele Keywords in den Titel zu packen. “HTML Tutorial Anfänger Webentwicklung lernen HTML Kurs” ist unnatürlich und wird von Suchmaschinen abgestraft. Schreibe für Menschen, nicht für Algorithmen.

Browser-Kompatibilität

5 von 5

Das title-Element wird von allen Browsern vollständig unterstützt und gehört zum HTML-Standard seit der ersten Version.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Email-Clients ignorieren das title-Element komplett. In HTML-Emails wird stattdessen die Betreffzeile als Titel verwendet.

Apple Mail

Keine

Das title-Element wird ignoriert.
Gmail

Keine

Gmail ignoriert das title-Element.
Outlook

Keine

Outlook verwendet die Betreffzeile statt title.
Thunderbird

Keine

Das title-Element wird nicht ausgewertet.
Yahoo Mail

Keine

Das title-Element wird ignoriert.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<title>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter