關於Mate標籤的詳盡解釋,請查看w3school 網址爲:http://www.w3school.com.cn/tags/tag_meta.asphtml
meta標籤做用html5
META標籤是HTML標記HEAD區的一個關鍵標籤,提供文檔字符集、使用語言、做者等基本信息,以及對關鍵詞和網頁等級的設定等,最大的做用是可以作搜索引擎優化(SEO)。android
PS:便於搜索引擎機器人查找、分類,互聯網應用應該要注意。web
大網站都是怎麼寫?chrome
在瞭解這個標籤以前,我查找了各個主流網站他們的對於Meta的設置,以下:windows
京東首頁的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"> <meta 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"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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, |
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。