Denis Potschien 23. Januar 2018

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.


Einen HEAD über dieses Thema machte ich mir übrigens zuerst exklusiv im Dr. Web-Newsletter. Hier kannst du dich kostenlos registrieren.

Das allerwichtigste zuerst

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

Denis Potschien

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. 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…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück