HTML/Elemente/meta
Das meta-Element setzt alle zusätzliche Angaben und Informationen, die die Verwaltung des Dokumentes erleichtern und die von keinem anderem Kopfdaten-Element dargestellt werden können.
- Syntax
- Start-Tag: notwendig
- End-Tag: verboten
- WAI‑ARIA‑Rolle
- * keine
- Elternelemente
- Darf vorkommen in:
* head - erlaubte Inhalte
- keine, leeres Element
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="description"
content="Beispiel für exemplarischen Inhalt im meta-Element">
<meta name="keywords" content="example, html, head, meta">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplarische Kopfdaten</title>
</head>
Inhaltsverzeichnis
Siehe auch
Weblinks
Spec (WHATWG): meta-element
| Name | Inhalt | Standardwert | Bedeutung |
|---|---|---|---|
| charset | CDATA | deklariert die Zeichenkodierung die in dem Dokument verwendet wird. Es kann lokal mit dem lang-Attribut auf eine beliebige Zeichenkodierung überschrieben werden. Beachten Sie:
Wenn Sie für HTML5-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.Hauptartikel: Zeichencodierung/Unicode in der Praxis
| |
| content | CDATA | Pflichtattribut | bestimmt für die http-Equiv oder Name-Attribute je nach Zuordnung den jeweiligen Wert. |
| http-equiv | NAME | bestimmt das Verhalten des Servers und des Clienten. | |
| name | NAME | legt Namen fest |
Attribut: Pflichtattribut
Attribut: optionales Attribut
HTTP-Äquivalente
Das meta-Element kann das Attribut http-equiv enthalten. Die Absicht dahinter war, dass Webserver den Dokumentinhalt lesen und aus diesen Angaben HTTP-Header erzeugen. In der Praxis ist das jedoch nur selten der Fall. Stattdessen können diese Angaben ersatzweise verwendet werden, wenn der Webserver sich nicht entsprechend konfigurieren lässt. In der Regel hat ein gleichnamiger HTTP-Header Vorrang vor einer Meta-Angabe. Ebenfalls sinnvoll sind diese Angaben, wenn das Dokument lokal – beispielsweise als Datei von Festplatte – gelesen wird, denn in dem Fall stehen keine HTTP-Header zur Verfügung.
Im Folgenden werden nur diejenigen Attributwerte für http-equiv besprochen, die in einem HTML-Dokument auch Sinn ergeben können. Theoretisch ist die Liste der erlaubten Attributwerte aber länger.
Datei von Originaladresse laden
Häufig abgerufene Web-Seiten werden im Web auf so genannten Proxy-Servern zwischengespeichert. Das ist dann ein so genannter Proxy-Cache. Auch Browser speichern aufgerufene Seiten, und zwar lokal auf dem Rechner des Anwenders. Dabei spricht man vom Browser-Cache. Die Cache-Speicher sparen in vielen Fällen Leitungswege und Ressourcen. Ein Nachteil ist jedoch, dass dem Anwender möglicherweise Daten angezeigt werden, die gar nicht mehr aktuell sind, weil auf der Originaladresse mittlerweile neue Daten liegen. Sie können mit Hilfe einer Meta-Angabe erzwingen, dass die Daten nicht aus einem Cache-Speicher serviert werden, sondern vom Original-Server. Zu empfehlen ist diese Angabe, wenn Sie die Daten einer HTML-Datei häufig ändern und neu ins Web hochladen.
<meta http-equiv="expires" content="0"> veranlassen Sie, dass diese HTML-Datei in jedem Fall von der Originaladresse geladen wird (expires = ungültig werden, ablaufen).Anstelle der 0 können Sie auch eine Zahl angeben. Diese Zahl bedeutet dann die Anzahl Sekunden, nach deren Ablauf der Web-Browser eine Datei, die er im Cache hat, auf jeden Fall wieder vom Server lädt. Mit content="43200" stellen Sie beispielsweise einen Wert von 12 Stunden ein.
Anstelle einer Zahl können Sie aber auch ein bestimmtes Datum und eine bestimmte Uhrzeit angeben. Dadurch bewirken Sie, dass die Daten dieser Datei nach dem angegebenen Zeitpunkt auf jeden Fall vom Original-Server geladen werden sollen. Datum und Uhrzeit müssen Sie im internationalen Format angeben. Beispiel: content="Sat, 12 Jun 2010 12:00:00 GMT". Notieren Sie den Zeitpunkt so wie im Beispiel mit allen Leerzeichen, Doppelpunkten zwischen Stunden, Minuten und Sekunden sowie der Angabe GMT am Ende. Als Wochentagnamen sind erlaubt Mon, Tue, Wed, Thu, Fri, Sat und Sun. Als Monatsnamen sind erlaubt Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov und Dec.
Automatische Weiterleitung zu anderer Adresse (Forwarding)
Diese Angabe ist zwar ziemlich eingebürgert, weshalb sie hier auch beschrieben wird. Automatische Weiterleitungen dieser Art werden jedoch oft kritisiert mit dem Argument, dass die Zielseite für einige Besucher unzugänglich sei. Die meisten Browser unterstützen solche Weiterleitungen zwar, dennoch können verschiedene Browser sie je nach Einstellung ignorieren. Ebenso folgen viele Suchmaschinen-Robots den Weiterleitungen nicht. Ein weiteres Problem ist die Zeitdauer, nach der die Weiterleitung erfolgen soll. Enthält die Seite mit der Weiterleitung noch einen erklärenden Hinweis, benötigen die Besucher eine unbestimmte Zeit zum Lesen, bevor sie der Weiterleitung folgen können. In vielen Fällen ohne einen solchen Hinweis wird die Wartezeit auf 0 gesetzt, sodass die Weiterleitung sofort erfolgt. Dies ist besonders problematisch: Nutzt der Besucher nämlich die Zurück-Navigationsfunktion (Back-Button), wird er direkt wieder nach vorne katapultiert. Somit hängt er auf einer Seite fest.
Benutzt wird diese Angabe in der Praxis oft für das automatische Weiterleiten eines Seitenbesuchers von einer alten Adresse eines Web-Projekts zu einer neuen Adresse. In den meisten Fällen ist es allerdings vorteilhafter, eine „echte“ Weiterleitung mit HTTP-Status-Codes zu benutzen. Dies ist allerdings nur mit serverseitigen Techniken möglich, siehe etwa das Apache-Modul mod_alias.
<meta http-equiv="refresh" content="5; URL=https://wiki.selfhtml.org/">
Mit <meta http-equiv="refresh" content="…"> veranlassen Sie die Weiterleitung zu einer anderen Adresse. Mit content="5; … bestimmen Sie, nach wie vielen Sekunden die Weiterleitung starten soll. Die 5 im Beispiel bedeutet also, dass die aktuelle Seite, nachdem sie geladen ist, 5 Sekunden lang angezeigt wird. Bei einer Wartezeit von 0 wird die angegebene nächste Datei sofort geladen. Nach der angegebenen Zeit wird die Adresse aufgerufen, die mit url=…" angegeben wird. Setzen Sie Ihre gewünschte Anzeigedauer und den Namen der aufzurufenden Adresse ein. Dabei gelten die üblichen Regeln zum Referenzieren in HTML.
Wenn Sie keine URL angeben, wird nach der angegebenen Zeit die aktuelle Seite neu geladen. Dieses Verfahren sollten Sie keinesfalls verwenden, etwa um eine "Push"-Technologie zu implementieren. Sie können nicht vorhersagen, wie lange ein Benutzer zum Lesen der Seite benötigt; die Aktualisierung lässt die Anzeige wieder zum Anfang der Seite springen und verwirrt den Benutzer[1]. Browser bieten eine eingebaute Funktion zum Aktualisieren der Seite, überlassen Sie es Ihren Benutzern, diese nach Bedarf zu verwenden.
Es kann natürlich auch Anwendungsfälle geben, wo eine automatische Aktualisierung gewünscht und erforderlich ist, zum Beispiel, wenn die Webseite als Wallboard dient. Ein Refresh der Seite ist aber auch dort nicht zu empfehlen, weil die Anzeige dabei flackern kann. Programmieren Sie statt dessen mit JavaScript und AJAX-Techniken eine Datenabfrage und den Update der geänderten Bildschirmbereiche. Man spricht hier von einer Poll-Technik (poll bedeutet abfragen). Wenn die angegebene Zahl der Sekunden nur gering ist (Frequenz ist hoch), bedeutet Polling für Netzwerk und Server aber eine unnötig hohe Last. Die schwieriger umzusetzende, aber deutlich bessere Alternative sind hier das Push API oder Web-Sockets, um asynchron und nur bei Bedarf Benachrichtigungen und Updates zu senden. Das Push API setzt allerdings einen Push-Dienst voraus, und Web-Sockets einen dafür geeigneten Server.
Frei definierbare Metadaten
Anstelle eines http-equiv-Attributs kann das meta-Element auch ein name-Attribut enthalten. Damit können beliebige Metainformationen gespeichert werden. Sie sind dafür gedacht, alle möglichen Arten von Software zu unterstützen, wie z. B. Suchmaschinen oder HTML-Editoren. Der HTML-Standard schreibt keine konkreten Meta-Angaben vor, sondern definiert lediglich den grundsätzlichen Aufbau einer Meta-Angabe.
Das meta-Element ist nicht für persönliche Anmerkungen oder Kommentare zum Quelltext der HTML-Datei gedacht. Für solche Angaben können Sie Kommentare definieren.
Viewport einstellen
Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man eine Viewportangabe einstellen. Ohne Angabe setzen Browser die Breite einer Webseite auf 960px und verkleinern, sodass es in den Viewport passt. So erhält der Nutzer einen Überblick und kann dann in die Seite hineinzoomen.
Mit folgender Einstellung können Sie erreichen, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht:
Folgende Angaben sind möglich:
-
initial-scale:(Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt) -
user-scalable:Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no), der default-Wert istyes. -
minimum-scalebzw.maximum-scale: ermöglichen es, den Zoomgrad einzuschränken. (z. B.: maximal scale=2.0 Inhalt kann maximal 2x-fach vergrößert werden.)
Da hiermit etwas eingestellt wird, das mit der Darstellung zu tun hat, ist eine Metaangabe natürlich nicht ideal. Langfristig wird diese Metaangabe auch entfallen können und statt dessen in CSS erfolgen. Die entsprechende Regel @viewport {} ist aber auch schon wieder zurückgezogen worden.
Sie können dieses meta-Element ohne jegliche Nebenwirkungen für jede Ihrer Webseiten einsetzen, um die Darstellung auf Mobilgeräten zu verbessern. Die Benutzbarkeit und der Komfort werden auf keinen Fall leiden.
<meta name="viewport" content="width=device-width, initial-scale=1.0">theme-color
Mit der Angabe einer theme-color ist es möglich, auf mobilen Geräten farbige Adresszeilen und Tabs zu gestalten. In Verbindung mit einem Favicon Ihres Logos in einer größeren Auflösung (192×192px) können Sie Ihre Webseite so unverwechselbar gestalten.[2]
- Browserunterstützung
- caniuse.com
Metadaten zur Datenpflege
Wenn mehrere Personen an einem HTML-Projekt arbeiten, kann es sinnvoll werden, Metadaten einzufügen, die den am Projekt beteiligten Personen weitere Informationen zum aktuellen Dokument zur Verfügung stellen.
Falls die Autorenangabe auch dem Leser des Webdokuments zur Verfügung stehen soll, ist das link-Element die bessere Wahl. Da ein menschlicher Leser üblicherweise nicht den Quellcode einer Seite betrachtet, wird er diese Angabe sonst nicht finden. Vielen Lesern dürfte nicht einmal bewusst sein, dass es so etwas wie „Quellcode“ überhaupt gibt bzw. wie man ihn aufruft. Diese Form von Metadaten ergeben also nur dann einen Sinn, wenn sich diejenigen, die sie benötigen, auf einen einheitlichen Standard geeinigt haben. Idealerweise nutzen sie dann auch Software, die mit diesen Angaben umgehen kann. Dann kann ein solches Vorgehen sehr hilfreich sein.
Metadaten für Suchmaschinen
Es ist möglich, Metaangaben zu machen, die Suchmaschinen bei ihrer Arbeit unterstützen sollen.
Genau wie bei Metadaten zur Datenpflege gilt auch bei Metadaten für Suchmaschinen: Solche Angaben ergeben nur dann einen Sinn, wenn sich beide Seiten auf einen einheitlichen Standard einigen. Der Zusammenhang „Suchmaschine“ und „unterstützen“ wirkt aber offensichtlich auf die Fantasie zahlreicher Menschen unglaublich anregend. Immer wieder finden sich zum Teil abenteuerliche Metatags, die das Suchmaschinenranking verbessern oder die Suchmaschinen in sonst einer Weise beeinflussen sollen.
Im folgenden werden Metatags beschrieben, die im allgemeinen von den gängigen Suchmaschinen verstanden und genutzt werden. Das schließt nicht aus, dass es einzelne Suchmaschinen gibt, die auch noch das ein oder andere sonstige Metatag akzeptieren.
Verwenden Sie für Metadaten HTML-Attribute mit itemprop-Mikrodaten, die Elemente mit Begrifflichkeiten nach schema.org auszeichnen.
Beschreibung
Mit der Angabe description können Sie eine Kurzbeschreibung des Seiteninhalts angeben.
Aufgrund der oben erwähnten missbräuchlichen und inflationären Verwendung wird diese Angabe für Suchmaschinen weitgehend ignoriert.
Allerdings nutzt beispielsweise Google die Kurzbeschreibung als eine Quelle (vgl. Search Console-Hilfe: Seitentitel und Snippets überprüfen), um die Beschreibung in den Suchergebnissen herzustellen. Es ist also sinnvoll, diese Meta-Angabe in der Startseite zu notieren und dabei redaktionell genauso sorgfältig zu sein wie bei dem Text, der im Browser-Fenster angezeigt wird. Fassen Sie den Inhalt dabei so knapp wie möglich zusammen. Der Text sollte nicht mehr als ca. 250 Zeichen beinhalten; längere Texte werden von den Suchmaschinen gekürzt.
Stichwörter
Mit keywords bestimmen Sie Stichwörter für ein Suchprogramm. Ein Anwender, der in der Suchdatenbank des Suchprogramms nach einem dieser Stichwörter sucht, soll die aktuelle HTML-Datei bevorzugt als Suchtreffer angezeigt bekommen, da das Stichwort in dieser Datei ein zentrales Thema ist (keywords = Schlüsselwörter). Trennen Sie die einzelnen Schlüsselwörter durch Kommata. Ein Schlüsselwort kann durchaus aus zwei oder mehreren Einzelwörtern bestehen. Halbe oder ganze Sätze gehören hier allerdings nicht hin, denn dafür gibt es den Beschreibungstext, den Sie bei name="description" notieren können. Umgekehrt ist es sinnvoll, zusammengesetzte Wörter in den keywords zu zerlegen.
Mehrsprachige Angaben
Sie können mehrere gleichartige Meta-Angaben notieren und dabei zwischen verschiedenen Sprachen trennen. Insbesondere Stichwörter und Kurzbeschreibungen des Inhalts können Sie mehrsprachig angeben.
Im Beispiel werden die gleichen Stichwörter in den Sprachen Deutsch, US-Englisch, Britisch-Englisch und Französisch definiert. Dabei wird das Attribut lang benutzt, um die Sprache anzugeben. Als Angabe ist ein Sprachkürzel erlaubt, z. B. de für deutsch, en für englisch, fr für französisch, it für italienisch oder es für spanisch.
Um Nicht-Auslesen bitten
Wenn Sie eine HTML-Datei zwar im Web anbieten, aber trotzdem verhindern möchten, dass die Datei über öffentliche Suchdienste auffindbar sein soll, können Sie eine entsprechende Anweisung als Meta-Information für Suchprogramme notieren.
Achtung!
Mit <meta name="robots" content="noindex"> bitten Sie ein Suchprogramm, Inhalte aus der HTML-Datei nicht an seine Suchdatenbank zu übermitteln (robots = Suchprogramme, noindex = keine Indizierung).
Mit <meta name="robots" content="nofollow"> bitten Sie ein Suchprogramm, Hyperlinks, die in diesem Dokument vorhanden sind, nicht zu folgen (nofollow = nicht folgen). Inhalte aus diesem Dokument darf es jedoch an seine Suchdatenbank übermitteln. Diese beiden Angaben können Sie auch so wie im obigen Beispiel kombinieren.
Profile und Schemata für frei definierbare Metadaten
Wie schon erwähnt, besteht über die hier genannten Metadaten hinaus ein unglaublicher Wildwuchs weiterer Angaben. Das W3-Konsortium beabsichtigte, Dritten die Möglichkeit einzuräumen, feste Profile für Metadaten zu erarbeiten, auf die sich dann ein HTML-Dokument beziehen kann. Allerdings hat sich das in der Praxis nicht durchgesetzt. Im Gegenteil: Versuche, die in diese Richtung gestartet wurden, führten nur zu noch mehr Wildwuchs.
Wenn Sie sich auf ein Profil fest definierter Metadaten beziehen wollen, können sie im head-Element des Dokuments einen eindeutigen URI angeben, der anzeigt, wo das Profil zu finden ist. Sie können ein eigenes Profil erstellen, oder sich, wie das folgende Beispiel, auf ein bestehendes Profil beziehen. Das Beispiel bezieht sich auf die Dublin Core Metadata Initiative, die ein solches Profil erstellt hat.
head-element obsolet.Andererseits verlangen Programme wie Google Scholar eine Einbindung zur besseren Indizierbarkeit wissenschaftlicher Veröffentlichungen.
<head profile="http://dublincore.org/documents/dcq-html/">
<title>Dublin Core</title>
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
<meta name="DC.publisher" content="Matthias Scharwies" />
<meta name="DC.subject" content="Dublin Core Metadaten-Elemente, Anwendungen" />
<meta name="DC.creator" content="Matthias Scharwies" />
<meta name="DCTERMS.rightsHolder" content="Selfhtml e.v." />
</head>
Im head-Element des Dokuments wird die URI von Dublin Core angegeben, auf dessen Profil sich die Auszeichnung bezieht.
Die folgenden name-Attribute verwenden nun standardisierte, von Suchmaschinen und Bibliotheken auswertbare Begriffe nach Dublin Core.
<meta name="DC.format" scheme="DCTERMS.IMT" content="text/html" />
<meta name="DC.type" scheme="DCTERMS.DCMIType" content="Text" />
<meta name="DCTERMS.license" scheme="DCTERMS.URI" content="http://www.gnu.org/copyleft/fdl.html" />
<meta name="DCTERMS.modified" scheme="DCTERMS.W3CDTF" content="2016-10-10" />
Diese Meta-Elemente enthalten auch noch scheme-Attribute, die anzeigen sollen, dass der Inhalt des content-Attributs selbst einem bestimmten Schema folgt. scheme ist also selbst wieder eine Metaangabe, und zwar in Bezug auf content. Dazu muss scheme selbst wieder im Profil beschrieben sein.
automatische Markierung von Telefonnummern steuern
Browser in mobilen Umgebungen versuchen, Telefonnummern zu erkennen und markieren diese entsprechend, sodass durch Klick oder Tap ein Programm geöffnet wird, das eine Telefonverbindung herstellt. Dieses Verhalten können Sie steuern.
Erlaubt sind die beiden content-Werte telephone=yes und telephone=no. Sie sollten die Erkennung von Telefonnummern nur unterbinden, falls auf Ihrer Seite viele Zahlen vorhanden sind, die fälschlicherweise als Telefonnumern erkannt werden.
Mithilfe dieses Attributs lässt sich die Formaterkennung für einzelne Elemente gezielt steuern.}
Quellen
- ↑ W3C: The META element
- ↑ css-tricks.com: Meta Theme Color and Trickery
