Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML-Tipps für Webentwickler: Jede Woche neu

Durchblicken bei Meta-Angaben

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
07:06
  Lesezeichen setzen

Transkript

An wenigen Stellen gibt es so ein Wildwuchs, wie bei den meta-Elementen in HTML Dokumenten. Was Sie wirklich brauchen und was vielleicht verzichtbar ist, sehen wir uns dieses Mal an. Meta-Elemente stehen im Headbereich von Dokumenten und liefern einerseits Informationen über das Dokument, und andererseits liefern sie Informationen, die man normalerweise auch über einen HTPP-Header steuern könnte beispielsweise Informationen zum Cache verhalten. Wenn man sich die meta-Elemente beim "W3C", in der Spezifikation anschaut, dann fällt erst einmal auf, dass sie Definition relativ schwammig ist. Am Anfang heißt es, dass es verschiedene Arten von Metadaten sind, die nicht durch "title", "base" etcetera gekennzeichnet werden können. Dann kommt nochmal eine bisschen genauere Definition, also es geht um Metadaten und Pragma-Directiven. Das "W3C" definiert dann ein paar standard Metanamen. Sie können beispielsweise nehmen "application-name" für Web-Apps und einen eigenen Namen anzugeben. Ein weiterer Standardname ist "author" für den Autor des Dokuments. "Description". Eine "description" ist wichtig, weil diese von Suchmaschinen verwendet werden kann und in der Treffer-Liste angezeigt werden kann. "Generator". Damit können Sie angeben, welches Tool Sie zur Erstellung der Webseite verwendet haben, und außerdem kann man "keywords" bestimmen. Das ist dann eine Liste von Begriffen, die die Webseite beschreibt. Der Nutzen davon ist heute nicht mehr so groß, weil alle großen Suchmaschinen die keywords ignorieren. Und weitere Metadaten können registriert werden. Das ist hier angegeben. Also man kann an dieser Stelle weitere Metadaten registrieren, und deswegen gibt es bei diesen Metadaten sehr viele herstellerspezifische Erweiterungen. Eine bekannte Erweiterung ist "dublincore". Damit kann man dann Dokumente noch genauer auszeichnen und weitere Informationen liefern. Außerdem gibt es Erweiterungen für Web-Apps. So können Sie beispielsweise dafür sorgen, dass Ihre Web-App im Vollbildmodus läuft. Und es gibt Erweiterungen, wie beispielsweise von Twitter zur Erstellung von solchen Twitter-Cards Wenn dann jemand ein Link auf ihre Seite twittert, dann wird die entsprechende Card angehängt und wie die aussehen soll, das steuern Sie über meta-Angaben. Sehen wir uns einmal konkret ein paar meta-Angaben an. Das allerwichtigste ist die Zeichensatz-Angabe. Ursprünglich haben Sie die in HTML 4 noch auf eine andere Art schreiben müssen mit "http-equiv="Content-Type". Heute genügt es einfach zu schreiben "meta charset="UTF-8". Weil das eine Verkürzung ist, ist diese Angabe formal anders als die anderen Angaben. Die anderen Standardangaben sehen hingegen immer so aus, dass sie ein "name"-Attribut haben mit einem "content"-Attribut oder ein "http-equiv"-Attribut mit einem "content"-Attribut. Sie sehen die Beschreibung der Webseite. Das ist natürlich immer sehr wichtig. Ebenfalls ganz wichtig ist die "viewport"-Angabe, damit das Ganze auch auf Smartphones richtig funktioniert, das heißt, damit wird die automatische Verkleinerung, die Smartphones machen abgeschaltet. Sie können außerdem auch die Suchmaschinen steuern, ob die aktuelle Seite indiziert werden soll oder nicht, wenn Sie schreiben "name="robots" content="noindex", wird die aktuelle Seite nicht indiziert. Neben diesen "name" meta-Angaben gibt es die "http-equiv" und da ist beispielsweise sehr sinnvoll und gut einzusetzen diese Angabe. Damit sorgen Sie dafür, dass der Internet-Explorer die Webseite in modernsten Modus über denen verfügt darstellt. Dann gibt es weitere http-equiv-Angaben beispielsweise zur Cache-Steuerung. Das heißt, man kann die https darüber steuern, ob die aktuelle Webseite aus dem Zwischenspeicher geholt werden darf oder ob sie immer von der Originalquelle wieder geholt werden soll. Besser ist es aber so etwas nicht über Meta-Angaben zu machen, sondern beispielsweise in einer htaccess-Datei zu konfigurieren, weil da eine viel genauere Steuerung möglich ist, so können Sie beispielsweise je nach Dateityp unterschiedliche Zeiten festlegen. Wie so etwas aussehen kann, kann man bei "mobile-boilerplate" sich anschauen. Die liefern auch eine Beispiel htaccess-Datei mit und da wird dann genau aufgeführt, je nach Dateityp, wie lange diese zwischengespeichert werden soll. Im Web finden sich immer auch weitere meta-Anagaben, die heute nicht mehr notwendig sind. Das sind beispielsweise diese vier. Es gibt eine komische Image-Toolbar-Geschichte, das war relevant im Internet Explorer 6. Dann "Content-Style-Type". Das war notwendig im HTML 4, genauso wie auch "Content-Script-Type". Das brauchen Sie beides heute nicht mehr. "Content-language" konnte man nutzen, um die Sprache für ein Dokument zu definieren. Das sollten Sie aber besser über das Lang-Attribut beim HTML-star tag machen. Viele viele meta-Angaben. Was braucht man denn wirklich unbedingt? Unbedingt brauchen Sie die Zeichensatzangabe, außerdem im normalen Fall auch die viewport-Angabe, damit das Ganze auf Smartphones funktioniert. Sie sollten für Suchmaschinen eine "description" liefern und sinnvoll ist es auch eine Angabe für den IE zu machen, damit diese sich ordentlich verhält. Was Sie sonst noch brauchen hängt vom Ihren Projekt ab, aber diese Vier sind wirklich essentiell und diese sollten Sie immer einsetzen.