HTML Meta

Meta Description – Kurzbeschreibung

Meta-Tags sitzen im head-Element der Seite und umfassen maschinenlesbare Informationen von der Kurzbeschreibung (meta description) über die robots-Anweisung bis zum Viewport der mobilen Geräte. Neben der Kurzbeschreibung und dem Viewport sind der Autor oder Publisher der Seite, Zeichensatz der Seite (meta charset) und »Robots sollen diese Seite indexieren/ nicht indexieren« (meta robots) die meistgenutzten Metatags.

Die Zusammenfassung des Inhalts der Webseite im meta-Tag description spielt eine wichtige Rolle unter den meta-Elementens. 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-Element 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/html/meta.html
Das HTML-meta-Element 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 u.U. den Anfang des darstellbaren Inhalts der Seite nutzen, der aber nur wenig aussagekräftig sein kann.

meta charset="utf-8" – Zeichensatz

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" />

Viewport-Meta für mobile Geräte

Nicht nur Suchmaschinen erhalten sinnvolle Informationen durch Meta-Tags, 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 mit Breakpoints um ein responsives Webdesign.

HTML meta für Mikrodaten – erklärende Informationen zu Inhalten

Eine HTML-Seite kann Dutzende von <meta>-Tags enthalten. Das meta-Tag ist auch nicht auf den head-Bereich der Webseite beschränkt, sondern kann innerhalb des body-Elements benutzt werden, wenn es ein itemprop-Attribut enthält. Genauso wie im head der HTML-Seite wird das Meta-Tag nicht in der Seite angezeigt, sondern transportiert nur Informationen zu den Suchmaschinen oder zu Anwendungen. 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.

Meta für Sterne –Rating / Bewertung — Beispiel: Meta-Tag für Sterne-Bewertungen

<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 – von Facebook bis Linkedin

Das Open Graph Protocol benutzt meta-Tags mit dem 'og'-Präfix und wird z.B. von Facebook und LinkedIn verwendet, um Posts mit der Eingabe der URL automatisch einzusetzen.

<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

Twitter erkennt das Open Graph Protocol und setzt Link, Bild, Titel und Description, hat aber auch eigene Meta-Tags.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="https://www.mediaevent.de">
<meta name="twitter:url" content="https://www.mediaevent.de/html/meta.html">
<meta name="twitter:title" content="HTML Meta-Tag | mediaevent.de">
<meta name="twitter:description" content="Meta-Tags liefern maschinenlesbare Daten zur ….">
<meta name="twitter:image" content="https://www.mediaevent.de/html/svg/meta.png">

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/">

Ü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-Keywords von Anfang an nicht in das Ranking einbezogen, sondern auf Links zur Seite und auf Inhalt und Aufenthaltsdauer gesetzt: 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 für ein Suchprogramm eingesetzt werden.

meta Attribute

Metadaten werden immer als Name-/Wert-Paar geschrieben: name / content.

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