Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Tipps für Webdesigner: Was gehört alles in deinen HTML-HEAD

Tipps für Webdesigner: Was gehört alles in deinen HTML-HEAD

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 23. Januar 2018
Bookmarke mich
Share on pocket

YOYABA

CAF Webdesign Agentur

minddraft AG

Der Informations­designer

PRIMA LINE

Chris Hortsch Webdesign

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Philipp Pistis – WordPress Agentur

Prittriching

Niels Neumann Online Marketing

Limburgerhof

Orange Services

München

design andrea becker

Frankfurt am Main

Carmen Hurst | Webdesign

Bad Homburg

Alle Agenturpartner

Jobs

Junior Webdesigner/ Mediengestalter

Innsbruck

Projektmanager/ Projektleiter in München

München

Inside Sales Manager

Karlsruhe

Web Development & Project Management

Remote

Assistent/in der Geschäfts­führung

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Eine Antwort zu „Tipps für Webdesigner: Was gehört alles in deinen HTML-HEAD“
— was ist Deine Meinung?

  1. Jakob S. sagt:
    19. Februar 2018 um 15:41 Uhr

    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…

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.