Awesome

HEAD

Alles was in den Kopf-Bereich einer HTML-Datei kommen kann.

Dies ist die deutsche Übersetzung des Dokumentes gethead.info von Josh Buchea .

Inhaltsverzeichnis

Empfohlenes Minimum
Elemente
Meta
Link
Icons
Social
Browser / Plattformen
Browser (Chinese)
App Links
Weitere Ressourcen
Verwandte Projekte
Andere Formate
Übersetzungen
Beitragen
- Beitragende
Autor
Lizens

Empfohlenes Minimum

Unten sind die essentiellen Elemente eines jeden Webdokumentes (Webseiten/Apps):

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- † -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
  Diese 3 Meta-Tags *müssen* in jedem <head>-Element als erstes stehen, 
  um sicherzustellen, dass das Dokument richtig dargestellt wird.
  Alle anderen Elemente im <head>-Element sollten *nach* diesen Tags stehen.

  † Man benutzt den content="ie-edge" Tag, wenn das Projekt 
    Internet Explorer vor Version 11 unterstützt.
 -->
<title>Seiten Titel</title>

⬆ nach oben

Elemente

Gültige <head> Elemente schließen meta, link, title, style, script, noscript, und base ein.

Diese Elemente stellen Informationen bereit, wie das Dokument von den verschiedensten Webtechnologien aufgenommen und dargestellt werden soll, z.B. von Browsern, Suchmaschinen, Robotern, usw.

<!--
  Legt die Zeichenkodierung für dieses Dokument fest, so 
  das alle Zeichen innerhalb UTF-8 (zum Beispiel Umlaute)
  richtig dargestellt werden.
-->
<meta charset="utf-8">

<!-- Legt den Titel des Dokumentes fest -->
<title>Page Title</title>

<!-- Legt die Basis URL für alle relativen URLs 
  innerhalb des Dokumentes fest -->
<base href="http://example.com/page.html">

<!-- Verlinkt zu einem externen CSS-Dokument -->
<link rel="stylesheet" href="styles.css">

<!-- Für CSS innerhalb des Dokumentes -->
<style>
  /* ... */
</style>

<!-- JavaScript & No-JavaScript Tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- Kein JS - Alternative -->
</noscript>

⬆ nach oben

Link

<!-- Verlinkt ein externes Stylesheet -->
<link rel="stylesheet" href="http://example.com/styles.css">

<!-- Verhindert Probleme mit verdoppelten Inhalten -->
<link rel="canonical" href="http://example.com/article/?page=2">

<!-- Verlinkt zu einer AMP HTML Version des aktuellen Dokumentes -->
<link rel="amphtml" href="http://example.com/path/to/amp-version.html">

<!-- Verlinkt zu einer JSON-Datei, welche Installations Daten für eine WebApp bereitstellt -->
<link rel="manifest" href="manifest.json">

<!-- Verlinkt zu Informationen über den/die Autor(en) des Dokumentes -->
<link rel="author" href="humans.txt">

<!-- Referriert zu einem Statement zum Urheberrecht im Zusammenhang mit dem angegebenen Link -->
<link rel="license" href="copyright.html">

<!-- Gibt eine Referenz zu einem Bereich im Dokument, welcher eine andere Sprache benutzt -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Gibt Informationen über den Autor oder eine andere Person -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Verlinkt zu einem Dokument, welches Aufzeichnungen, Dokumente oder andere Materialien von historischem Interesse enthält -->
<link rel="archives" href="http://example.com/archives/">

<!-- Verlinkt zu einer Top Level Ressource in einer hierarchischen Struktur -->
<link rel="index" href="http://example.com/article/">

<!-- Stellt eine Referenz auf sich selbst zur Verfügung - sinnvoll wenn ein Dokument mehrere mögliche Referenzen hat -->
<link rel="self" type="application/atom+xml" href="http://example.com/atom.xml">

<!-- Das erste, letzte, vorherige und nächste Dokument in einer Serie von Dokumenten -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

<!-- Wird genutzt, wenn ein Blog von einer dritten Partei bereitgestellt wird. -->
<link rel="EditURI" href="http://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Formuliert einen automatischen Kommentar, wenn ein anderer WordPress Blog auf den eigenen WordPress Blog verlinkt -->
<link rel="pingback" href="http://example.com/xmlrpc.php">

<!-- Informiert eine URL, wenn in diesem Dokument auf diese verlinkt wird -->
<link rel="webmention" href="http://example.com/webmention">

<!-- Erlaubt das Posten an die eigene Domain mit einem Mircopub Client -->
<link rel="micropub" href="http://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="http://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="http://example.com/">
<link rel="preload" href="image.png" as="image">

📖 Link Relations (auf Englisch)

⬆ nach oben

Icons

<!-- Für IE 10 und älter -->
<!-- Platziere favicon.ico in dem Root Ordner - keine Tags notwendig -->

<!-- Icon in der höchsten Auflösung, die gebraucht wird -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">

<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

📖 All About Favicons (And Touch Icons) (auf Englisch)
📖 Creating Pinned Tab Icons (auf Englisch)
📖 Favicon Cheat Sheet (auf Englisch)
📖 Icons & Browser Colors (auf Englisch)

⬆ nach oben

Social

Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="http://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Titel der Webseite">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Beschreibung der Webseite">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

📖 Facebook Open Graph Markup
📖 Open Graph protocol (auf Englisch)
🛠 Test your page with the Facebook Sharing Debugger (auf Englisch)

Twitter Card

<meta name="twitter:card" content="Zuammenfassung">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="http://example.com/page.html">
<meta name="twitter:title" content="Titel der Webseite">
<meta name="twitter:description" content="Beschreibung der Seite in weniger als 200 Zeichen">
<meta name="twitter:image" content="http://example.com/image.jpg">

📖 Getting started with cards — Twitter Developers (auf Englisch)
🛠 Test your page with the Twitter Card Validator (auf Englisch)

Twitter Privatsphäre

Wenn Tweets in die Webseite eingebunden werden, dann kann Twitter Informationen von der Webseite nutzen, um Twitter Nutzern passende Inhalte anzuzeigen. Mehr über Twitters Privatsphäre Einstellungen.

<!-- verbietet Twitter die Nutzung der Inhalte der Webseite für Personalisierungszwecke -->
<meta name="twitter:dnt" content="on">

Google+ / Schema.org

<html lang="" itemscope itemtype="http://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <meta itemprop="name" content="Titel der Seite">
      <meta itemprop="description" content="Beschreibung der Seite in weniger als 200 Zeichen">
      <meta itemprop="image" content="http://example.com/image.jpg">

Hinweis: Dieses Markup verlangt Attribute im ersten html-Tag

🛠 Testen Sie die Webseite mit dem Structured Data Testing Tool (auf Englisch)

Pinterest hilft zu verhindern, das Leute Dinge von der Webseite speichern können. Pinterests Hilfecenter. Die description ist optional.

<meta name="pinterest" content="nopin" description="Du kannst nicht von dieser Webseite speichern!">

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- Die URL der Webversion des entsprechenden Artikels -->
<link rel="canonical" href="http://example.com/article.html">

<!-- Der Style der für diesen Artikel genutzt werden soll -->
<meta property="fb:article_style" content="myarticlestyle">

📖 Creating Articles - Instant Articles
📖 Code Samples - Instant Articles

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">

📖 oEmbed format (auf Englisch)

⬆ nach oben

Browser / Plattformen

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Verhindert die automatische Erkennung und Formattierung von Telefonnummern -->
<meta name="format-detection" content="telephone=no">

<!-- Start Icon (180x180px oder größer) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Start Screen Bild -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Start Icon Titel -->
<meta name="apple-mobile-web-app-title" content="App Titel">

<!-- Erlaubt Standalone (full-screen) Modus -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Aussehen der Statusbar (hat keinen Effekt, wenn nicht Standalone Modus aktiv ist) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- iOS app deep linking -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

📖 Configuring Web Applications (auf Englisch)

Google Android

<meta name="theme-color" content="#E64545">

<!-- Dem Startbildschirm hinzufügen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Mehr Infos: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Verhindert Übersetzung -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Zwingt IE 8/9/10 die neueste Rendering Engine zu nutzen -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Verhindert die automatische Erkennung und Formattierung von Telefonnummern durch die Skype Toolbar Browser Erweiterung -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- IE10: Verhindert das Hervorheben von Links durch Berührung (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->
<meta name="msapplication-tap-highlight" content="no">

<!-- Gepinnte Seiten (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->
<meta name="application-name" content="Beispiel Titel">
<meta name="msapplication-tooltip" content="Eine Beschreibung darüber, was die Seite tut.">
<meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml">
<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="/path/to/tileimage.jpg">

<meta name="msapplication-config" content="http://example.com/browserconfig.xml">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2">
<meta name="msapplication-task-separator" content="1">

⬆ nach oben

Browser (Chinese)

360 Browser

<!-- Wählt die Reihenfolge der Rendering Engines -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Hält den Bildschirm in einer bestimmten Orientierung -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Zeigt das Dokument im Vollbildmodus -->
<meta name="x5-fullscreen" content="true">

<!-- Zeigt das Dokument im "application mode" (Vollbild, usw.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Hält den Bildschirm in einer bestimmten Orientierung -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Zeigt das Dokument im Vollbildmodus -->
<meta name="full-screen" content="yes">

<!-- UC Browser zeigt Bilder auch dann an, wenn in "text mode" -->
<meta name="imagemode" content="force">

<!-- Zeigt das Dokument im "application mode" (Vollbild, verbotene Bewegungen, usw.) -->
<meta name="browsermode" content="application">

<!-- Verhindert den "Nachtmodus" des UC Browsers für dieses Dokument -->
<meta name="nightmode" content="disable">

<!-- Vereinfacht das Dokument, um Datentransfer zu reduzieren -->
<meta name="layoutmode" content="fitscreen">

<!-- Verhindert im UC Browser das Vergößern der Schrift, wenn viele Wörter im Dokument sind -->
<meta name="wap-font-scale" content="no">

📖 UC Browser Docs (auf Chinesisch)(Download)

⬆ nach oben

App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="http://applinks.org/documentation">