< meta >-Element

Übersicht

Meta-Tags liefern Metadaten über HTML-Dokumente. Metadaten werden nicht auf der Seite angezeigt, sind aber maschinenlesbar. Sie können von Browsern (wie Inhalte angezeigt oder die Seite neu geladen wird), Suchmaschinen (Schlüsselwörter) oder anderen Webdiensten verwendet werden.

Erforderliche Attribute

Optionale Attribute

SEO-Optimierung

Referenzdokumente

• Seiten-SchlüsselwörterJede Webseite sollte eine Reihe eindeutiger Schlüsselwörter haben, die den Inhalt der Seite beschreiben.
  Verwenden Sie beschreibende und repräsentative Schlüsselwörter und Phrasen, nach denen Menschen wahrscheinlich suchen und die die auf der Seite bereitgestellten Informationen genau beschreiben. Wenn der getaggte Inhalt zu kurz ist, betrachten Suchmaschinen ihn möglicherweise nicht als relevant. Außerdem sollte das Tag 874 Zeichen nicht überschreiten.

<meta name="keywords" content="your tags" />

• SeitenbeschreibungJede Webseite sollte ein Description-Tag haben, das 150 Zeichen nicht überschreitet und den Inhalt der Seite genau widerspiegelt.

<meta name="description" content="150 words" />

• Suchmaschinen-Indexierungsmethodenrobotterms ist eine Reihe kommagetrennter Werte, üblicherweise mit den folgenden Werten: none, noindex, nofollow, all, index und follow. Stellen Sie sicher, dass die Attributwerte nofollow und noindex korrekt verwendet werden.

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

• Seitenumleitung und AktualisierungDie Zahl in content gibt die Zeit (in Sekunden) an, d. h., nach wie vielen Sekunden aktualisiert wird. Wenn eine URL hinzugefügt wird, erfolgt eine Weiterleitung zur angegebenen Seite (Suchmaschinen können dies automatisch erkennen, und es kann leicht als irreführend angesehen und abgestraft werden).

<meta http-equiv="refresh" content="0;url=" />

• Sonstiges

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

Mobile Geräte

• viewportEs kann die Anzeige in mobilen Browsern optimieren. Wenn die Website nicht responsiv ist, verwenden Sie nicht initial-scale oder deaktivieren Sie das Zoomen.
  Für die meisten 4.7-5-inch-Geräte stellen Sie die viewport-Breite auf 360px ein; für 5.5-inch-Geräte stellen Sie sie auf 400px ein; für iPhone 6 stellen Sie sie auf 375px ein; für iPhone 6 Plus stellen Sie sie auf 414px ein.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

1. width: width (numerischer Wert / device-width) (Bereich von 200 bis 10,000, Standard 980 Pixel)
2. height: height (numerischer Wert / device-height) (Bereich von 223 bis 10,000)
3. initial-scale: anfängliches Zoom-Verhältnis (Bereich von >0 bis 10)
4. minimum-scale: das minimale Verhältnis, bis zu dem der Benutzer zoomen darf
5. maximum-scale: der maximale Zoomfaktor, auf den der Benutzer zoomen darf
6. user-scalable: ob der Benutzer manuell zoomen kann (no, yes)
7. minimal-ui: kann die oberen und unteren Statusleisten beim Laden der Seite minimieren. (Veraltet)

Beachten Sie, dass viele Leute initial-scale=1 auf nicht responsiven Websites verwenden, was dazu führt, dass die Website mit 100 % Breite gerendert wird, sodass Benutzer die Seite manuell verschieben oder zoomen müssen. Wenn user-scalable=no oder maximum-scale=1 zusammen mit initial-scale=1 verwendet wird, können Benutzer nicht hinein-/herauszoomen, um den gesamten Inhalt zu sehen.

• WebApp-VollbildmodusAls App tarnen, für Offline-Anwendungen.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

• Statusleiste ausblenden / Statusleistenfarbe festlegenWirkt nur, wenn der WebApp-Vollbildmodus aktiviert ist. Der Wert von content ist default | black | black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

• Titel nach dem Hinzufügen zum Home-Bildschirm

<meta name="apple-mobile-web-app-title" content="标题">

• Automatische Erkennung von Zahlen als Telefonnummern ignorieren

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

• E-Mail-Erkennung ignorieren

<meta content="email=no" name="format-detection" />

• Smart App Banner hinzufügenTeilt dem Browser die zu dieser Website gehörende App mit und zeigt ein Download-Banner auf der Seite an (wie unten dargestellt).Referenzdokumente

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

• Sonstiges Referenzdokumente

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

Webseitenbezogen

• Kodierung deklarieren

<meta charset='utf-8' />

• Neueste Version von IE und Chrome bevorzugen

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

• Browser-Engine-SteuerungViele inländische Browser sind Dual-Engine (WebKit und Trident). Die WebKit-Engine ermöglicht schnelles Surfen, während die IE-Engine die Kompatibilität mit Webseiten und älteren Websites sicherstellt. Websites mit dem Meta-Tag können steuern, welche Engine der Browser zum Rendern verwendet.Referenzdokumente

<meta name="renderer" content="webkit|ie-comp|ie-stand">

Die Standard-Engine-Modi der inländischen Dual-Core-Browser sind wie folgt:
1. Sogou High-Speed-Browser, QQ-Browser: IE-Engine (Kompatibilitätsmodus)
2. 360 Speed Browser, Maxthon-Browser: WebKit-Engine (Geschwindigkeitsmodus)

• Verhindern, dass der Browser Seiteninhalte aus dem Cache des lokalen Computers abruftMit dieser Einstellung können Besucher nicht offline browsen.

<meta http-equiv="Pragma" content="no-cache">

• Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

• Website-AnpassungHauptsächlich verwendet für die Zuordnung zwischen PC- und Mobilseiten.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->

• Transcoding-DeklarationWenn eine Webseite mit Baidu geöffnet wird, kann sie transkodiert werden (zum Beispiel können Werbeanzeigen eingefügt werden). Um Transkodierung zu vermeiden, können Sie das folgende Meta-Tag hinzufügen.

<meta http-equiv="Cache-Control" content="no-siteapp" />

Weitere Referenzdokumente

VOLLSTÄNDIGE LISTE DER HTML-META-TAGS
W3C-META-TAGS
META-TAGS in HTML5
MDN META TAGS

Quelle: http://segmentfault.com/a/1190000002407912