Tipps für Webdesigner: Was gehört alles in deinen HTML-HEAD
Der HTML-Kopf ist ein wichtiger Bestandteil eines jedes HTML-Dokumentes. Dort wird der Titel festgelegt und JavaScript- sowie CSS-Dateien eingebunden. Aber das „<head>“-Element hat in den letzten Jahren zunehmend an Bedeutung gewonnen. Denn auch die Einbindung anderer Webdienste wie Suchmaschinen und soziale Netzwerke erfolgt hier.
Die Website gethead.info gibt dir eine sehr umfangreiche Übersicht an die Hand, in der alle notwendigen und wichtigen Elemente des HTML-Kopfs aufgelistet sind.
Zunächst trägt die Website zusammen, was in keinem „<head>“-Element fehlen darf. Dazu gehören das „<title>“-Element ebenso selbstverständlich wie einige „<meta>“-Elemente. So erfordert HTML5 immer die Angabe des Zeichensatzes über eine Meta-Angabe. Und der sollte mittlerweile nichts anderes als UTF-8 sein.
Außerdem empfiehlt dir gethead.info einige weitere Meta-Angaben, die ganz grundsätzlich für eine optimierte Darstellung deiner Website wichtig sind. Zum Beispiel sollte über ein „<meta>“-Element der Viewport deiner Website angegeben werden. Und dieser sollte so gewählt sein, dass die Breite des Displays immer auch die Breite deiner Website darstellt und die Seite nicht skaliert wird.
Diese Einstellung setzt natürlich voraus, dass deine Website responsiv und für Mobilgeräte gestaltet ist. Aber dies versteht sich mittlerweile ja eigentlich von selbst.
Darüber hinaus gehören die Einbindung von Stylesheets und JavaScripts in den HTML-Kopf, insofern diese vor dem HTML-Body geladen werden sollen. In vielen Fällen ist es sinnvoll, CSS- und JavaScript-Dateien am Ende des „<body>“-Elementes zu laden. Denn alles, was im Head geladen wird, verlangsamt das Laden und Darstellen des eigentlichen Inhaltes.
Meta-Angaben für Suchmaschinen
Soll eine Suchmaschine ein HTML-Dokument und darin verlinkte Seiten bei der Indizierung berücksichtigen? Auch die Beantwortung dieser Frage gehört in den HTML-Head und wird über die Meta-Angabe „robots“ und den Werten „index“, „noindex“, und „follow“ sowie „nofollow“ festgelegt.
Meta-Angaben für Suchmaschinen
Aber gethead.info listet dir noch weitere „<meta>“-Elemente auf, mit denen du zum Beispiel diverse Suchmaschinen verifizieren kannst. Das ist zum Beispiel nötig, um Googles Such-Konsole nutzen zu können – gilt aber auch für andere Suchmaschinen wie Bing oder Dienste wie Pinterest.
Verweise im HTML-Kopf festlegen
Neben Stylesheets werden zahlreiche andere Verweise über das „<link>“-Element im HTML-Kopf eingebunden. Zur Vermeidung von doppeltem Inhalt gibst du zum Beispiel über die „<link>“-Angabe „canonical“ einen Link an, der auf ein inhaltlich identisches Dokument verweist, welches einfach nur über eine andere URL erreichbar ist.
Auch RSS-Feeds und die Einbindung von Open Search erfolgen über jeweilige Verlinkungen im „<head>“-Element.
Ebenfalls Verweise auf Archive, Autoren- und Indexseiten legst du hiermit fest. Bei Seiten mit Paginierung verlinkst du auf die jeweils vorherige und nachfolgende Seiten. Das ist für Suchmaschinen ebenso interessant wie für einige Browser, die den Aufbau deiner Website so besser nachvollziehen können.
Soziale Netzwerke zum Teilen einbinden
Soziale Netzwerke spielen eine große Rolle. Willst du Artikel oder andere Dokumente deiner Website auf Facebook oder Twitter teilen, ist es ratsam, entsprechende Tags im Head zu platzieren, damit Titel, Bild und Beschreibung des Dokumentes korrekt wiedergegeben werden können.
Einbindung von Open-Graph-Angaben für Facebook
Neben dem Open-Graph-Standard, welches Facebook unterstützt und auch von anderen Diensten wie Google+ und LinkedIn interpretiert wird, gibt es für Twitter mit den sogenannten Twitter-Cards eigene Tags zu Einbindung.
Besonderheiten für Browser und Betriebssysteme
Wenn es darum geht, eine Website als Favorit zu speichern und irgendwo abzulegen, haben jeder Browser und jedes Betriebssystem so ihre Besonderheiten.
So lassen sich unter Windows 10 spezielle Icons und Farben festlegen, mit der ein Favorit als Kachel abgelegt wird. Apple hingegen hinterlegt einen Verweis mit speziellen Icons, die du in verschiedenen Größen einbindest.
Gibt es für deine Website eine eigene App? Dann kannst du auch dies über eigene Angaben im HTML-Kopf angeben. Sowohl Apple als auch Android bieten für ihre jeweiligen App-Stores entsprechende Verlinkungen an. Ruft man deine Website mit einem jeweiligen Smartphone oder Tablet auf, werden Besucher auf die App hingewiesen.
Fazit
Die Website gethead.info ist nicht nur für Einsteiger eine interessante Anlaufstelle, sondern auch für Fortgeschrittene. Die Liste ist recht umfangreich und bietet eine Menge Informationen in Kurzform.
Neben den kurz vorgestellten Angaben gibt es noch viele weitere, die teils sehr speziell sind. So werden unter anderem auch Meta-Angaben für recht unbekannte Browser angeboten.
Außerdem gibt es auch noch einige Tipps, wie man durch entsprechende Auszeichnung die Performance deiner Website verbessern kann, sowie Links zu verwandten Projekten.
Die Website gethead.info steht unter der Public-Domain-Lizenz und wird auch auf GitHub gehostet. Dort kannst du dir verschiedene Snippets als Vorlage für deine eigenen Webprojekte herunterladen.
Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Ein Kommentar
Ein wirklich sehr interessanter und informativer Beitrag Dennis!
Ich habe letztes Jahr erst mein Abitur gemacht und interessiere mich seit ungefähr 3 Monaten für Html bzw. Webentwicklung im allgemeinen. Ich habe auch schon eine meiner Meinung nach sehr gute Idee für ein Webprojekt, mit dem ich auch schon meine ersten Taler einnehmen könnte. Anfangs wollte ich die Website selbst bauen, aber ich realisiere Zunehmens, dass das weder ein Ein-Mann-Job, noch ein Job für jemanden mit 3 Monaten „Erfahrung“ ist. Ein paar meiner ehemaligen Mitschüler waren auf dem Gebiet sehr versiert, aber ich glaube, das übersteigt auch deren Können. Deshalb spiele ich massiv mit dem Gedanken, ein direkt auf Webentwicklung in Berlin spezialisiertes Unternehmen mit meinem Abi-Geld zu beauftragen. Ich sehe das wie eine Investition.^^
Nun zu meiner Frage:
Ich will eigentlich auch etwas selber machen. Was glaubst du, wäre meinem Können angemessen? Die Texte etc. mach ich ja eh selber, aber ich will am Ende auch sagen können: „Der kleine Teil da, im Quelltext, der ist von mir! “ Vielleicht das responsive Design? Oder der Head?
Ps.: Auf eine Vorlage habe ich auch nicht wirklich Lust, da die meiner Meinung nach schon so viel benutzt werden, dass die auch ein bisschen an Seriosität verlieren. Die sehen ja auch alle gleich aus…
Ein wirklich sehr interessanter und informativer Beitrag Dennis!
Ich habe letztes Jahr erst mein Abitur gemacht und interessiere mich seit ungefähr 3 Monaten für Html bzw. Webentwicklung im allgemeinen. Ich habe auch schon eine meiner Meinung nach sehr gute Idee für ein Webprojekt, mit dem ich auch schon meine ersten Taler einnehmen könnte. Anfangs wollte ich die Website selbst bauen, aber ich realisiere Zunehmens, dass das weder ein Ein-Mann-Job, noch ein Job für jemanden mit 3 Monaten „Erfahrung“ ist. Ein paar meiner ehemaligen Mitschüler waren auf dem Gebiet sehr versiert, aber ich glaube, das übersteigt auch deren Können. Deshalb spiele ich massiv mit dem Gedanken, ein direkt auf Webentwicklung in Berlin spezialisiertes Unternehmen mit meinem Abi-Geld zu beauftragen. Ich sehe das wie eine Investition.^^
Nun zu meiner Frage:
Ich will eigentlich auch etwas selber machen. Was glaubst du, wäre meinem Können angemessen? Die Texte etc. mach ich ja eh selber, aber ich will am Ende auch sagen können: „Der kleine Teil da, im Quelltext, der ist von mir! “ Vielleicht das responsive Design? Oder der Head?
Ps.: Auf eine Vorlage habe ich auch nicht wirklich Lust, da die meiner Meinung nach schon so viel benutzt werden, dass die auch ein bisschen an Seriosität verlieren. Die sehen ja auch alle gleich aus…