html中關于meta標簽的實例詳解

2020-03-24 19:24:45

字體：大中小

來源：轉載

供稿：網友

下面就為大家帶來一篇html meta標簽的使用總結(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

meta標簽作用

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

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

大網站都是怎么寫？

在了解這個標簽之前，我查找了各個主流網站他們的對于Meta的設置，如下：

京東首頁的Meta設置：

XML/HTML Code復制內容到剪貼板

meta charset= gbk

meta name= description content= 京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!

meta name= Keywords content= 網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東

淘寶首頁的Meta設置：

XML/HTML Code復制內容到剪貼板

 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億優質特價商品，同時提供擔保交易(先收貨后付款)、先行賠付、假一賠三、七天無理由退換貨、數碼免費維修等安全交易保障服務，讓你全面安心享受網上購物樂趣！  meta name= keyword content=

youku首頁的Meta設置：

XML/HTML Code復制內容到剪貼板

 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設置：

XML/HTML Code復制內容到剪貼板

 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設置：

XML/HTML Code復制內容到剪貼板

 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設置：

XML/HTML Code復制內容到剪貼板

 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-CompatibleIE8的專用標記，用來指定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瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器。

expires設定網頁的過期時間。 meta http-equiv= expires content= Fri,12Jan200118:18:18GMT

PS：必須使用GMT的時間格式

refresh自動刷新并指向新頁面。 meta http-equiv= Refresh content= 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 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：文件將被檢索；

follow：頁面上的鏈接可以被查詢；

noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；

nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。

copyright網站版權信息

總結

通過大網站對于meta的設置，可以看到常用的有，X-UA-Compatible、keywords、description。

【相關推薦】

1. Html免費視頻教程

2. 分享一個關于HTML知識點的整合