HTML/Kopfdaten/meta

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

meta-Elemente enthalten Informationen über zusätzliche Angaben, die beispielsweise die Verwaltung des Dateiinhalts erleichtern sollen.

Inhaltsverzeichnis

[Bearbeiten] Allgemeines zu Meta-Angaben

  • IE 1
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • HTML 2.0
  • XHTML 1.0

Als Metainformationen bezeichnet man allgemein Daten, die Informationen über andere Daten enthalten. In HTML gibt es dafür das meta-Element, mit dem Zusatzangaben bereitgestellt werden können, die das Parsen der Datei oder die Verwaltung des Dateiinhalts erleichtern sollen. Man kann auf Meta-Elemente verzichten oder beliebig viele nutzen. Jedes Meta-Element setzt sich dabei zumindest aus Attributen zu „Eigenschaft“ und „Inhalt“ zusammen. Wenn Sie sich z.B. einen Film ansehen, bekommen Sie im Vor- und Abspann viele Metainformationen, wie etwa den Namen des Regisseurs. Daraus könnten Sie folgende Meta-Angabe machen:

Beispiel: meta-Elemente in HTML
<head> <meta name="Regisseur" content="Peter Jackson"> </head>
Beispiel: meta-Elemente in xHTML
<head> <meta name="Regisseur" content="Peter Jackson" /> </head>

Sie können mit Meta-Elementen also quasi beliebige Angaben, z.B. zum Autor und zum Inhalt des Dokuments, notieren. Darüber hinaus kann man mit dem Meta-Element aber auch HTTP-Befehle absetzen, zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer anderen Adresse.

[Bearbeiten] 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.

[Bearbeiten] Zeichencodierung

Grundsätzlich gibt es drei Möglichkeiten zur Festlegung der Zeichencodierung:

  1. das BOM (außer im Internet Explorer),
  2. eine Kodierungs-Angabe im HTTP-Header der Datei (im Webserver oder einem Skript festgelegt),
  3. eine Meta-Angabe charset wie im folgenden Beispiel.
Beachten Sie: Eine Angabe zur Zeichencodierung durch ein BOM hat Vorrang vor einer Angabe im HTTP-Header und diese wiederum hat Vorrang vor der Meta-Angabe. Eine zusätzliche Meta-Angabe ist in solchen Fällen wirkungslos, aber als Zusatz-Information hilfreich.
Beispiel: Zeichencodierung
<!-- HTML 4.x --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- HTML5 --> <meta charset="utf-8">

Bei der Meta-Angabe content-type spielt nur der Parameter zur Zeichencodierung (charset) eine Rolle. Den Content-Type selbst zu ändern ist nicht sinnvoll, er ist bei HTML-Dokumenten immer text/html. Diese charset-Angabe ist für den Web-Browser wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Zeichen des Dokuments als Bytes notiert sind. Der Inhalt des content-Attributes (in Anführungszeichen eingeschlossen) wird wie folgt notiert: Die Content-Type-Angabe für HTML text/html, gefolgt von einem Semikolon und dem Parameternamen charset, einem = und einer Angabe zur Zeichencodierung, wie utf-8 oder iso-8859-1. Näheres zu Zeichencodierungen finden Sie unter Referenz:Zeichencodierung. Diese Meta-Angabe sollte idealerweise als Erstes, gleich nach dem einleitenden head-Element erfolgen. Egal, welche Zeichencodierung Ihr Dokument nutzt - bis zu diesem Punkt werden Sie ausschließlich Zeichen genutzt haben, die auch dem ASCII-Zeichensatz entsprechen. Mindestens bis hierhin kann dem Browser also der tatsächliche Zeichensatz Ihres Dokuments noch egal sein.

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.

Ausführlichere Informationen zum Thema Zeichencodierung finden Sie unter http://www.w3.org/International/questions/qa-html-encoding-declarations.de.php.

[Bearbeiten] 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 = fällig werden).

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.

[Bearbeiten] 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 Ihres 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 Automatische Umleitungen (Redirects) mit dem CGI-Modul und das Apache-Modul mod_alias.

Beispiel
<meta http-equiv="refresh" content="5; URL=http://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 HTML/Referenzieren_in_HTML.

[Bearbeiten] 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.

[Bearbeiten] Viewport einstellen

Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man mit folgender Einstellung ein Skalieren verhindern und erreichen, dass die Seite sich an den Viewport anpasst:

Beispiel
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

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 ist yes.
  • minimum-scale bzw. 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 ist aber noch nicht offiziell verabschiedet, wird von den aktuellen Browsern leider noch nicht berücksichtigt.

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.

Empfehlung: Unterbinden Sie das Zoomen auf Mobilgeräten nicht. Verwenden Sie <meta name="viewport" content="width=device-width, initial-scale=1.0">

[Bearbeiten] 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.

Beispiel
<meta name="author" content="Anna Lyse"> <meta name="date" content="2010-05-15T08:49:37+02:00">
Durch diese Angabe wird der Autor des Dokuments ausgewiesen. Desweiteren wird in einer standardisierten Form ein Datum angegeben.

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.

[Bearbeiten] 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. In der Vergangenheit wurden auch noch weitere Angaben ausgelesen, aber manche davon wurden so stark missbräuchlich verwendet, dass sie inzwischen ignoriert werden.

[Bearbeiten] Beschreibung

Die Kurzbeschreibung description wird in manchen Suchmaschinen angezeigt, wenn ein Anwender nach etwas sucht und diese Datei zu den Treffern gehört. Es ist also sinnvoll, diese Meta-Angaben in allen inhaltlich relevanten HTML-Dateien 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.

Beispiel
<meta name="description" content="Dieser Beschreibungstext soll mit in der Suchergebnisliste erscheinen.">

[Bearbeiten] 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.

Beispiel
<head> <title>Die Oberdonaudampfschifffahrtsgesellschaft</title> <meta name="description" content="Informationen rund um die Oberdonaudampfschifffahrtsgesellschaft"> <meta name="keywords" content="Donau, Schifffahrt, Schiffe"> </head>

[Bearbeiten] 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.

Beispiel
<meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein"> <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <meta name="keywords" lang="en" content="holiday, Greece, sunshine"> <meta name="keywords" lang="fr" content="vacances, Grèce, soleil">

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 Sprachenkü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.

[Bearbeiten] Auslesen verbieten

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.

Beispiel
<meta name="robots" content="noindex,nofollow">

Mit <meta name="robots" content="noindex"> verbieten Sie einem Suchprogramm, Inhalte aus der HTML-Datei an seine Suchdatenbank zu übermitteln (robots = Suchprogramme, noindex = keine Indizierung). Mit <meta name="robots" content="nofollow"> können einem Suchprogramm verbieten, Hyperlinks, die in diesem Dokument vorhanden sind, zu folgen (nofollow = nicht folgen). Inhalte aus der aktuellen HTML-Datei darf es jedoch an seine Suchdatenbank übermitteln. Diese beiden Angaben können Sie auch so wie im obigen Beispiel kombinieren.

Beachten Sie: Die umgekehrten Angaben „index“ bzw „follow“ sind unnötig - das machen Suchmaschinen ohnehin

Wenn Sie sich für das Erlauben und Verbieten von Inhalten für Such-Robots interessieren, sollten Sie auch Technische Ergänzungen/Robots lesen.

[Bearbeiten] Profile und Schemata für frei definierbare Metadaten

  • Achtung

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.

Beachten Sie: In HTML5 sollen die Attribute „profile“ und „scheme“ entfallen
Beispiel
<head profile="http://dublincore.org/documents/dcq-html/"> <meta name="DC.description" content="Heute bekannte Meta-Angaben in HTML"> <meta name="DC.source" content="http://www.w3.org/TR/html401/struct/global.html#h-7.4.4" scheme="DCTERMS.URI"> </head>

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 obige Beispiel, auf ein bestehendes Profil beziehen. Das Beispiel bezieht sich auf die Dublin Core Metadata Initiative, die ein solches Profil erstellt hat. Die Namen der beiden folgenden meta-Angaben sind wiederum in dem Profil definiert, das im head-Element genannt ist.

Das zweite Meta-Element enthält auch noch ein scheme-Attribut. Dieses Attribut soll anzeigen, 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.

Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das meta-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <meta ... />. Weitere Informationen finden Sie im Kapitel HTML/Unterschiede.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke