HTML Meta Tag – Informationen zur Webseite

HTML Meta-Tag: Von meta description oder robots bis schema.org

Meta-Tags 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.

Sie sitzen meist im Kopf der Seite und als maschinenlesbare Informationen von der Kurzbeschreibung (meta description) über die robots-Anweisung bis zum Viewport der mobilen Geräte.

Die kurze Beschreibung der Seite (meta description), der Autor oder Publisher der Seite, Zeichensatz der Seite (meta charset) und "Robots sollen diese Seite indexieren/ nicht indexieren" (meta robots) 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 …">

Jedes Meta-Tag hat diese zwei Attribute: name und content. name ist die Bezeichnung, content der Inhalt der Metadaten.

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, wenn kein besseres HTML-Element zur Verfügung steht. Genauso wie im head der HTML-Seite wird das Meta-Tag nicht in der Seite angezeigt, sondern transportiert nur Informationen zu den Suchmaschinen. Zu diesen Informationen gehören z.B. itemprop-Attribute à la schema.org.

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. Also genauso wie das link-Tag: Mit dem itemprop-Attribut darf das Meta-Tag im body sitzen, ohne itemprop nur im head-Element der Seite.

<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 Graph API

Ü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 +