Wie nutze ich Metadaten
und andere Möglichkeiten des <head>?

<head>
HTML Elemente im <head>

HTMLBedeutung
<!DOCTYPE html>Einleitende Dokument-Deklaration (Prolog) im HTML Dokument. Markiert gemäß HTML5 Standard den folgenden Inhalt als HTML.
<base>Basis Adresse der Webseite für Links. Mit der Angabe können relative URL vom Browser in absolute URL umgewandelt werden.
<head>Der <head> beinhaltet <title>, <style>, <style>, <meta>, <link>, <script>, <base>. Man kann in HTML5 allerdings den <head> weglassen und die genannten Inhalte einfach so vor dem <body> angeben. Wird dann aber bon dem Browser wieder sortiert und deshalb sind die gezeigten Beispiele mit HEAD.
<html>Das HTML-Element kommt direkt nach der <!DOCTYPE html>. Es beinhaltet HEAD und BODY sowie alle anderen Elemente. Gibt man es nicht an, dann wird es automatisch von dem Browser eingesetzt. Man kann das HTML-Element mit CSS gestalten. Das HTML-Element hat als Standard display: Block und nimmt 100% der Breite ein und ist so hoch wie sein Inhalt. Die Höhe muss bei Bedarf (z.B. Für einen Verlauf) im CSS definiert werden.
<link>Link auf externe Inhalte wie z.B. CSS Dokumente
<meta>Metainformationen wie Suchwörter, Zusammenfassung etc. des HTML Dokuments. Den META Elementen ist eine eigene Übersicht gewidmet.
<script>Container für client-seitigen Script und seine FUNCTIONS. Scripts liegen überwiegend in der Sprachfamilie Javascript vor. Ein weiteres populäres Beispiel für Inhalt im <script> ist das Javascript Framework jQuery. jQuery basiert auf Javascript und bietet bereits fertige FUNCTIONS. Der <script> wird je nach Bedarf im <head> der Seite oder direkt vor den </body> platziert. Das Laden von <script> sollten das erste Rendern der Seite nicht blockieren.
<style>Im Style Bereich können die CSS-Eigenschaften des HMTL Dokuments eingetragen werden. Im <style> gilt die CSS Syntax. Für die Arbeit bei komplexeren Dokumenten ist der Verweis mittels <link src="name.css"> praktischer. (Minimierte )CSS Angaben im <style> sind bei HTTP und HTTPS jedoch schneller zu laden.
<title>Titel der Seite. Wird im TAB und der Titelleiste des Browsers angezeigt. Erscheint jedoch nicht im <body> der Webseite. Wird der <title> auf der Webseite und nicht im TAB angezeigt, dann hat man meist irgendwo einen Tippfehler.

<meta>
HTML Attribute für <meta>

AttributBedeutung
"revisit-after"
content = "5 days"
Lädt die Suchmaschine ein, nach 5 Tagen erneut die Seite zu indizieren. Wobei Suchmaschinen meist nach eigenen Kriterien vorgehen.
charset = "UTF-8"Zeichencodierung der Webseite. Sehr wichtige Angabe für die korrekte Darstellung der Umlaute wie ä oder ü. UTF-8 ist für die meisten Webseiten zu empfehlen.
content = "..."Der eigentliche Wert bei Metadaten oder die Pragma-Directive bei http-equiv. z.B. bei description die Zusammenfassung der Seite oder bei Stichworten das konkrete Stichwort. Das wichtige Attribut content=" ... " ergänzt viele andere Meta-Attribute wie name, description, author etc.
Dublin Core MetadateAlte Sammlung von Metainformationen, die sich nicht wirklich durchgesetzt haben. Dabei wird zu DC.identifier, DC.creator, DC.date.created, DC.date.modifed, DC.format, DC.coverage, DC.publisher mit content = Angaben gemacht.
http-equiv =http-equiv ist die Kurzschreibweise für "Gleichbedeutend mit dem HTTP-Header-Feld. Sie sind "Pragma-Directiven". Sie legen fest wie der Besucher die Seite verarbeitet. Genutzt werden können pragma, content-type, default-style und refresh (Siehe jeweilige Karte). In HTML5 sind set-cookie und content-language kein Standard mehr, daher gibt es für diese 2 auch keine Karte.
http-equiv = "content-type" content="utf-8"Hat die gleichen Auswirkungen wie charset="utf-8". Sollte nur benutzt werden wenn XHTML immigriert wird.
http-equiv = "imagetoolbar" content = "false"Verhindert im Internetexplorer das Rechtsklick-Kontext Menu um z.B. Bilder zu speichern
http-equiv = "pragma"
content = "no-cache"
Der Zusatz content="no-cache" verhindert dass die Seite auf Proxy-Servern in den Cache gespeichert wird.
http-equiv = "refresh"
content = "5;
URL = http:...">
http-equiv="Refresh" veranlasst den Browser die Seite oder eine andere Seite neu zu laden. Mit content="5" z.B. wird nach 5 Sekunden das HTML Dokument neu geladen. Ist mit dem URL= eine andere Seite bestimmt, dann wird diese nach der Zeit geladen.
http-equiv = "refresh" content = "600"http-equiv="Refresh" ohne URL veranlasst den Browser diese Seite neu zu laden. Mit content="600" z.B. wird alle 600 Sekunden das HTML Dokument neu vom Server geladen. Es gibt heutzutage mit Javascript und AJAX elegantere Möglichkeiten aktuellen Content auf der Seite zu haben. Dieses zwanghafte Laden über http-equiv = "refresh" kann Benutzer irritieren und z.B. halbausgefüllte Formulare auf Null setzen.
http-equiv = "X-UA-Compatible" content="..."Der Kompatibilitätsmodus des Internet Explorers. Hier kann definiert werden, welche Version des IE unterstützt wird. Spielt für Webdesigner eine größere Rolle, die auch ältere Versionen des IE unterstützen müssen.
name = "..."Es können eigene Gruppen für Metadaten angelegt werden. Als Name können alle beliebigen Metainformationen gespeichert werden. Als Standard-Meta-Namen gelten: author, generator, keywords, description. Zu dem Attribut name gehört immer der Wert der mit dem Attribut content= eingeleitet wird.
name = "author" content="..."Angabe zu dem Autor des Dokuments.
name = "date" content = "2016-02-01"Angaben der letzten Änderung. Dies sollte automatisiert geschehen, da es sonst leicht vergessen wird.
name = "description" content="..."Zusammenfassung der Seite, z.B. bei der Google Suche
name = "google"
content= "nositelinkssearchbox"
Verbietet Google ein Suchfeld direkt für die Webseite anzuzeigen in der Google Suche anzuzeigen.
name = "keywords" content= "..."Stichwörter für die Suchmaschine. Aufgrund des enormen Missbrauchs in der Vergangenheit werden diese heute oft ignoriert. Echter Content ist King.
name = "robots"
content = "index, follow"
Legt fest ob Suchmaschinenroboter die Seite indizieren sollen. Index: Seite indixieren. NoIndex: Seite nicht indixieren. Follow: Links folgen. NoFollow: Links nicht folgen. Index, NoFollow: Seite indixieren, Links nicht folgen. NoIndex, Follow: Seite nicht indixieren, Links folgen All: Seite indizieren, Links folgen. Wenn man möchte dass die Seite und alle ihre Links indiziert wird wählt man die mit Komma getrennte Kombination aus index und follow: "robots" content="index, follow".
name = "viewport"
content = "minimum-scale: 1,
maximum-scale: 3">
Bestimmt die möglichen Vergrößerungsstufen beim Zoomen des Nutzers. Diese Kontrolle, laut Nutzer-Tests, beeinträchtigt die Zugänglichkeit und sollte im Allgemeinen vermieden werden.
name = "viewport"
content = "user-scalable: no">
Der Viewport enthält wesentliche Angaben für mobile Seiten. Man könnte z.B. das Zoomen mit user-scalable: no verbieten. Dies ist allerdings meist nicht zu empfehlen, da es für eine viele Nutzer eine unangenehme Einschränkung darstellt. user-scalable könnte mit width=device-width, initial-scale und minimum-scale bzw. maximum-scale: in einen meta Tag zusammgenfasst werden.
name = "viewport"
content = "width = 1200px"
Man kann den Viewport strikt definieren. Dies dürfte bei den meisten Anwendungen jedoch erhebliche Nachteile mit sich führen. Es passt nämlich nur selten. Die flexible Angabe mit content="width=device-width ist daher zu empfehlen.
name = "viewport"
content = "width = device-width,
initial-scale = 1.0"
Praktischer Hinweis für mobile Browser. Die Breite wird auf die Ausgabebreite des jeweiligen Gerätes gesetzt und die Zoomstufe bei der ersten Ansicht ist 1. Durch das Komma im Content werden zwei Angaben, zu width und dem initial-zoom, zusammengefasst. Wichtig ist dabei width = device-width. Nur damit ist die Webseite flexibel und geräteunabhängig. Durch die definierte Zoomstufe auf 1 ist die Schriftgröße auf dem mobilen Gerät gleich groß, egal ob im Hochformat (Porträt) oder Querformat (Landscape) gehalten. Das Drehen des Gerät würde ansonsten meistens zu einer Änderung der Optik führen. Wobei man allerdings diesen Effekt durch definierte @media Angaben im CSS auch ausschalten kann. Entscheidend ist width = device-width.
name = generator content="..."Angabe des Editors der für die Erstellung genutzt wurde. Manche Software schreibt sich so in den head.
property= “og:description“ content=“ ... “Zusammenfassung der Seite. Bestandteil des Open Graph Standards. Wird z.B. von Google + und Facebook genutzt.
property= “og:image“ content=“ http:// ... “Vorschaubild der Seite. Bestandteil des Open Graph Standards. Wird z.B. von Google + und Facebook genutzt.
property= “og:title“ content=“ ..."Titel der Seite in der Vorschau von Social Media Diensten. Bestandteil des Open Graph Standards. Wird z.B. von Google + und Facebook genutzt.
property= “og:type“ content=“website“Bestandteil des Open Graph Standards. Wird z.B. von Google + und Facebook genutzt.
property= “og:url“ content=“http://...“Link zu der Seite für Social Media Dienste. Bestandteil des Open Graph Standards. Wird z.B. von Google + und Facebook genutzt.
Twitter CardsVergelichbar zum Open Graph Standard hat Twitter ein Set von eigenen Meta Daten, die Twitter Cards. twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image:src

<link>
HTML Attribute für <link>

AttributBedeutung
href="..."Angabe auf welche Datei mittels relativem oder absoluten Pfad verlinkt wird.
media="screen"(orientation: portrait) and (min-width: 1px) Screen, Print etc.
rel="stylesheet"Zeigt die Beziehung zu der mit href="..." eingeleiteten Quelle.
type="text/css"Typ des Mediums. Z.B. ein externes CSS um mehrere HTML Dokumente mit einer CSS Definition zu versorgen. Liste aller Typen ist ist bei iana.org definiert. ACHTUNG: Bei Javascript und bei CSS muss der Type in HTML 5 nicht mehr angegeben werden.

► Weitere Infos

Externe Quellen

W3C Spec

https://www.w3.org/TR/html5/document-metadata.html

W3C HTML5 Definition für den HTML HEAD mit seinen Inhalten wie den Möglichkeiten zu META oder LINK.


CSS Device Adaptation Module Level 1

http://www.w3.org/(...)/#viewport-desc

W3C Working Draft vom 29 März 2016 zu dem Viewport.


Darstellungsbereich konfigurieren

https://developers.google.com/(...)/ConfigureViewport?

Google bewertert Seiten ohne anpassbaren Viewport schlechter. In diesem Artikel in deutscher Sprache im Entwickler-Bereich bei Google gehen sie etwas in das Detail.


HEAD

https://github.com/joshbuchea/HEAD

A list of EVERYTHING that could go in the HEAD of your document


A tale of two viewports — part two

http://www.quirksmode.org/mobile/viewports2.html

Englischer und sehr detailierter Artikel das Verhalten des Viewports.


Viewport Tag to control mobile layout

https://developer.mozilla.org/(...)/Mobile/Viewport_meta_tag

Englischer Artikel der Mozilla Foundation über den meta tag viewport und deren Erfahrungen bei dem Einbau in ihren Browser.


Configuring the Viewport

https://developer.apple.com/(...)/UsingtheViewport.html

Englischer Artikel von Apple über den Viewport.


The Open Graph protocol

http://ogp.me/

Englischer Artikel zu dem Metadaten Open Graph protocol das besonders für die Vorschau in Social Media Diensten wie Facebook und Google+ sehr interessant ist. Sie bieten die Möglichkeit weitergehender Anwendungen und Auswertung.


Twitter Cards

https://dev.twitter.com/cards/getting-started

Englischer Artikel zu dem Metadaten für die Vorschau in Twitter.