Schlaues Köpfchen

HTML-Head: Was muss, was soll in den Head

Bei manchen sieht der head-Bereich so aus: <head></head>, bei anderen findet man unsägliche Auflistungen aller Metatags, die jemals irgendwo erwähnt wurden; könnte ja sein, dass etwas wichtiges dabei ist.

Dabei ist es ganz einfach:
So sieht ein richtiger Head aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Was Wo; 15-40 Zeichen</title>
<meta name="description" content="Wo: Was von Wem. Was2, Was3 und Was4. 100-180 Zeichen" />
<meta name="keywords" content="was, wer, wo, was2, was3" />
<meta name="language" content="de, at" />

<script type="text/javascript" src="standard.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />

<meta http-equiv="imagetoolbar" content="no" />
</head>

!!! Wichtigkeit für Suchmaschinen

Was bedeutet das alles:

"Doctype":
(Nur der Vollständiglkeit halber, für Sumas ist die DTD irrelevant)
Noch vor dem Head wird normalerweise der Doctype angegeben. Im Doctype wird festgelegt, was für eine Art (X)HTML verwendet wird, sprich: wie es der Browser interpretieren soll. Ohne Doctype schaltet der Browser in den sehr fehlertoleranten "Quirksmode" und steuert damit aber auch einige seiner "speziellen" Eigenheiten bei. Die oben angebene Variante dürfte für die meisten XHTML-Seiten die Richtige sein, wer aber zB im IE7 noch färbige Scrollbalken haben will, muss den Link zur dtd weglassen - oder gleich die ganze Doctype, was nahezu aufs selbe rausläuft. Wer im Gegenteil browserunabhängige Darstellung von CSS will, muss auf "strict" zurückgreifen.

Die DTD von HTML 5 ist schlichtweg: <!DOCTYPE html>, womit das Ende der Doctype-Definition eingeläutet ist

Genaueres zur DTD bei Selfhtml.
Mehr zu Thema Valides HTML

"Content-Type" :
Bei dynamischen Seiten ist zunehmend UTF-8 auf dem Vormarsch, weil es sich besser mit MySQL-Datenbanken verträgt:

<title> !!!
Der wichtigste Tag im Head! Zu 80% zeigt eine Suchmaschine nur Seiten vorne an, die das gesuchte Wort im <title> haben. Das Wer (= der Name einer Person/Firma) ist hier normalerweise nicht wichtig, hier muss das Was (=Produkt, Leistung) hin - und wenn der Ort von Interesse ist natürlich auch das Wo. 15 bis 40 Zeichen sind ausreichend. [ mehr zum <title>]

meta name="description": !!
Ebenso wie der <title> wird die Description in den Suchergebnissen angezeigt, sofern sie das gesuchte Wort enthält. Deswegen sollte man sie mit einiger Sorgfalt verfassen: Einerseits die wesentlichen Begriffe unterbringen, andererseits auch in der SERPs zum Klick animieren. 2 Sätze zu je ca 80 Zeichen sind optimal. [ mehr zur Meta-Description]

meta-description Laenge

Title und Meta-Description in optimaler Länge.

meta name=" keywords ": (!)
Die Meta-Keywords sind heute eher unbedeutend. Sie bieten aber die Gelegenheit, sich noch einmal Gedanken darüber zu machen, mit welchen Begriffen man eigentlich gefunden werden will. Normalerweise enthalten sie Begriffe, die auch im <title> und in der Meta-Description vorkommen. [ mehr zu den Meta-Keywords]

meta name="language": (!)
Einfach ein Standard, der nicht schadet. So hat zb die msn-Suche manchmal Schwierigkeiten mit der Sprache, was dazu führt, dass Seiten bei "Ergebnisse auf Deutsch" nicht gelistet werden, obwohl sie deutsch sind.

script type="text/javascript" :
Auch wenn eine Seite grundsätzlich auch ohne Javascript funktionieren sollte: ein paar kleine Schnippsel gehören zur Grundausstattung, etwa die Maskierung der e-Mail Adresse. Die Maskierung per ASCII-Code ist relativ unsicher, Javascript bietet weit mehr Schutz und hat vor allem den Vorteil, dass du die Adresse nur einmal ändern musst um sie überall zu aktualisieren. Praktischerweise kannst du so auch gleich den ganzen Footer mit Adresse, Telefon usw einblenden, ohne dass ihn ein Bot sieht.

Auch die vielen kleinen Funktionen, die Dreamweaver in eine Seite einfügt, können allesamt ausgelagert werden.

Übrigens: Nur ca 2-4% aller Besucher haben Javascript ausgeschaltet, die teilweise abstrusen Zahlen von 20-30% kommen daher, dass (Suchmaschinen-)Bots oft nicht aus den echten Besuchern herausgerechnet werden und dass sich manche Bots nicht als solche zu erkennen geben.

link rel="stylesheet":
Es ist üblich, zumindest die allgemeinen Teile des Stylesheets auszulagern. Das macht die Seiten schlank und Änderungen leichter möglich. Ich bin kein Anhänger von "Tabellenlosem Design", aber die "normalen" html-Tags wie body, h1...h6, p, link usw sollten ausschließlich über das Stylesheet in Form gebracht werden.

link rel="shortcut icon":
Das Favicon ist zwar eigentlich nicht nötig, aber die Browser fragen danach. Wenn es fehlt, wird ein Fehler protokolliert, der mitunter die Statistik verfälschen kann. Also: Egal welches, die Datei favicon.ico sollte im Startverzeichnis der Domain vorhanden sein.

Hier kannst du aus einem beliebigen Bild ein Favicon machen: FavIcons from Pics

Zusätzlich: robots.txt !

Auch wenn die kleine Text-Datei nur leer ist: sie sollte vorhanden sein, weil sonst Fehler protokolliert werden.
Im übrigen gibt es fast auf jeder Site einige Verzeichnisse, in denen Bots eigentlich nichts verloren haben: Kontaktformulare und - ja: Gästebücher.
Ich übergebe zB häufig Parameter an das Kontaktformular, um festzustellen, wo ein Besucher gerade war, bevor er die Anfrage macht (das spart Rückfragen :-). Die sich dadurch ergebenden URLs machen uU Ärger, weil ein und dieselbe Seite für Bots unter verschiedenen URLs erreichbar ist.
Und ein gut geranktes Gästebuch mag dem Inhaber schmeicheln, der Spaß hört auf wenn am Tag 30 Spammer ihre Viagra-Links abladen.
Noch was: Die robots.txt ist keine Sperre, sondern ein Agreement. Ein Bot muss sich nicht daran halten; die "Bösen" tuns auch nicht.

Kommentare:

Hallo,
Ich warte meine website via CMS und mich würde interessieren was unter der Sektion "Meta-Tags" in den Feldern: Name , Tag (content) , Wert
eingegeben werden sollte !
Danke !

Michael Sammer
Antworten