Titel und Beschreibung

Ab hier geht es um den head. Du kennst ihn aus Lektion 1.3: der unsichtbare Teil des Dokuments. Jetzt schauen wir hinein.

Und weil im head nichts Sichtbares steht, arbeitest du in diesem Abschnitt wieder mit ganzen Dateien. Die Codeblöcke beginnen also wieder mit <!DOCTYPE html>, und die Seite zeigt entsprechend wenig. Das ist kein Fehler, das ist der Punkt.

01 / 03title und description

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Linsensuppe in 30 Minuten | Mein Kochblog</title>
    <meta
      name="description"
      content="Ein Rezept für Linsensuppe, das unter der Woche wirklich klappt. Mit Einkaufsliste und Tipps zum Vorkochen."
    >
  </head>
  <body>
    <h1>Linsensuppe in 30 Minuten</h1>
    <p>Vom Schneidebrett bis zum Teller in einer halben Stunde.</p>
  </body>
</html>

Auf der Seite selbst siehst du nur den body. Unsichtbar ist der Titel trotzdem nicht: Er steht als Name des Reiters „Browser“, genauso wie ein Tab in deinem eigenen Browser ihn trägt. Schau hin, dort steht gerade „Linsensuppe in 30…“, und weiter reicht der Platz nicht.

Diese Kürzung ist keine Eigenart der Lernumgebung, die hast du überall. Der title landet an vier Stellen:

• im Browser-Tab, immer gekürzt
• im Lesezeichen, wenn jemand die Seite speichert
• in der Fensterleiste des Betriebssystems
• als Überschrift im Suchergebnis, blau und anklickbar

Damit ist der title oft das Erste, was jemand von deiner Seite liest. Und häufig das Einzige, denn er entscheidet mit, ob überhaupt geklickt wird.

<meta name="description"> ist der Beschreibungstext, der im Suchergebnis unter dem Titel steht. Er ist kein Ranking-Faktor, Suchmaschinen sortieren also nicht danach. Er ist trotzdem wichtig, weil er der Werbetext für dein Ergebnis ist.

Ein meta-Element ist ein Void-Element und arbeitet immer nach demselben Muster: name sagt, um welche Angabe es geht, content trägt den Wert. Dieses Paar begegnet dir gleich noch mehrfach.

02 / 03Jede Seite braucht ihren eigenen Titel

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Startseite</title>
    <meta name="description" content="Willkommen auf meiner Website.">
  </head>
  <body>
    <h1>Linsensuppe in 30 Minuten</h1>
    <p>Diese Seite handelt von einem Rezept, ihr Titel sagt das aber nicht.</p>
  </body>
</html>

Hier steht „Startseite“ über einer Rezeptseite. Öffne das Beispiel und sieh auf den Reiter: Er heißt jetzt so. Das ist der häufigste Fehler bei selbstgebauten Websites: Das Grundgerüst wird einmal geschrieben und für jede neue Seite kopiert, samt Titel.

Die Folge: Alle Ergebnisse einer Website heißen im Suchergebnis gleich, und wer zehn Tabs offen hat, findet keinen davon wieder.

Ein bewährter Aufbau für Titel: erst das Konkrete, dann der Name der Website, getrennt durch einen senkrechten Strich. Also „Linsensuppe in 30 Minuten | Mein Kochblog“. Vorne steht das, was den Unterschied macht, denn hinten wird gekürzt. Wie weit, siehst du am ersten Beispiel: Von „Mein Kochblog“ ist am Reiter nichts mehr übrig, und das macht nichts. Stünde es vorne, wäre stattdessen das Rezept weg.

Zur Länge: Suchmaschinen zeigen rund 55 bis 60 Zeichen an, danach schneiden sie ab. Bei der Beschreibung sind es etwa 150 bis 160. Das sind keine Grenzen, nur Anzeigefenster. Schreib in Sätzen und achte darauf, dass das Wichtigste vorne steht.

03 / 03title ist nicht h1

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Linsensuppe in 30 Minuten | Mein Kochblog</title>
  </head>
  <body>
    <h1>Linsensuppe in 30 Minuten</h1>
  </body>
</html>

Beide beschreiben dieselbe Seite und sind trotzdem verschiedene Dinge.

Der title steht außerhalb der Seite: im Tab, im Suchergebnis, im Lesezeichen. Sein Publikum weiß noch nichts über deine Website, deshalb gehört der Name der Website hinein.

Die h1 steht auf der Seite. Wer sie liest, ist schon da und sieht das Logo daneben. Der Name der Website wäre dort Wiederholung.

Deshalb dürfen sie sich ähneln, sollten aber nicht identisch sein. Und beide gibt es genau einmal pro Seite.

Ein Detail, das oft verwechselt wird: Es gibt auch ein title-Attribut, das du in Lektion 1.6 bei der Abkürzung gesehen hast. Das ist der Tooltip an einem einzelnen Element und hat mit dem title-Element im head nichts zu tun.