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>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML-Head: Was muss, was soll in den Head</title>
<meta name="description" content="Was muss wirklich in den Head. Was ist nötig, was ist Standard, was ist überflüssig." />
<meta name="keywords" content="html-head,seitenkopf, head, standard,meta-keywords,meta-description" />
<meta name="language" content="de" />


<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<link rel="stylesheet" type="text/css" href="/standard.css" />


<script type="text/javascript" src="/standard.js"></script>

</head>

!!! Wichtigkeit für Suchmaschinen

Was bedeutet das alles:

"Doctype":
Noch vor dem Head wird die Doctype Definition (DTD) angegeben. Im Doctype wird festgelegt, was für eine Art (X)HTML verwendet wird, sprich: wie es der Browser interpretieren soll. Ohne DTD schaltet der Browser in den sehr fehlertoleranten "Quirksmode" und steuert damit aber auch einige seiner "speziellen" Eigenheiten bei. Das kann erwünscht sein, meistens aber nicht.

Die DTD von HTML 5 ist schlichtweg: <!DOCTYPE html>, womit das Ende der Doctype-Definition ohnehin schon eingeläutet ist.
Wer sich heute Gedanken über den <head> macht, sollte in jedem Fall HTML 5 vorgeben. Wenn es Darstellungsprobleme gibt: diese ausbessern, nicht die DTD. Da musst du durch.

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

Es gibt mehrere Varianten, das Charset anzugeben, diese oben wird auch von älternen Browsern erkannt.
Nur wenn es gar nicht anders geht, kannst du auch andere Charsets als utf-8 verwenden.

<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. Ältere Browser und Suchmaschinen ignorieren die Angaben im <html> Tag.

meta name="viewport": (!)

Dieser Meta-Tag sagt einem Smartphone, dass die Seite responsive ist und daher nicht verkleinert dargestellt werden soll.
Auch wenn deine Site nicht wirklich responsive ist, kannst du das einfach mal ausprobieren und sehen, was kommt.
Es wird viel Unsinn erzählt, wie wichtig responsive Webdesign fürs Ranking ist. Die einfache Wahrheit: So wichtig wie es für die Besucher deiner Website ist.

link rel="stylesheet":
Die CSS-Dateien sollten vor den Javascript Daten eingebunden sein und es sollten idealerweise nur wenige sein, weil die Zugriffszeiten sonst sehr lange werden. Also: Besser eine große CSS-Datei als viel kleine.
Das CSS für das Responsive Design sollte ebenfalls keine einzelne Datei sein.

script type="text/javascript" :
Anders als CSS kann Javascript grundsätzlich überall auf der Seite eingebunden werden - also auch im <body>. Im <head> sollte nur das eingebunden sein, was zum Funktionieren der Seite sofort benötigt wird. Größere Bibliotheken wie jQuery sollten erst am Ende der Seite eingehängt werden, aber dann kommt es manchmal vor, dass etwas nicht richtig funktioniert. Das muss man ausprobieren.

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

Was es sonst noch so gibt

link rel="shortcut icon":

Das Favicon ist das kleine Bildchen, das du in den Browser-Tabs und den Bookmarks siehst. Es zwar technisch 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.

Wenn das Icon woanders als im Startverzeichnis ist oder anders als favicon.ico heißt, kannst du die URL über diesen Tag angeben.

og:image, og:title usw

Das Open Graph Protokoll ist vor allem für die Verwendung auf Facebook usw interessant. Ein Tag wie:

bewirkt, dass ebendieses Bild in Facebook angezeigt wird, wenn jemand die Seite erwähnt. Das ist deswegen wichtig, weil Posts in Facebook kaum beachtet werden, wenn sie KEIN Bild enthalten.
Die weiteren Tags wie og:title oder og:descriptions sind weniger wichtig, weil sie ohnehin durch <meta name="description" ..> und <title> abgedeckt sind.

Apple Touch Icon

Das - in allen möglichen Größen - ist so nötig wie ein Kropf am Hals. Warum ich es überhaupt erwähne: Die ganze Orgie wird oft vom CMS mitliefert, ohne dass es der Seiteninhaber bemerkt - und dementsprechen sind die Bildchen oft auch gar nicht vorhanden.

Was das überhaupt ist: Du kannst auf Smartphones (Apple oder Android) ein Bookmark auf dem "Desktop" ablegen, und dann wird dieses Icon verwendet. Die verschiedenen Größen sind dabei für iPhone, iPad, iPad super usw. Möglich, dass das auch für PCs übernommen wird.

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.
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:

Kurz und gut erklärt. Sehr lobenswert.

Achim Keil
Antworten

Danke für diesen nützlichen Beitrag! Grundlegende Sachen die Ich teilweise noch nirgends gesehen habe. Aber umso wichtiger für SEO sind.

H.A. Konrad
Antworten

Mal abgesehen von den typischen Grundlagen sind hier ein paar sehr wichtige Details mit aufgeführt, die man sonst so schnell nicht findet im Netz. Jedenfalls echt gelungen die Ausführung und was lernen konnte ich dabei auch noch.

R. Saalfeld
Antworten

Der Seitenkopf (Head) wird oft vernachlässigt. Die einen wissen gar nicht, dass es ihn gibt, die andern müllen hinein, was das Zeug hält.

Neuere Themen:

URL (Domain, Dateinamen, Links)
Der URL - inklusive Domain, Verzeichnis und Dateinamen - wird von Suchmaschinen angezeigt. Daher kommt ihm besondere Bedeutung zu.

Bewertung der Headlines h1 - h6
Die Headlines sind für Suchmaschinen sichtbare Highlights auf einer Seite und sollten für Schlüsselwörter genutzt werden.

Suchmaschinen-Geheimtipp: die Meta-Description
Oft wird die Meta-Description mit den Keywords verwechselt - völlig zu Unrecht. Die Meta-Description ist ein echter Geheimtipp.

Meta-Keywords und ihre Bewertung in Suchmaschinen
Setze meta-Tags gezielt und mit Feingefühl ein.

Bewertung von Links durch Google
Links richtig setzen: Google bewertet Seiten, die themenbezogene Links enthalten, besser

Ausgehende Links und PageRank
Rechenspiele

Attribute: Alt, Title
Kleine Häppchen

Barrierefreies Webdesign und Suchmaschinen
Eine Frage des Glaubens

Zurück