Menü

Schlaues Köpfchen

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

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" />

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

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

<!-- dann js -->
<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:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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": (!)

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

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:

<meta property="og:image" content="http://www.site-check.cc/files/themen/zoom/vorschaubild.jpg"/>

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

<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>

Das - in allen mögliche 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 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.

Antworten