CSS, HTML und Javascript mit {stil}

HTML meta Tag

HTML Meta-Tag: Von charset bis schema.org

Meta-Tags sitzen i.d.R. im Kopf der HTML-Seite und enthalten Informationen über die Webseite, die im Browser nicht angezeigt werden, sondern sich eher an die Browser selbst, an den Server, die Suchmaschinen und spezielle Anwendungen richten.

Metadaten sind maschinenlesbare Informationen in den Attributen von Meta-Tags.

Die kurze Beschreibung der Seite (description), der Autor oder Publisher der Seite, Zeichensatz der Seite (meta charset) und "Robots sollen diese Seite indexieren/ nicht indexieren" sind die meistgenutzten Metatags.

Die Zusammenfassung des Inhalts der Webseite im meta-Tag »description« spielt eine wichtige Rolle unter den meta-Tags. Der Text der Meta-Description wird von den Suchmaschinen zur Beschreibung der Seite verwendet (wenn nicht gerade ein anderer Text der Seite besser zur Suche passt) und kann keine Formatierung enthalten.

<meta name="description" 
      content="Das HTML-meta-Tag liefert maschinenlesbare Daten zur Webseite …">

HTML meta Tag | mediaevent.de
www.mediaevent.de/xhtml/meta.html
Das HTML-meta-Tag liefert maschinenlesbare Daten zur Webseite, z.B. Meta Description für den Suchmaschineneintrag. Metadaten sind im Browser nicht sichtbar.

meta description ist sinnvoll, da die Suchergebnisse ansonsten den Anfang des darstellbaren Inhalts der Seite nutzen, der aber u.U. nur wenig aussagekräftig sein kann.

Zeichensatz im Meta-Tag vereinbaren

Die Festlegung des Zeichensatzes durch ein Meta-Tag stellt sicher, dass Seiten auch dann mit dem entsprechenden Zeichensatz – UTF-8 (no BOM) – dargestellt werden, wenn der Server nicht für diesen Zeichensatz konfiguriert ist.

<meta charset="utf-8" />

Die langatmige Form aus XHTML ist hingegen überflüssig und wird heute nicht mehr verwendet:

<meta http-equiv="Content-Type" 
      content="text/html; charset=UTF-8" />

refresh: Seiten neu laden

Das Attribut http-equiv kann eingesetzt werden, um eine Seite neu zu laden. In diesem Beispiel wird nach 30 Sekunden ein Refresh der Seite initiiert:

<meta http-equiv="refresh" 
      content="30">

Sitzt im content-Attribut des Meta-Tags außerdem eine URL, wirkt das Meta-Tag wie ein HTTP Header und schaltet (u.U. nach einem Timeout) zu einer anderen Seite.

<meta http-equiv="refresh" 
      content="5;url=https://www.mediaevent.de/">

Viewport-Meta für mobile Geräte

Nicht nur Suchmaschinen erhalten sinnvolle Informationen durch das Meta-Tag, sondern Meta name="viewport" spricht auch bestimmte Geräte an.

<meta name="viewport" 
      content="width=device-width,
               initial-scale=1.0,
               minimum-scale=1.0"> 

Dann werden Text und Bilder nicht mehr verkleinert, um auf den kleinen Monitor zu passen, sondern Textzeilen brechen um, Bilder werden verkleinert. Vorausgesetzt, dass CSS kümmert sich um ein responsives Webdesign.

HTML meta für Mikrodaten

Eine HTML-Seite kann mehr als ein <meta>-Tag enthalten. Das meta-Tag ist auch nicht auf den head-Bereich der Webseite beschränkt, sondern kann innerhalb des body-Elements benutzt werden. Genauso wie im head der HTML-Seite wird das Meta-Tag nicht in der Seite angezeigt, sondern transportiert nur Informationen zu den Suchmaschinen. Solche Informationen sind z.B. itemprop-Attribute.

Das meta-Tag soll allerdings nur dann innerhalb des body-Tags benutzt werden, wenn es keine Möglichkeit gibt, die Informationen direkt in ein normales Tag zu setzen.

<span itemscope itemtype="http://schema.org/AggregateRating">
    <img src="" /><meta itemprop="ratingValue" content="4">
    <meta itemprop="worstRating" content = "1"/>
</span>

Schema für Rating auf schema.org

HTML Microdata

Das meta-Tag nimmt auch Mikroformate (z.b. nach schema.org) auf:

<meta itemprop="ratingValue" content="4" />
<meta itemprop="image" content="https://www.mediaevent.de/assets/html-meta.png" />
<meta itemprop="dateModified" content="2015-11-23" />

Meta Tags für Social Media

Das Open Graph-Protocoll benutzt meta-Tags mit dem 'og'-Präfix und wird z.B. von Facebook verwendet, um Webseiten dieselbe Funktionalität wie den Objekten auf Facebook zu verleihen.

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:image" content="http://someside.somewhere/therock.jpg" />
Beispiel von The Open Graph protocol

Überholte Meta-Tags

Zwar führen immer noch viele Webseite Keywords im Meta-Tag auf, aber die Suchmaschinen ignorieren die Schlüsselwort-Sammlungen – allen voran Google. Google hat Meta-Tags von Anfang an nicht in das Ranking einbezogen: Das war das Google-Erfolgsrezept.

<meta name="keywords" 
      content="CSS,HTML,Webdesign,Javascript">

Andererseits schaden Meta-Tag Keywords nicht (jedenfalls, wenn die Begriffe tatsächlich auf der Seite vorkommen) und können z.B. als Taxonomie eingesetzt werden.

meta Attribute

Metadaten werden immer als Name-/Wert-Paar geschrieben.

content
ist der Inhalt des Paares Name/Inhalt. Es gibt keine definierten Werte für dieses Attribut, vielmehr darf jeder beliebige Text eingesetzt werden. Wenn z.B. »keywords« als Name eingesetzt wird, können im Inhalt beliebige Begriffe stehen, in denen der Autor relevante Suchbegriffe für seine Seite sieht.
http-equiv
kann anstelle des Attributs name benutzt werden, um ein http-equiv/content-Wertepaar zu bilden. Dieses enthält die Informationen, um einen HTTP-Header zu erzeugen (die meisten Proxyserver ignorieren dieses Attribut allerdings). Die möglichen Werte sind content-type, expires, refresh und set-cookie.
name
ist der Namensteil des Name/Inhalt-Wertepaares. Es gibt keine definierten Werte für dieses Attribut, vielmehr kann jeder beliebige Text eingesetzt werden. Wenn z.B. »keywords« als Name eingesetzt wird, können im Inhalt beliebige Begriffe stehen, in denen der Autor relevante Suchbegriffe für seine Seite sieht.
scheme (nicht mehr in HTML5)
bezeichnet ein Verfahren für die Interpretation von Metadaten. Dieses muss mit den Profilen übereinstimmen, die im profile-Attribut des head-Tags angegeben werden.
name content +