html中有關meta標籤的用法詳解

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

meta標籤作用

#META標籤是HTML標記HEAD區的關鍵標籤，提供文件字符集、使用語言、作者等基本訊息，以及關鍵字和網頁等級的設定等，最大的作用是能夠做搜尋引擎優化（SEO）。

PS：方便搜尋引擎機器人尋找、分類，網路應用程式應該要注意。

大網站都是怎麼寫？

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

京東首頁的Meta設定：

XML/HTML Code#複製內容到剪貼簿

1. ##<meta charset="gbk"#>

3. #<meta name="description" content

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

>

<

meta name=

"Keywords"

 
1. content

   ="線上購物,網路商城,手機,筆記型電腦,MP3,CD,VCD,DV,相機,數位,配件,手錶,記憶卡,京東">淘寶首頁的Meta設定：

3. #XML/HTML Code複製內容到剪貼簿#<meta charset

   =
"utf-8"

4. ><meta  http-equiv="X-UA-Compatible" content

   =
"IE=edge,chrome=1"

5. #><#meta name="renderer" content

   =
"webkit"

6. #><meta  name="spm-id" content

   =
"a21bo"

>

###################### ############<######meta### ###name###=###"description"### ###content###=# ##"淘寶網 - 亞洲最大、最安全的網路交易平台，提供各類服飾、美容、家居、數位、電話/點卡儲值… 8億優質特價商品，同時提供擔保交易(先收貨後付款) 、先行賠償、假一賠三、七天無理由退換貨、數碼免費維修等安全交易保障服務，讓你全面安心享受網上購物樂趣！ "######>##################<######meta### ###name###=### "keyword"### ###content###=###""######>#################youku首頁的Meta設置：#####################XML/HTML Code######複製內容到剪貼簿#######

1. <meta charset="utf-8">

2. <meta http-equiv="X-UA-Compatible" content="IE=Edge">

3. <meta name="title" content="優酷-中國領先影片網站,提供影片播放,影片發布,影片搜索- 優酷影片" />

4. #<meta #name ="keywords" content="影片,影片分享,影片搜尋,影片播放,優酷影片" />

1. #<meta name="description" content#= "視訊服務平台,提供影片播放,影片發佈,影片搜尋,影片分享"

    
/>

2. 鬥魚首頁的Meta設定：XML/HTML Code複製內容到剪貼簿

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

4. <#meta  name="renderer" content="webkit|ie-comp|ie-stand">

5. <meta http-equiv="X-UA-Compatible"  content="IE=Edge,chrome=1"#>

< ;

meta

 
name

=

"keywords" content="DOTA2,熱門遊戲直播,遊戲直播,高清遊戲直播,手機遊戲直播,電競直播"

 

/>

1. #<meta name="description"

    
content
2. =

   "鬥魚 - 全民直播平台提供高畫質、快速、流暢的視訊直播和遊戲賽事直播服務，包含DOTA2等各類熱門遊戲賽事直播及各種名家大神遊戲直播，內容豐富，推播及時，帶給你不一樣的視聽體驗，一切盡在斗魚 - 全民直播平台。 " />#騰訊網站首頁的Meta設定：

   ################################################################################################################################## ######XML/HTML Code######複製內容到剪貼簿##################<######meta## # ###charset###=###"UTF-8"######>##################<################################################################################################################################################################################################################# #meta### ###name###=###"renderer"### ###content###=###"webkit"### ###/>##### #

3. <meta #http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1"#>

4. <meta name="keywords" content="新聞 新聞中心 事實派 新聞頻道,時事報道">

5. <#meta name="description" content="騰訊新聞，事實派。新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報告入口網站">

6. #<meta ##name ="author" content="skeetershi" />

1. 起點小說網首頁的Meta設定：

2. #XML/HTML Code複製內容到剪貼簿<meta name="keywords"

    
content
3. =

   "小說,小說網,浪漫小說,青春小說,奇幻小說,武俠小說,都會小說,歷史小說,網路小說,原創網路文學" />#<meta name="description" content# ="小說閱讀,精彩小說盡在起點小說。起點小說提供奇幻小說,武俠小說,原創小說,網遊小說,都市小說,言情小說,青春小說,歷史小說,軍事小說,網遊小說,科幻小說,恐怖小說,首發小說最新章節免費小說閱讀,精彩盡在起點小說！

   <
4. meta

    http-equiv="Content-Type" id="meta_ContentType"  content="text/html;charset=UTF-8" />

5. <meta name="robots" content="all" />

6. <#meta name="googlebot" content="all" />

7. < meta name="baiduspider" content="all" />

   ############<######meta### ###name###=###"copyright"### ###content####=# ##"本頁版權 www.qidian.com 起點中文網所有。 All Rights Reserved"### ###/>#######

8. <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" />

9. <meta name="application-name" content="起點中文小說網" /   

10. #<meta name="msapplication-starturl " content="/Default.aspx?_s=ie9" />

11. <meta name="msapplication-tooltip" content="小說閱讀_起點中文小說網|免費小說,奇幻小說,武俠小說,言情小說,青春小說,小說網各類小說下載" />

12. <meta name="msapplication-task" content="name=起點小遊戲;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" /> ;

13. <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" />

14. <#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" />

15. #<meta name="msapplication-task" content#="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />

16. <meta name="msapplication -task" content="name=搜尋;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/search.ico" />

17. < property="qc:admins" content="204236767661141166375" />

meta詳解

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

http-equiv

http-equiv相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

##content-typeISO-8859-1時，代表說明網站是採用的編碼是英文； 以上程式碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。   以上程式碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。  expires#設定網頁的過期時間。            refresh自動刷新並指向新頁面。 #set-cookie如果網頁過期，那麼自動刪除本地cookie。            windows-target強制頁面在目前視窗中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁呼叫max-age：指示客戶機可以接收存活期不大於指定時間（以秒為單位）的回應。 min-fresh：指示客戶機可以接收回應時間小於目前時間加上指定時間的回應。

值	描述	範例
		#設定頁面使用的字元集 GB2312時，代表說明網站是採用的編碼是簡體中文；
UTF-8時，代表世界通用的語言編碼；	PS：html5頁面的做法是直接使用	X-UA-Compatible IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分相容問題。 以上程式碼告訴IE瀏覽器，無論是否用DTD聲明文件標準， IE8/9都會以IE7引擎來渲染頁面。
以上程式碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以啟動Chrome Frame.	PS：Google新增一個外掛程式：Google Chrome Frame（Google內嵌瀏覽器框架GCF ），這個插件可以讓使用者的IE瀏覽器外不變，但使用者在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支援IE6、7、8等多個版本的IE瀏覽器。
	PS：必須使用GMT的時間格式
	PS：2代表頁面停留2秒後跳到後面的網址上
	PS：必須使用GMT的時間格式。
		cache-control ##快取機制             Public：指示回應可被任何快取區快取。 Private：指示對於單一使用者的整個或部分回應訊息，不能被共用快取處理。這允許伺服器僅描述當使用者的部分回應訊息，此回應訊息對於其他使用者的請求無效。 no-cache：指示請求或回應訊息不能快取。 no-store：用來防止重要的資訊被無意的發布。在請求訊息中發送將使得請求和回應訊息都不使用快取。

###max-stale：指示客戶機可以接收超出逾時期間的回應訊息。如果指定max-stale訊息的值，那麼客戶機可以接收超出超時期指定值之內的回應訊息。 ################

name

name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人尋找資訊和分類資訊的。

##頁面關鍵字，用於被搜尋引擎收錄##description#viewport#rendererPS：360瀏覽器支援##generator說明網站的採用的什麼軟體製作revised#網頁文件的修改時間robots用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。 copyright網站版權資訊

值	描述	範例
author	#標註網頁的作者
keywords
#頁面描述，用於搜尋引擎收錄
用於控制頁面縮放
指定雙核心瀏覽器預設以何種方式渲染頁面。	//預設webkit核心//預設IE相容模式< ;meta name="renderer" content="ie-stand">//預設IE標準模式
	取值：all|none|index|noindex|follow|nofollow, 預設all	#all：檔案將被檢索，且頁面上的連結可以被查詢； none：文件將不會被檢索，且頁面上的連結不可以被查詢； index：文件將被檢索； follow：頁面上的連結可以被查詢； #noindex：文件將不會被檢索，但頁面上的連結可以被查詢； nofollow：文件將不會被檢索，頁面上的連結可以被查詢。
	#以上這篇html meta標籤的使用總結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

以上是html中有關meta標籤的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！