Der Header-Bereich ist ein wichtiger Bestandteil jeder HTML-Seite. Unter der Oberfläche verborgen, können die Meta-Befehle einen Beitrag zum Erfolg von Webseiten leisten. Lest hier, wie Ihr den "HTML-Kopf" perfekt in den Griff bekommt.
Einen beispielhaften Header zeigt der unten stehende Code. Ein "Kochrezept", das gern für eigene Zwecke genutzt und modifiziert werden darf.
Codebeispiel:
01. <!DOCTYPE html>
02. <html lang="de">
03. <head>
04. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05. <meta name="author" content="Klaus Mustermann">
06. <meta name="description" content="Ein gut definierter Header ist die halbe Miete.">
07. <meta name="keywords" content="head, definition, intelligent, gemeistert">
08. <meta name="robots" content="index, follow, noarchive">
09. <meta name="viewport" content="width=device-width, initial-scale=1">
10. <title>Die Kopfsache</title>
11. </head>
12. <body>
Codezeilen entschlüsselt:
01. Doctype-Deklaration
Für eine standardkonforme HTML-Programmierung (W3C-gerecht) empfiehlt es sich, eine Doctype-Deklaration zu notieren. Im Beispiel verwende ich die Variante für HTML 5. Diese erlaubt den Einsatz von (fast) allen HTML-Tags, Style Sheets und Script-Sprachen. Ob die Angabe groß oder klein geschrieben werden muss, ist nicht geregelt.
Die Notwendigkeit einer Doctype-Deklaration lässt sich nicht in Kürze erklären. Aus formalen Gründen sollte das notiert werden. Für weitere Informationen zu dieser Thematik empfiehlt sich ein Blick in die HTML-5-Dokumentation [1] oder in das bekannte Selfhtml [2].
02. HTML-Tag
Zeile 2 beinhaltet den üblichen <html>-Tag, um den Inhalt der Seite einzuschließen. In diesem sollte man mit dem Attribut lang die verwendete Sprache der Seite angeben. In unserem Fall ist das "de" für Deutsch.
03. Head-Tag
Hier beginnt die Definition des Kopfteils, dem sogenannten Header, also dem Bereich, um den es in diesem Beitrag geht.
04. Zeichensatz
Mit dieser Meta-Angabe wird zum einen der Inhaltstyp (HTML-Dokument) und zum anderen der verwendete Zeichensatz (utf-8) festgelegt. Das ist eine eher formale Angabe, damit der Browser die Seite korrekt darstellen kann.
Es wäre möglich, den Zeichensatz deutlich kürzer zu deklarieren. Die von mir gezeigte Variante finde ich aber deutlich charmanter.
05. Der Autor
Mit dieser Angabe gibt man sich als Autor eines HTML-Dokumentes zu erkennen. Inwiefern dies zwingend notwendig ist, sei dahingestellt. Andere (Web)Autoren können auf diese Information zurückgreifen, wenn sie auf ein Dokument verweisen wollen und dabei exakt arbeiten.
06. Seitenbeschreibung
Mit diesem Meta-Tag wird der Inhalt des HTML-Dokumentes beschrieben. Üblich sind ein oder zwei Sätze. Insgesamt sollte man nicht mehr als 256 Zeichen verwenden. Für die Seitenbeschreibung gilt: "Weniger ist mehr". Ferner sollten die Angaben passend zum Seiteninhalt sein.
07. Schlüsselwörter
Für Suchmaschinen-Spammer waren Schlüsselwörter einst das A & O ihrer Header-Definition, ließen sich doch so Spitzenplätze bei Suchmaschinen-Anfragen ergaunern. Aufgrund dieser Unzulänglichkeiten spielen die "keywords" heute eine untergeordnete Rolle in Ranking-Algorithmen. Für die Angabe selbst sollten 3 bis 10 passende Stichwörter durch Komma getrennt notiert werden.
08. Suchroboter-Info
Suchmaschinen-Spider kann man mit dieser Meta-Angabe instruieren, ob die entsprechende Seite in den Suchindex aufgenommen werden soll, ob den enthaltenen Links gefolgt werden darf und ob eine Archiv-Version des Dokumentes erstellt werden kann.
Mögliche Attribute für diese Meta-Angabe:
index - Seite indizieren
noindex - Seite nicht indizieren
follow - enthaltenen Links folgen
nowfollow - enthaltenen Links nicht folgen
archive - Seite archivieren
noarchive - Seite nicht archivieren
Ob die Angaben interpretiert werden, hängt stark von der jeweiligen Suchmaschine ab. Die Großen respektieren die Vorgaben und deswegen ist die Angabe sinnvoll. Welche Werte einzutragen sind, entnimmt man am besten den tagesaktuellen Vorgaben des präferierten SEO-Spezialisten … ;-)
09. Viewport
Die Viewport-Angabe wurde in HTML 5 für responsive Seitengestaltung eingeführt. Damit instruiert man den Browser, wie die Abmessungen und die Skalierung der Seite zu verarbeiten sind. Die Angabe ist mehr oder weniger Pflicht. Weitere Betrachtungen dazu würden hier allerdings den Rahmen sprengen.
10. Seitentitel
Mit dem <title>-Tag wird der Name des HTML-Dokumentes festgelegt. Diese Angabe ist sehr bedeutend, da sie als Bezeichnung für das Browserfenster verwendet wird, eine wichtige Input-Größe für Suchmaschinen-Roboter darstellt und beim Setzen eines Lesezeichens auf das Dokument als Bezeichnung für dieses übernommen wird.
Diese Angabe sollte fehlerfrei (Rechtschreibung), passend zum Dokument und nicht allzu lang sein. Günstig ist es, die im Dokument verwendete <h1>-Überschrift analog im Titel zu notieren. Unsinnig dagegen ist es, für alle Seiten eines Webprojektes den gleichen Titel zu verwenden.
11. Header-Ende
Dieser Tag beendet den Header-Bereich.
12. Body
Codezeile 12 beinhaltet den Body-Tag. Hier beginnt der "Körper" (body) der HTML-Datei.
Zusammenfassung
Für das Ranking in "guten" Suchmaschinen spielen Meta-Angaben im Gegensatz zu früher nur noch eine untergeordnete Rolle. Das ist aus meiner Sicht gut. Relevant ist ein durchdachter Header z.T. für Meta-Suchmaschinen, für lokale Suchskripte, die auf diese Angaben zurückgreifen, und z.T. für moderne Webbrowser. Es lohnt sich also einen gepflegten HTML-Header anzubieten.
Historie
Dieser Artikel entstand 1999 ursprünglich für das Webmagazin "Dr. Web" und ging dort ein paar Jahre später im Zuge eines Relaunches offline. Da der Beitrag auf meiner Website weiter zur Verfügung stand, waren einige Aktualisierungen notwendig. Das vorliegende Dokument ist das Ergebnis der zweiten kompletten Überarbeitung im April 2020.
Kurzglossar
robots.txt - Mit dieser Datei regelt der Webmaster den Zugriff auf die Dokumente und Dateien einer Website für Suchmaschinen-Roboter.
Spider - Synonym für Suchmaschinen-Roboter / Suchmaschinen-Spider.
W3C - Gremium, das technische Standards für das Web erarbeitet und entwickelt.
Quellen
[1] HTML Living Standard
[2] Selfhtml (HTML-Dateien selbst erstellen)
Interessanter Link
Erstveröffentlichung: 1999