HTML/Elemente/meta

Aus SELFHTML-Wiki
< HTML‎ | Elemente(Weitergeleitet von Meta)
Wechseln zu: Navigation, Suche

Das meta-Element setzt, wenn das name-Attribut verwendet wird, zusätzliche Angaben und Informationen, die die Verwaltung des Dokumentes erleichtern und auch festlegen können, wie der Browser das Dokument anzeigt (die Metadaten zum Dokument).
Zusammen mit dem charset-Attribut teilt es dem Browser mit, welche Zeichencodierung der Server für das Dokument verwendet hat.
Drittens kann es mit dem http-equiv Attribut Werte für HTTP-Header ergänzen, die der Server nicht geliefert hat.
Viertens ist es mit dem itemprop-Attribut möglich, an beliebiger Stelle im Dokument ein Attribut für ein Microdatenelement festzulegen.

Syntax
Start-Tag: notwendig
End-Tag: verboten
WAI‑ARIA‑Rolle
  • keine
Elternelemente
Darf vorkommen in:
  • Immer im head-Element
  • Wenn das itemprop-Attribut verwendet wird: auch in Elementen mit phrasing content
erlaubte Inhalte
keine, leeres Element
Beispiel
<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>
Meta-Elemente können das Browserverhalten steuern oder Informationen bereitstellen, die beispielsweise von Suchmaschinen genutzt werden können.
Beachten Sie:
  • Sie müssen pro <meta>-Element genau eines der Attribute charset, name, http-equiv oder itemprop verwenden.
  • Das content-Attribut ist Pflicht, wenn Sie name, http-equiv oder itemprop verwenden. Zusammen mit charset ist es hingegen verboten.
Attribute
Name Inhalt Standardwert Bedeutung
charset CDATA deklariert die Zeichenkodierung die in dem Dokument verwendet wird.
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.
content CDATA gibt den Wert an, der für ein Metadatenfeld, einen HTTP-Header oder ein Microdatenelement zu setzen ist (je nachdem, welches weitere Attribut verwendet wird)
itemprop Tokenlist gibt einen oder mehrere Namen von Microdatenwerten an, die den mit content festgelegten Wert erhalten sollen
http-equiv NAME gibt den Namen des HTTP-Antwortheaders an, für den ein Wert gesetzt werden soll (Details hier)
name NAME gibt den Namen des Metadatenelements an, dessen Wert gesetzt werden soll

Attribut: Pflichtattribut
Attribut: optionales Attribut

Siehe auch

Weblinks

Spec (WHATWG): meta-element

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.

expires - 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.

Beispiel
<meta http-equiv="expires" content="0">
Mit <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.

refresh - 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.

Beispiel
<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.

x-ua-compatible - Veraltete Internet Explorer Verhaltensweisen auswählen

Diesen http-equiv Wert findet man immer noch an einigen Stellen und in manchen HTML-Vorlagen. Bitte verwenden Sie ihn nicht. Das Verhalten des Microsoft Internet Explorer war ursprünglich weit von den sich entwickelnden Webstandards entfernt, und Microsoft hat ihn Schritt für Schritt an die Standards angepasst. Die Folge war, dass alte Seiten, die auf das Verhalten älterer IE-Versionen ausgelegt waren, nicht mehr korrekt dargestellt wurden. Mit x-ua-compatible konnte man den IE für die Anzeige einer Seite in einen „Altlast-Modus“ versetzen, der das Non-Standard-Verhalten nachbildete (der IE schleppte 5 davon mit sich herum).

Die heutigen Browser, Microsoft Edge eingeschlossen, ignorieren x-ua-compatible, und den Internet Explorer gibt es nur noch als bis 2028 befristete Emulation in MS Edge. Wenn Sie eine Seite betreuen, die diesen Schalter braucht, dann müssen Sie sie unverzüglich modernisieren! Die Anzahl der Anwender, die sie korrekt darstellen können, strebt unaufhaltsam gegen Null.

Quellen

  1. W3C: The META element