常見meta標籤記錄

關於meta

<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。

<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

meta標籤可分爲兩大部分：http-equiv和name變量。

 

content 基於內容，這個屬性爲 http-equiv 或 name 屬性提供了與其相關的值的定義.

http-equiv 這個枚舉屬性定義了能改變服務器和用戶引擎行爲的編譯。這個編譯值使用content 來定義.

 

經常使用meta

http-equiv

至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

 

• content-type:設定頁面使用的字符集.

例子:

<meta http-equiv="content-Type" content="text/html; charset=utf-8">

GB2312時，表明說明網站是採用的編碼是簡體中文；

ISO-8859-1時，表明說明網站是採用的編碼是英文；

UTF-8時，表明世界通用的語言編碼；

PS：html5頁面的作法是直接使用<meta charset="utf-8"/>

 

 

• X-UA-Compatible:IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分兼容問題.　　

　　例子:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
以上代碼告訴IE瀏覽器，不管是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。  

<meta http-equiv="X-UA-Compatible" content="IE=8">  
以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。  

<meta http-equiv="X-UA-Compatible" content="IE=edge">  
以上代碼告訴IE瀏覽器，IE8/9及之後的版本都會以最高版本IE來渲染頁面。  

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame.
PS：谷歌添加一個插件：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），
這個插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，
實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器。

 

• refresh:自動刷新並指向新頁面。　　

　　　例子:

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
PS：2表明頁面停留2秒後跳轉到後面的網址上

 

• expires:設定網頁的過時時間。　　

　　　例子:

<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
PS：必須使用GMT的時間格式

 

• set-cookie:若是網頁過時，那麼自動刪除本地cookie

　　　　例子:

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
PS：必須使用GMT的時間格式。

• windows-target:強制頁面在當前窗口中以獨立頁面顯示，能夠防止本身的網頁被別人看成一個frame頁調用

　　　　例子:

<meta http-equiv="Window-target" content="_top">

 

 

name

name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

 

• author:標註網頁的做者.

　　例子:

<meta name="author" content="zhn" />

 

• keywords:頁面關鍵詞，用於被搜索引擎收錄.

　　　　例子:

<meta name="keywords" content="web前端,web學習, javascript">

 

• description:頁面描述，用於搜索引擎收錄.

　　　　例子:

　　　　

<meta name="description" content="Mozilla 開發者網絡（MDN）提供有關開放網絡技術（Open Web）的信息，包括 HTML、CSS 和萬維網及 HTML5 應用的 API。它還記錄了 Mozilla 產品的文檔，例如 Firefox OS。">

 

• viewport:用於控制頁面縮放.

　　　例子:

　　

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1, user-scalable=no"> 詳情可查看：http://www.cnblogs.com/lovesong/p/4355029.html

 

• renderer:指定雙核瀏覽器默認以何種方式渲染頁面。

　　例子:

　　

<meta name="renderer" content="webkit">//默認webkit內核
<meta name="renderer" content="ie-comp">//默認IE兼容模式
<meta name="renderer" content="ie-stand">//默認IE標準模式
PS：360瀏覽器支持

 

• generator:說明網站採用的什麼軟件製做.

　　　　例子:

<meta name="generator" content="Microsoft"/>

 

• revised:網頁文檔的修改i時間.

　　　　例子:

　　　　

    
<meta name="revised" content="設計網, 6/24/2015"/>

 

　　　　

• robots:用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引.

　　例子:

　　　　

<meta name="robots" content="none"/>
取值：all|none|index|noindex|follow|nofollow, 默認all
all：文件將被檢索，且頁面上的連接能夠被查詢；
none：文件將不被檢索，且頁面上的連接不能夠被查詢；
index：文件將被檢索；
follow：頁面上的連接能夠被查詢；
noindex：文件將不被檢索，但頁面上的連接能夠被查詢；
nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

 

• copyright:網站版權信息.

　　　　例子:

　　

    
　　<meta name="copyright" content="本頁版權zhn全部。All Rights Reserved" />

 

推薦使用的meta標籤:

<!-- 設置文檔的字符編碼 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其餘任何的 head 內容必須在這些標籤的 *後面* -->

<!-- 容許控制資源的過分加載 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 儘早地放置在文檔中 -->
<!-- 僅應用於該標籤下的內容 -->

<!-- Web 應用的名稱（僅當網站被用做爲一個應用時才使用）-->
<meta name="application-name" content="應用名稱">

<!-- 針對頁面的簡短描述（限制 150 字符）-->
<!-- 在*某些*狀況下，該描述是被用做搜索結果展現片斷的一部分 -->
<meta name="description" content="一個頁面描述">

<!-- 控制搜索引擎的抓取和索引行爲 -->
<meta name="robots" content="index,follow,noodp"><!-- 全部的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->

<!-- 關於你的網站主題的簡短描述 -->
<meta name="subject" content="你的網站主題">

<!-- 很是簡短（少於 10 個字）的描述。主要用於學術論文。-->
<meta name="abstract" content="">

<!-- 完整的域名或網址 -->
<meta name="url" content="https://example.com/">
 

<!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- 地理標籤 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">

 

 

 

　　爲移動設備添加 viewport

　　

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
width=device-width 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊(http://bigc.at/ios-webapp-viewport-meta.orz)

content 參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否容許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），能夠在頁面加載時最小化上下狀態欄。這是一個布爾值，能夠直接這樣寫：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而若是你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。
<meta name="viewport" content="width=device-width,user-scalable=yes">

適配 iPhone 6 和 iPhone 6plus 則須要寫：

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓設備的 viewport 寬設爲 360px，iPhone 6 上倒是 375px，
大部分 5.5 寸安卓機器（好比說三星 Note）的 viewport 寬爲 400，iPhone 6 plus 上是 414px。

 

SEO 優化部分

　　

頁面標題<title>標籤(head 頭部必須)
<title>your title</title>

頁面關鍵詞 keywords
<meta name="keywords" content="your keywords">


頁面描述內容 description
<meta name="description" content="your description">


定義網頁做者 author
<meta name="author" content="author,email address">


定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，一般有以下幾種取值：none，noindex，nofollow，all，index和follow。
<meta name="robots" content="index,follow">

 

　　　　　　

百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，爲此可在 head 內添加

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

 

參考:　　http://www.cnblogs.com/herozhi/p/5993844.html　　http://www.cnblogs.com/lovesong/p/5745893.html　　https://developer.mozilla.org/zh-CN/