Meta-Informationen im head: title, charset, viewport, description
Meta-Informationen im head: title, charset, viewport, description
~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Du kennst <title> und <meta charset="UTF-8"> schon aus Kapitel 4. In diesem Kapitel lernst du zwei weitere wichtige Einträge für den <head>-Bereich kennen.
viewport: wichtig für Handys und Tablets
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ohne dieses Meta-Tag zeigen viele Handy-Browser Webseiten standardmäßig so an, als wären sie auf einem großen Desktop-Bildschirm - alles wird winzig klein dargestellt, und man muss hineinzoomen, um etwas zu lesen. Dieses Tag sagt dem Browser: "Benutze die tatsächliche Bildschirmbreite des Geräts, nicht die Desktop-Annahme." Ganz besonders wichtig wird dieses Tag, sobald du später CSS für responsive Layouts lernst - aber es gehört schon jetzt in jede Seite mit hinein, als feste Gewohnheit.
description: der Text in den Suchergebnissen
<meta name="description" content="Finns eigene Webseite über seine Lieblingsspieler, seine Mannschaft und seine Fotos vom Fußballspielen.">description ist eine kurze Zusammenfassung deiner Seite (idealerweise so um 150-160 Zeichen), die zwar nicht im Browserfenster selbst sichtbar ist, aber oft als kleiner Beschreibungstext unter dem blauen Titel in Google-Suchergebnissen angezeigt wird.
Das vollständige head-Grundgerüst
Ab jetzt benutzt du dieses erweiterte Grundgerüst für jede neue Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finns Fußball-Webseite</title>
<meta name="description" content="Finns eigene Webseite über seine Lieblingsspieler, seine Mannschaft und seine Fotos vom Fußballspielen.">
</head>
<body>
...
</body>
</html>Gute title- und description-Texte schreiben
<title>: kurz und aussagekräftig, oft nach dem Muster "Seitenname - Webseitenname".description: eine echte, einladende Zusammenfassung, kein einfach nur aufgezählter Stichwortsalat.- Jede Unterseite sollte einen eigenen, passenden
<title>und eine eigenedescriptionhaben, nicht überall dieselbe.
Aktualisiere jetzt auch die anderen beiden Seiten mit passenden Titeln und Beschreibungen:
<title>Meine Lieblingsspieler - Finns Fußball-Webseite</title>
<meta name="description" content="Finns Übersicht seiner Lieblingsfußballspieler mit Position und Verein.">Tipp: Merke dir die Reihenfolge im <head> nicht stur auswendig - technisch ist die genaue Reihenfolge dieser Tags meistens egal. Wichtig ist nur, dass alle vier (charset, viewport, title, description) überhaupt vorhanden sind.