Häufig verwendete HTML-Metaorganisation

Element

Zusammenfassung

Das

-Tag stellt Metadaten über das HTML-Dokument bereit. Die Metadaten werden nicht auf der Seite angezeigt, sind aber maschinenlesbar. Es kann von Browsern (wie Inhalte angezeigt oder Seiten neu geladen werden), Suchmaschinen (Schlüsselwörter) oder anderen Webdiensten verwendet werden.

erforderliche Attribute 🎜>

Inhalt etwas Text Definiert Metainformationen im Zusammenhang mit dem http-equiv- oder Namensattribut

Optionale Attribute Attribute 🎜>Beschreibung

http-equiv Content-Type / Expire / Refresh / Set-Cookie Verknüpfen Sie das Inhaltsattribut mit dem HTTP-Header.

Name Autor / Beschreibung / Schlüsselwörter / Generator / überarbeitet / andere verknüpfen das Inhaltsattribut mit einem Namen.  

Inhalt  ein Text  definiert das Format, das zum Übersetzen des Werts des Inhaltsattributs verwendet wird.

SEO-Optimierung Siehe Dokument

Seitenschlüsselwörter. Jede Webseite sollte über einen eindeutigen Satz von Schlüsselwörtern verfügen, die den Inhalt der Webseite beschreiben.

Verwenden Sie beschreibende und repräsentative Schlüsselwörter und Ausdrücke, nach denen die Leute wahrscheinlich suchen, und beschreiben Sie die auf der Seite bereitgestellten Informationen genau. Markieren Sie Inhalte, die zu kurz sind, da sie sonst von Suchmaschinen als nicht relevant eingestuft werden. Außerdem sollten Tags 874 Zeichen nicht überschreiten.

Seitenbeschreibung: Jede Webseite sollte einen Beschreibungs-Tag mit nicht mehr als 150 Zeichen haben, der den Inhalt der Seite genau wiedergibt.

Suchmaschinenindizierungsmethode, robotterms ist eine Reihe von Werten, die durch Kommas (,) getrennt sind, normalerweise die folgenden Werte: none, noindex, nofollow, all, index und follow. Stellen Sie sicher, dass Sie die Attributwerte nofollow und noindex korrekt verwenden.

Seitenumleitung und -aktualisierung: Die Zahl im Inhalt stellt die Zeit (Sekunden) dar, also wie lange die Aktualisierung dauert. Wenn Sie eine URL hinzufügen, wird diese auf die angegebene Webseite weitergeleitet (Suchmaschinen können sie automatisch erkennen und sie kann von der Suchmaschine leicht als irreführend angesehen und bestraft werden).

Andere

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

Mobile Geräte

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

Ansichtsfenster: Kann die Anzeige mobiler Browser optimieren. Wenn die Website nicht reagiert, verwenden Sie Initial-Scale nicht oder deaktivieren Sie die Skalierung.

Die Ansichtsbreite der meisten 4,7-5-Zoll-Geräte ist auf 360 Pixel eingestellt; das iPhone 6 ist auf 375 Pixel eingestellt; das iPhone 6 Plus ist auf 414 Pixel eingestellt.

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

Breite: Breite (Anzahl/Gerätebreite) (Bereich von 200 bis 10.000, Standard 980 Pixel)

Höhe: Höhe (Anzahl/Gerätehöhe) (Bereich von 223 bis 10.000)

initial-scale: anfängliche Skalierung (im Bereich von >0 bis 10)

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

minimum-scale: der minimale Maßstab, auf den der Benutzer zoomen darf

Maximum-Scale: Das maximale Verhältnis, auf das der Benutzer zoomen darf

Benutzerskalierbar: Ob der Benutzer manuell hineinzoomen kann (nein, ja)

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

minimal-ui: Das Aufwärts- und Down-Zustände können minimiert werden, wenn die Seite eine Spalte lädt. (Veraltet)

Beachten Sie, dass viele Leute initial-scale=1 auf nicht reagierenden Websites verwenden, was dazu führt, dass die Website mit 100 % Breite gerendert wird und der Benutzer die Seite manuell verschieben oder zoomen muss. Wenn „user-scalable=no“ oder „maximum-scale=1“ zusammen mit „initial-scale=1“ verwendet wird, kann der Benutzer die Webseite nicht vergrößern/verkleinern, um den gesamten Inhalt anzuzeigen.

WebApp-Vollbildmodus: Tarn-App, Offline-Anwendung.

Statusleiste ausblenden/Farbe der Statusleiste festlegen: Wird nur wirksam, wenn der WebApp-Vollbildmodus aktiviert ist. Der Wert des Inhalts ist standardmäßig |. black |.

Titel nach dem Hinzufügen zum Startbildschirm

Nummer ignorieren, die automatisch als Telefonnummer erkannt wird

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

Ignorieren Identifizieren Sie die E-Mail-Adresse

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

Smart App-Werbebanner hinzufügen Smart App-Banner: Teilen Sie dem Browser die App mit, die dieser Website entspricht, und zeigen Sie das Download-Banner auf der Seite an (wie unten gezeigt). Referenzdokumente

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

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

　　网页相关

申明编码

<meta charset=&#39;utf-8&#39; />

优先使用 IE 最新版本和 Chrome

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

浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

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

　　国内双核浏览器默认内核模式如下：

　　1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）

　　2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<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 磁贴图标 -->

站点适配：主要用于PC-手机页的对应关系。

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

转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

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