html meta標籤

標籤：des   style   blog   tar   ext   get   

META元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。

META標籤位於文檔的頭部，不包含任何內容。META標籤的屬性定義了與文檔相關聯的成對的名稱和數值。

<meta>標籤的屬性：
http-equiv:把 content 屬性關聯到 HTTP 頭部。
name:把 content 屬性關聯到一個名稱。
scheme:定義用於翻譯 content 屬性值的格式
content:定義與 http-equiv 或 name 屬性相關的元資訊.

 

理解Name和Content:
META的NAME屬性就說說明當前的META標籤是什麼類型,以便於搜尋引擎抓取,索引網頁。相應的Content就是告訴搜尋引擎相關的資訊。
打個比方<meta name="keywords" content="meta" />這行代碼的意思就是說:這個網頁的關鍵詞是meta”
Name的常用取值有下面幾種
1、Keywords:關鍵字,即告訴搜尋引擎,這個網頁的主題是什麼。樣本:<meta name="Keywords" Content="關鍵字,關鍵字1,關鍵字2,關鍵字3,...,..." />
每個關鍵字之間,應該用用英文的逗號,”分隔開。
當數個META元素提供文檔語言從屬資訊時,搜尋引擎會使用lang特性來過濾並通過使用者的語言優先參照來顯示搜尋結果。例如:
<meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
<meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">
2、Description:簡介,即告訴搜尋引擎,這個網頁的大致內容。就好像Keywords是手機,Description再詳細說一下手機的大體功能、優勢等等。
樣本:<meta name="Description" Content="這個網頁講述了的META用法...">
3、Robots:純粹寫給搜尋引擎看的,因為Keywords和Description,人類還可以看懂,而Robots是非專業人士所無法理解的。
當name為Robots時,Content選擇性參數有
index:當前頁面可以被抓取
follow:被當前頁面內所連結的頁面可以抓取
noindex:當前頁面不可以被抓取
nofollow:被當前頁面內所連結的頁面不可以抓取
由於Content的內容可以是雙選的,例如CONTENT="INDEX,FOLLOW",所以上述這四個參數,共可以組成4種不同的雙選結果。
其中
<META NAME="Robots" CONTENT="index,follow" />可以寫成<META NAME="Robots" CONTENT="all" />
<META NAME="Robots" CONTENT="noindex,nofollow" />可以寫成<META NAME="Robots" CONTENT="none" />
4、Author:作者,即告訴搜尋引擎,這個頁面的作者是誰,一般那種文章性質的頁面,這個屬性被應用得比較多。
樣本<meta name="Author" Content="czBin,[email protected]">
5、Copyright:著作權,告訴搜尋引擎,這個頁面的著作權是屬於誰的。
樣本:<meta name="Copyright" Content="著作權資訊">
6、Generator:製作軟體,難道搜尋引擎連這個也需要知道?用FrontPage和Dreamweaver製作出的頁面,抓取方式不同嗎?
樣本:<meta name="Generator" Content="PCDATA|FrontPage|">
7、revisit-after:更新時間,即告訴搜尋引擎,這個頁面多長時間會更新,到時候,需要來重新抓取樣本:<META name="revisit-after" CONTENT="2 days">

 

 

理解HTTP-EQUIV和Content:
META的HTTP-EQUIV屬性,其作用類似於HTTP頭協議,它會告訴瀏覽器一些關於字元設定,頁面重新整理,cookie,和緩衝等等相關資訊。
常用的HTTP-EQUIV取值有如下11種:
1:Content-Type:聲明頁面所適用的的字元集,以及頁面文件屬性。樣本:
<meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
告訴瀏覽器,該頁面為HTML類文檔,並且,適用gb2312(中文)作為預設字元。
2、Refresh:設定頁面重新整理或自動跳轉的時間
樣本:
<meta http-equiv="Refresh" Content="60">
Content="60"的意思是說,60秒後,頁面重新整理
<meta http-equiv="Refresh" Content="10; Url=http://www.isinwin.cn">
Content="10 的意思是說,10秒後,網頁將自動跳轉。

3、Expires:設定網頁的到期時間,當網頁到期後,必須重新讀取頁面資訊。
樣本:
<meta http-equiv="Expires" Content="Fri, 15 Jun 2007 01:13:13 GMT">
<meta http-equiv="Expires" Content="0">
時間格式必須為GMT標準時間,Content設定為0則代表該網頁永不到期。

4、Pragma:禁止瀏覽器緩衝網頁。樣本:
<meta http-equiv="Pragma" Content="No-cach">
禁止瀏覽器快取頁面面（但是瀏覽者同樣可以儲存頁面）

5、Set-Cookie :設定cookie的到期時間。樣本:
<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,　21-Oct-98 16:14:21 GMT; path=/">
6、Window-target:強制頁面在當前視窗以獨立頁面顯示。
樣本:
<meta http-equiv="Widow-target" Content="_top">
這個屬性是用來防止別人在架構裡調用你的頁面。Content選項:_blank、_top、_self、_parent。

 

HTML 4.01 與 HTML 5 之間的差異
在 HTML 5 中，不再支援 scheme 屬性。
在 HTML 5 中，有一個新的 charset 屬性，它使字元集的定義更加容易。
在 HTML 4.01 中，不得不這麼寫：
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
在 HTML 5 中，這樣就夠了：
<meta charset="ISO-8859-1">

 

參考：
http://www.w3school.com.cn/tags/tag_meta.asp
http://blog.csdn.net/yixiaoqingyuz/article/details/4329975

http://www.w3school.com.cn/html5/html5_meta.asp