說明
Meta對象代表 HTML 的 一個 元素。
元素可提供有關某個HTML元素的元資訊(meta-information)，比如描述、針對搜尋引擎的關鍵詞以及重新整理頻率，SEO優化。
屬性：
content //設定或傳回 元素的content屬性的值。
httpEquiv //把content屬性連接配接到一個 HTTP 頭部。
name //把content屬性連接配接到某個名稱
scheme //設定或傳回用于解釋content屬性的值的格式。
content 屬性
content 屬性可設定或者傳回 meta 元素 content 屬性值。
content 屬性指定了 meta 資訊的内容。
所有主要浏覽器都支援 content 屬性
示例：
<html ><head><meta charset="UTF-8"><meta name="keywords" content="HTML, DHTML, CSS, XHTML, JavaScript"><meta name="description" content="loaderman"><meta name="author" content="loaderman"><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>示例示範title>head><script>function displayResult() {var x = document.getElementsByTagName("meta");var txt = "";for (var i = 0; i < x.length; i++) {
txt = txt + "Content of " + (i + 1) + ". meta tag: " + x[i].content + "
";
}document.getElementById("result").innerHTML = txt;
}script><body><button type="button" onclick="displayResult()">顯示 Meta 内容button><p id="result">p>body>html>
效果：
httpEquiv 屬性
httpEquiv 屬性可設定或者傳回 content 屬性中HTTP 頭部資訊。
http-equiv 屬性可以使用僞裝 HTTP 響應頭部資訊。
http-equiv 屬性值依賴 content屬性的值。
注意：如果 name 屬性已設定, http-equiv 屬性就無需設定。
常用的 HTTP-header 值:
| 值 | 描述 |
| cache-control | 控制文檔的緩存機制。 允許的值： public - 所有内容都将被緩存(用戶端和代理伺服器都可緩存) private - 内容隻緩存到私有緩存中(僅用戶端可以緩存，代理伺服器不可緩存) no-cache - 不緩存 no-store - 緩存當不歸檔 but not archived 執行個體: |
| content-language | 響應體的語言 執行個體: |
| content-type | 傳回内容的MIME類型 提示: 通常用于字元集的設定。 執行個體: |
| date | 原始伺服器消息發出的時間 執行個體: |
| expires | 響應過期的日期和時間 執行個體: |
| last-modified | 請求資源的最後修改時間 執行個體: |
| location | 用來重定向接收方到非請求URL的位置來完成請求或辨別新的資源 執行個體: |
| refresh | 定義間隔多久後重新整理頁面。 執行個體: |
| set-cookie | 建立一個 cookie ，包含了 cookie 名，cookie 值，過期時間。 執行個體: |
| window-target | 指定要載入的架構名 |
示例：
<html ><head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>示例示範title>head><script>function displayResult() {var x = document.getElementsByTagName("meta");var txt = "";for (var i = 0; i < x.length; i++) {
txt = txt + "Content of " + (i + 1) + ". meta tag: " + x[i].content + "
";
}document.getElementById("result").innerHTML = txt;
}script><body><button type="button" onclick="displayResult()">顯示button><p id="result">p>body>html>
效果：
name屬性
name 屬性可設定或者傳回content屬性資訊名稱。
name 屬性值依賴 content 屬性值。
name 屬性可以是預定義值，或由使用者定義。
application-name
author
執行個體:
<meta name="author" content="loaderman">
description
執行個體:
<meta name="description" content="碼上加油站">
generator
執行個體:
<meta name="generator" content="Page 4.0">
keywords
執行個體:
<meta name="keywords" content="HTML, HTML DOM, JavaScript">
scheme 屬性
使用 scheme 屬性來定義 content 屬性的格式：
<head>
<meta name="date" content="2020-07-07" scheme="YYYY-MM-DD">
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN">
head>
HTML5 不支援 scheme 屬性。
scheme 屬性規定用于翻譯 content 屬性的值的方案(格式或 URI)。
meta scheme="format|URI">
format/URI 定義 content 屬性内的值的格式(或指向一個包含資訊的 URI)。
charset 屬性
charset 屬性規定 HTML 文檔的字元編碼。
<meta charset="UTF-8">
head>
SEO優化
頁面關鍵詞，每個網頁應具有描述該網頁内容的一組唯一的關鍵字。使用人們可能會搜尋，并準确描述網頁上所提供資訊的描述性和代表性關鍵字及短語。标記内容太短，則搜尋引擎可能不會認為這些内容相關。另外标記不應超過 874 個字元。
<meta name="keywords" content="your tags" />
頁面描述，每個網頁都應有一個不超過 150 個字元且能準确反映網頁内容的描述标簽。
<meta name="description" content="150 words" />
搜尋引擎索引方式，robotterms是一組使用逗号(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。確定正确使用nofollow和noindex屬性值。
頁面重定向和重新整理：content内的數字代表時間(秒)，既多少時間後重新整理。如果加url,則會重定向到指定網頁(搜尋引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰)。
<meta http-equiv="refresh" content="0;url=" />
其他：
<meta name="author" content="author name" />
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
移動裝置
viewport：能優化移動浏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。
大部分4.7-5寸裝置的viewport寬設為360px；
5.5寸裝置設為400px；
iphone6設為375px；
ipone6 plus設為414px。
- width：寬度(數值 / device-width)(範圍從200 到10,000，預設為980 像素)
- height：高度(數值 / device-height)(範圍從223 到10,000)
- initial-scale：初始的縮放比例 (範圍從>0 到10)
- minimum-scale：允許使用者縮放到的最小比例
- maximum-scale：允許使用者縮放到的最大比例
- user-scalable：使用者是否可以手動縮 (no,yes)
- minimal-ui：可以在頁面加載時最小化上下狀态欄。(已棄用)
WebApp全屏模式：僞裝app，離線應用。
<meta name="apple-mobile-web-app-capable" content="yes" />
隐藏狀态欄/設定狀态欄顔色：隻有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
添加到主屏後的标題：
<meta name="apple-mobile-web-app-title" content="标題">
忽略數字自動識别為電話号碼
<meta content="telephone=no" name="format-detection" />
忽略識别郵箱
<meta content="email=no" name="format-detection" />
添加智能 App 廣告條 Smart App Banner：告訴浏覽器這個網站對應的app，并在頁面上顯示下載下傳banner(如下圖)。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
其他
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
網頁相關
申請編碼：
<meta charset='utf-8' />
優先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
浏覽器核心控制：國内浏覽器很多都是雙核心(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"/>
<meta name="msapplication-TileImage" content="icon.png"/>
站點适配：主要用于PC-手機頁的對應關系。
轉碼申明：用百度打開網頁可能會對其進行轉碼(比如貼廣告)，避免轉碼可添加如下meta。
<meta http-equiv="Cache-Control" content="no-siteapp" />
完
碼上加油站
一起來加油
長按掃碼關注
點“在看”你懂得