HTML => Meta-Informationen

Einführung

Metatags in HTML-Dokumenten enthalten nützliche Informationen über das Dokument, einschließlich Beschreibung, Schlüsselwörter, Autor, Änderungsdatum und rund 90 weitere Felder. Dieses Thema behandelt die Verwendung und den Zweck dieser Tags.

Syntax

<meta name="metadata name" content="value">
<meta http-equiv="pragma directive" content="value">
<meta charset="encoding label">

Bemerkungen

Das Meta-Tag ist ein HTML-Tag, mit dem die Metadaten des HTML-Dokuments festgelegt werden. Meta-Tags müssen in das head-Element eingefügt werden. Eine Seite kann eine beliebige Anzahl von Metatags haben.

Die Meta-Tag- keywords normalerweise nicht von Robotern verwendet. Die meisten Suchmaschinen bestimmen, welche Schlüsselwörter zum Inhalt der Webseiten passen. Nichts besagt, dass Sie das Meta-Tag "Keywords" nicht mehr enthalten sollten.

Die Metadaten einer Seite werden hauptsächlich vom Browser verwendet (z. B. die Skalierung eines Dokuments) und von Web-Crawler-Spidern von Suchmaschinen (Google, Yahoo! Bing).

Die Spezifikation enthält eine Reihe standardisierter Metadatennamen zur Verwendung mit <meta name> und standardisierte Metadaten-Pragma-Direktiven zur Verwendung mit <meta http-equiv> . Viele Dienste im Internet (Webcrawler, Authoring-Tools, Social-Sharing-Dienste usw.) verwenden jedoch das <meta name> -Formular als generischen Erweiterungspunkt für Metadaten. Einige davon sind auf der Wiki-Seite der Spec aufgelistet.

Zeichenkodierung

Das charset gibt die Zeichenkodierung für das HTML-Dokument an und muss eine gültige Zeichenkodierung sein (Beispiele umfassen windows-1252 , ISO-8859-2 , Shift_JIS und UTF-8 ). UTF-8 (Unicode) wird am häufigsten verwendet und sollte für jedes neue Projekt verwendet werden.

<meta charset="UTF-8">

<meta charset="ISO-8859-1">

Alle Browser haben das <meta charset> immer erkannt. Wenn Sie jedoch aus irgendeinem Grund Ihre Seite als gültiges HTML 4.01 benötigen, können Sie stattdessen Folgendes verwenden:

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

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Siehe auch Encoding Standard , um alle verfügbaren Zeichenkodierungsetiketten anzuzeigen, die von Browsern erkannt werden.

Automatisches Aktualisieren

Um die Seite alle fünf Sekunden zu aktualisieren, fügen Sie dieses meta im head Element hinzu:

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

VORSICHT! Dies ist zwar ein gültiger Befehl, es wird jedoch empfohlen, dass Sie ihn nicht verwenden, da dies negative Auswirkungen auf die Benutzererfahrung hat. Ein zu häufiges Aktualisieren der Seite kann dazu führen, dass sie nicht mehr reagiert und häufig zum Anfang der Seite verschoben wird. Wenn einige Informationen auf der Seite ständig aktualisiert werden müssen, gibt es wesentlich bessere Möglichkeiten, dies zu tun, indem nur ein Teil einer Seite aktualisiert wird.

Mobile Layoutsteuerung

Häufig für Mobilgeräte optimierte Websites verwenden das Tag <meta name="viewport"> wie folgt:

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

Das viewport Element gibt dem Browser Anweisungen zum Steuern der Dimensionen und der Skalierung der Seite auf der Grundlage des von Ihnen verwendeten Geräts.

In dem obigen Beispiel content="width=device-width bedeutet , dass der Browser die Breite der Seite in der Breite seines eigenen Bildschirm machen. Also , wenn das Bildschirm ist 480px wide , wird das Browser - Fenster seines 480px wide . initial-scale=1 zeigt, dass der anfängliche Zoom (der in diesem Fall 1 ist, bedeutet, dass er nicht zoomt).

Folgende Attribute werden von diesem Tag unterstützt:

Attribut	Beschreibung
`width`	Die Breite des virtuellen Ansichtsfensters des Geräts. Werte ¹ : `device-width` oder tatsächliche Breite in Pixel, z. B. `480`
`height`	Die Höhe des virtuellen Ansichtsfensters des Geräts. Werte ² : `device-height` oder tatsächliche Breite in Pixel, z. B. `600`
`initial-scale`	Der anfängliche Zoom beim Laden der Seite. 1.0 zoomt nicht.
`minimum-scale`	Der Mindestbetrag, den der Besucher auf die Seite zoomen kann. `1.0` zoomt nicht.
`maximum-scale`	Der maximale Betrag, den der Besucher auf die Seite zoomen kann. `1.0` zoomt nicht.
`user-scalable`	Ermöglicht das Vergrößern und Verkleinern des Geräts. Werte sind `yes` oder `no` . Wenn Nein eingestellt ist, kann der Benutzer die Webseite nicht zoomen. Der Standardwert ist yes. Browsereinstellungen können diese Regel ignorieren.

Anmerkungen:

¹ Die width -Eigenschaft kann entweder in Pixel ( width=600 ) oder nach Gerätebreite ( width=device-width ) angegeben werden, die die physische Breite des Bildschirms des Geräts darstellt.

² Ebenso kann die height -Eigenschaft entweder in pixels ( height=600 ) oder nach device-height ( height=device-height ) angegeben werden, die die physische Höhe des Bildschirms des Geräts darstellt.

Informationen zur Seite

`application-name`

Geben Sie den Namen der Webanwendung an, die die Seite darstellt.

<meta name="application-name" content="OpenStreetMap">

Wenn es sich nicht um eine Webanwendung handelt, darf das Meta-Tag application-name nicht verwendet werden.

`author`

Stellen Sie den Autor der Seite ein:

<meta name="author" content="Your Name">

Es kann nur ein Name vergeben werden.

`description`

Stellen Sie die Beschreibung der Seite ein:

<meta name="description" content="Page Description">

Das description Meta-Tag kann von verschiedenen Suchmaschinen verwendet werden, während Sie Ihre Webseite für Suchzwecke indizieren. Normalerweise ist die Beschreibung des Meta-Tags die kurze Zusammenfassung, die unter dem Haupttitel der Seite / Website in den Suchmaschinenergebnissen angezeigt wird. Google verwendet normalerweise nur die ersten 20-25 Wörter Ihrer Beschreibung.

`generator`

<meta name="generator" content="HTML Generator 1.42">

Gibt eines der Software-Pakete an, die zum Generieren des Dokuments verwendet werden. Nur für Seiten, auf denen das Markup automatisch generiert wird.

`keywords`

Festlegen von Schlüsselwörtern für Suchmaschinen (durch Kommas getrennt):

<meta name="keywords" content="Keyword1, Keyword2">

Das keywords Meta-Tag wird manchmal von Suchmaschinen verwendet, um die für Ihre Webseite relevante Suchanfrage zu kennen.
Als Daumenregel ist es wahrscheinlich eine gute Idee, nicht zu viele Wörter hinzuzufügen, da die meisten Suchmaschinen, die dieses Meta-Tag für die Indizierung verwenden, nur die ersten 20 Wörter indizieren. Stellen Sie sicher, dass Sie die wichtigsten Keywords zuerst eingeben.

Roboter

Das robots Attribut, das von mehreren großen Suchmaschinen unterstützt wird, steuert, ob Suchmaschinen-Spider eine Seite indizieren dürfen oder nicht und ob sie Links von einer Seite aus folgen sollen oder nicht.

<meta name="robots" content="noindex">

In diesem Beispiel werden alle Suchmaschinen angewiesen, die Seite nicht in den Suchergebnissen anzuzeigen. Andere zulässige Werte sind:

Wert / Richtlinie	Bedeutung
`all`	Standard. Gleichbedeutend mit `index, follow` . Siehe Anmerkung unten.
`noindex`	Indizieren Sie die Seite überhaupt nicht.
`nofollow`	Folgen Sie nicht den Links auf dieser Seite
`follow`	Die Links auf der Seite können verfolgt werden. Siehe Anmerkung unten.
`none`	Entspricht `noindex, nofollow` .
`noarchive`	Machen Sie in den Suchergebnissen keine zwischengespeicherte Version dieser Seite verfügbar.
`nocache`	Synonym für `noarchive` das von einigen Bots wie Bing verwendet wird.
`nosnippet`	Zeigen Sie in den Suchergebnissen keinen Ausschnitt dieser Seite an.
`noodp`	Verwenden Sie keine Metadaten dieser Seite aus dem Open Directory-Projekt für Titel oder Snippets in Suchergebnissen.
`notranslate`	Bieten Sie keine Übersetzungen dieser Seite in den Suchergebnissen an.
`noimageindex`	Bilder auf dieser Seite nicht indexieren.
`unavailable_after [RFC-850 date/time]`	Diese Seite nicht in den Suchergebnissen nach dem angegebenen Datum anzeigen. Datum und Uhrzeit müssen im RFC 850-Format angegeben werden .

Hinweis: Das explizite Definieren des index und / oder des follow ist nicht erforderlich, solange gültige Werte gelten, da fast alle Suchmaschinen davon ausgehen, dass sie dies tun dürfen, wenn sie nicht ausdrücklich daran gehindert werden. Ähnlich wie bei der Datei "robots.txt" suchen Suchmaschinen im Allgemeinen nur nach Dingen, die sie nicht ausführen dürfen . Wenn Sie nur Dinge angeben, die eine Suchmaschine nicht zulässt, dürfen Sie auch nicht versehentlich Gegensätze (wie index, ..., noindex ) angeben index, ..., noindex die nicht alle Suchmaschinen auf dieselbe Weise behandeln.

Rufnummernerkennung

Mobile Plattformen wie iOS erkennen Telefonnummern automatisch und verwandeln sie in tel: Links. Während die Funktion sehr praktisch ist, erkennt das System manchmal ISBN-Codes und andere Nummern als Telefonnummern.

Für mobile Safari und andere WebKit-basierte mobile Browser, um die automatische Erkennung und Formatierung von Telefonnummern zu deaktivieren, benötigen Sie dieses Meta-Tag:

<meta name="format-detection" content="telephone=no">

Sozialen Medien

Open Graph ist ein Standard für Metadaten, der die normalen Informationen erweitert, die in der Kopfmarkierung einer Site enthalten sind. Dadurch können Websites wie Facebook tiefere und reichhaltigere Informationen zu einer Website in strukturierter Form anzeigen. Diese Informationen werden automatisch angezeigt, wenn Benutzer Links zu Websites mit OG-Metadaten auf Facebook freigeben.

Facebook / Diagramm öffnen

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->

Facebook / Sofortartikel

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

Twitter verwendet ein eigenes Markup für Metadaten. Diese Metadaten werden als Informationen verwendet, um zu steuern, wie Tweets angezeigt werden, wenn sie einen Link zur Site enthalten.

Twitter

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

Automatische Weiterleitung

Manchmal benötigt Ihre Webseite eine automatische Weiterleitung.

So können Sie beispielsweise nach 5 Sekunden auf example.com umleiten:

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

Diese Zeile wird Sie an die angegebene Website (in diesem Fall example.com nach 5 Sekunden) example.com .

Wenn Sie die Zeitverzögerung vor einer Weiterleitung ändern müssen, ändern Sie einfach die Nummer direkt vor Ihrem ;url= , um die Zeitverzögerung zu ändern.

Web-App

Sie können Ihre Web-App oder Website so einrichten, dass der Startbildschirm eines Geräts ein Anwendungsverknüpfungssymbol hinzugefügt wird. Außerdem kann die App im Vollbildmodus "App-Modus" mit dem Menüelement "Add to Homescreen" von Chrome für Android gestartet werden.

Unter den Meta-Tags werden die Web-Apps im Vollbildmodus (ohne Adressleiste) geöffnet.

Android Chrome

<meta name="mobile-web-app-capable" content="yes">

IOS

<meta name="apple-mobile-web-app-capable" content="yes">

Sie können auch die Farbe für Statusleiste und Adressleiste im Meta-Tag festlegen.