html meta標籤使用總結（轉）

以前學習前端中，對meta標籤的瞭解僅僅只是這一句。

<meta charset="UTF-8">

可是打開任意的網站，其head標籤內都有一列的meta標籤。好比我博客的。

可是本身卻很不熟悉，因而把meta標籤加入了寒假學習計劃的最前方。

簡介

在查閱w3school中，第一句話中的「元數據」就讓我開始了Google之旅。而後很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息，Google和百度都沒有相關的詞條。但元數據在Google就有詳細解釋。因此這兒採用英文版W3school的解釋。）

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

不難看出，其中的關鍵是metadata，中文名叫元數據，是用於描述數據的數據。它不會顯示在頁面上，可是機器卻能夠識別。這麼一來meta標籤的做用方式就很好理解了。

用處

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

這句話對meta標籤用處的介紹，簡潔明瞭。翻譯過來就是：meta經常使用於定義頁面的說明，關鍵字，最後修改日期，和其它的元數據。這些元數據將服務於瀏覽器（如何佈局或重載頁面），搜索引擎和其它網絡服務。

組成

meta標籤共有兩個屬性，分別是http-equiv屬性和name屬性。

1. name屬性

name屬性主要用於描述網頁，好比網頁的關鍵詞，敘述等。與之對應的屬性值爲content，content中的內容是對name填入類型的具體描述，便於搜索引擎抓取。meta標籤中name屬性語法格式是：

<meta name="參數"content="具體的描述">。 

其中name屬性共有如下幾種參數。 (A-C爲經常使用屬性)

A. keywords(關鍵字)

說明：用於告訴搜索引擎，你網頁的關鍵字。舉例：

<meta name="keywords"content="Lxxyx,博客，文科生，前端">

B. description(網站內容的描述)

說明：用於告訴搜索引擎，你網站的主要內容。舉例：

<meta name="description"content="文科生，熱愛前端與編程。目前大二，這是個人前端博客"> 

C. viewport(移動端的窗口)

說明：這個概念較爲複雜，具體的會在下篇博文中講述。這個屬性經常使用於設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（經常使用範例）：

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

D. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面須要索引，哪些頁面不須要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

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

具體參數以下：

1.none : 搜索引擎將忽略此網頁，等價於noindex，nofollow。

2.noindex : 搜索引擎不索引此網頁。

3.nofollow: 搜索引擎不繼續經過此網頁的連接索引搜索其它的網頁。

4.all : 搜索引擎將索引此網頁與繼續經過此網頁的連接索引，等價於index，follow。

5.index : 搜索引擎索引此網頁。

6.follow : 搜索引擎繼續經過此網頁的連接索引搜索其它的網頁。

E. author(做者)

說明：用於標註網頁做者舉例：

<meta name="author"content="Lxxyx,841380530@qq.com"> 

F. generator(網頁製做軟件)

說明：用於標明網頁是什麼軟件作的舉例(不知道能不能這樣寫)：

<meta name="generator"content="Sublime Text3"> 

G. copyright(版權)

說明：用於標註版權信息舉例：

<meta name="copyright"content="Lxxyx"> //表明該網站爲Lxxyx我的版權全部。

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：若是頁面不是常常更新，爲了減輕搜索引擎爬蟲對服務器帶來的壓力，能夠設置一個爬蟲的重訪時間。若是重訪時間太短，爬蟲將按它們定義的默認時間來訪問。舉例：

<meta name="revisit-after" content="7 days" >

I. renderer(雙核瀏覽器渲染方式)

說明：renderer是爲雙核瀏覽器準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面。好比說360瀏覽器。舉例：

<meta name="renderer" content="webkit"> //默認webkit內核 <meta name="renderer" content="ie-comp"> //默認IE兼容模式 <meta name="renderer" content="ie-stand"> //默認IE標準模式

2. http-equiv屬性

介紹以前，先說個小插曲。看文檔和博客關於http-equiv的介紹時，有這麼一句。

http-equiv顧名思義，至關於http的文件頭做用。

一開始看到這句話的時候，我是迷糊的。由於我看各種技術名詞，都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent"，意思是相等，至關於。而後我腦子裏出現了大大的迷惑：「HTTP相等？」

後來還準備去Segmentfault提問來着。結果在寫問題的時候，忽然反應出equivalent還有至關於的意思。意思就是至關於http的做用。至於文件頭是哪兒出來的，估計是從其做用來分析的。我認爲顧名思義並不能得出"至關於http的文件頭做用"這個論斷。

這個我所認爲的http-equiv意思的簡介。

至關於HTTP的做用，好比說定義些HTTP參數啥的。

meta標籤中http-equiv屬性語法格式是：

<meta http-equiv="參數" content="具體的描述">

其中http-equiv屬性主要有如下幾種參數：

A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用於設定網頁字符集，便於瀏覽器解析與渲染頁面舉例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦 <meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8

B. X-UA-Compatible(瀏覽器採起何種版本渲染當前頁面)

說明：用於告知瀏覽器以何種版原本渲染頁面。（通常都設置爲最新模式，在各大框架中這個設置也很常見。）舉例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面

C. cache-control(指定請求和響應遵循的緩存機制)

用法1.

說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。這一段內容我在網上找了好久，但都沒有找到滿意的。最後終於在Google Developers中發現了我想要的答案。

舉例:

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

共有如下幾種用法：

1. no-cache: 先發送請求，與服務器確認該資源是否被更改，若是未被更改，則使用緩存。

2. no-store: 不容許緩存，每次都要去服務器上，下載完整的響應。（安全措施）

3. public : 緩存全部響應，但並不是必須。由於max-age也能夠作到相同效果

4. private : 只爲單個用戶緩存，所以不容許任何中繼進行緩存。（好比說CDN就不容許緩存private的響應）

5. maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器從新請求。例如：max-age=60表示響應能夠再緩存和重用 60 秒。

參考連接：HTTP緩存

用法2.(禁止百度自動轉碼)

說明：用於禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，可是轉碼效果不少時候卻不盡人意。因此能夠在head中加入例子中的那句話，就能夠避免百度自動轉碼了。舉例：

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

D. expires(網頁到期時間)

說明:用於設定網頁的到期時間，過時後網頁必須到服務器上從新傳輸。舉例：

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

E. refresh(自動刷新並指向某頁面)

說明：網頁將在設定的時間內，自動刷新並調向設定的網址。舉例:

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒後跳轉向個人博客

F. Set-Cookie(cookie設定)

說明：若是網頁過時。那麼這個網頁存在本地的cookies也會被自動刪除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式 <meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體範例

最後

暫時總結的就這麼多了，meta標籤的自定義屬性實在太多了。因此只去找了經常使用的一些，還有像 Window-target 這樣已經基本被廢棄的屬性，我也沒有添加。

 

meta標籤做用

META標籤是HTML標記HEAD區的一個關鍵標籤，提供文檔字符集、使用語言、做者等基本信息，以及對關鍵詞和網頁等級的設定等，最大的做用是可以作搜索引擎優化（SEO）。

PS：便於搜索引擎機器人查找、分類，互聯網應用應該要注意。

大網站都是怎麼寫？

在瞭解這個標籤以前，我查找了各個主流網站他們的對於Meta的設置，以下：

京東首頁的Meta設置：

<meta charset="gbk">
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!">
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東">

淘寶首頁的Meta設置：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘寶網 - 亞洲最大、最安全的網上交易平臺，提供各種服飾、美容、家居、數碼、話費/點卡充值… 8億優質特價商品，同時提供擔保交易(先收貨後付款)、先行賠付、假一賠3、七天無理由退換貨、數碼免費維修等安全交易保障服務，讓你全面安心享受網上購物樂趣！">
<meta name="keyword" content="">

youku首頁的Meta設置：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="優酷-中國領先視頻網站,提供視頻播放,視頻發佈,視頻搜索 - 優酷視頻" />
<meta name="keywords" content="視頻,視頻分享,視頻搜索,視頻播放,優酷視頻" />
<meta name="description" content="視頻服務平臺,提供視頻播放,視頻發佈,視頻搜索,視頻分享" />

鬥魚首頁的Meta設置：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<name="keywords" content="DOTA2,熱門遊戲直播,遊戲直播,高清遊戲直播,手機遊戲直播,電子競技直播" />
<meta name="description" content="鬥魚 - 全民直播平臺提供高清、快捷、流暢的視頻直播和遊戲賽事直播服務，包含DOTA2等各種熱門遊戲賽事直播和各類名家大神遊戲直播，內容豐富，推送及時，帶給你不同的視聽體驗，一切盡在鬥魚 - 全民直播平臺。" />

騰訊網首頁的Meta設置：

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新聞 新聞中心 事實派 新聞頻道,時事報道">
<meta name="description" content="騰訊新聞，事實派。新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站">
<meta name="author" content="skeetershi" />

起點小說網首頁的Meta設置：

<meta name="keywords" content="小說,小說網,言情小說,青春小說,玄幻小說,武俠小說,都市小說,歷史小說,網絡小說,原創網絡文學" />
<meta name="description" content="小說閱讀,精彩小說盡在起點小說。起點小說提供玄幻小說,武俠小說,原創小說,網遊小說,都市小說,言情小說,青春小說,歷史小說,軍事小說,網遊小說,科幻小說,恐怖小說,首發小說最新章節免費小說閱讀,精彩盡在起點小說！ver:071011熱門小說:。" />
<meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<meta name="baiduspider" content="all" />
<meta name="copyright" content="本頁版權 www.qidian.com 起點中文網全部。All Rights Reserved" />
<meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />
<meta name="application-name" content="起點中文小說網" /
<meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication-tooltip" content="小說閱讀_起點中文小說網|免費小說,玄幻小說,武俠小說,言情小說,青春小說,小說網各種小說下載" />
<meta name="msapplication-task" content="name=起點小遊戲;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" />
<meta name="msapplication-task" content="name=藏書架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" />
<meta name="msapplication-task" content="name=讀書客戶端;action-uri=http://c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />
<meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />
<meta name="msapplication-task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" />
<meta property="qc:admins" content="204236767661141166375" />

meta詳解

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

http-equiv

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瀏覽器。
expires	設定網頁的過時時間。	<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> PS：必須使用GMT的時間格式
refresh	自動刷新並指向新頁面。	<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> PS：2表明頁面停留2秒後跳轉到後面的網址上
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">
cache-control	緩存機制	<meta http-equiv="cache-control" content="no-cache"> Public：指示響應可被任何緩存區緩存。 Private：指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這容許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其餘用戶的請求無效。 no-cache：指示請求或響應消息不能緩存。 no-store：用於防止重要的信息被無心的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。 max-age：指示客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應。 min-fresh：指示客戶機能夠接收響應時間小於當前時間加上指定時間的響應。 max-stale：指示客戶機能夠接收超出超時期間的響應消息。若是指定max-stale消息的值，那麼客戶機能夠接收超出超時期指定值以內的響應消息。

name

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

值	描述	例子
author	標註網頁的做者	<meta name="author" content="dashen" />
keywords	頁面關鍵詞，用於被搜索引擎收錄	<meta name="keywords" content="新聞,新聞中心, 新聞頻道">
description	頁面描述，用於搜索引擎收錄	<meta name="description" content="新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站">
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	網頁文檔的修改時間	<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="本頁版權XXX全部。All Rights Reserved" />

 

 

總結

經過大網站對於meta的設置，能夠看到經常使用的有，X-UA-Compatible、keywords、description。

 

參考文獻

1. http://www.haorooms.com/post/html_meta_ds

 

 

轉 ： http://www.cnblogs.com/lovesong/p/5745893.html