close

http://tw.myblog.yahoo.com/aquaer0128/article?mid=73&l=f&fid=1


[轉貼自]http://tw.myblog.yahoo.com/aquaer0128/article?mid=73&l=f&fid=1


meta標籤元素詳解

先有個概念

網頁如果沒有定義『meta』標籤,瀏覽器將無法從你的網頁收集足夠站台資訊給 user,一般來說,像是語言編碼、關鍵字,版權資訊、站台主要內容等等這些『meta』的web資訊,不僅是瀏覽器會去收集給user,搜索引擎在提供 搜索結果時,也是根據這些『meta』元素資訊提供給user,如果無法取得足夠的資訊,那麼搜索引擎也會根據站台的實際內容提供相應的關鍵字給 user,但是在缺少『meta』資訊的情況下,瀏覽器並不會像搜索引擎那樣從站台裡面尋找相應的內容作為關鍵字給user,也因此,user無法在第一 時間瞭解該站台的服務內容,降低瀏覽的意願。


也許你很那悶,誰會去看『meta』?站台有哪些服務內容直接看網頁不就知道了嗎?


你 的疑問沒有錯,你的質疑也是對的,但有件事情你可能要先瞭解,雖然你可能從來不會透過瀏覽器的『屬性/內容』去查看該站台的『meta』資訊,但是基本上 當你透過搜索引擎搜尋資料時所看到的關鍵字,就是搜索引擎去收集諸多站台的『meta』資訊呈現在你面前的,其次就是頁面的標題與段落內容,這些都是搜索 引擎會去收集的標籤元素。


現在你是不是開始覺得『meta』很重要呢。你的站點訪問流量往往取決於『meta』,當你的『meta』資訊愈齊全,搜索引擎就愈能提供足夠的資訊給user,這樣也能為你的站點帶來一定的訪問流量,至於搜索排名,以Google為例,符合w3c標準的站點,會優先收錄,然後在根據站台提供的『meta』資訊作為排名的依據,愈是符合搜索條件,就愈排在前面。


什麼是『meta』?

『meta』 是用來在HTML文檔中模擬HTTP協議的響應頭報文。『meta』標籤用於網頁的<head>與</head>中, 『meta』標籤的用處很多。『meta』的屬性有兩種:name和http-equiv。name屬性主要用於描述網頁,對應於content(網頁內 容),以便於搜索引擎機器人查找、分類(目前幾乎所有的搜索引擎都使用網上機器人自動搜尋『meta』值來給網頁分類)。這其中最重要的是 description(站點在搜索引擎上的描述)和 keywords(分類關鍵詞),所以應該給每頁加一個meta值。


它是不成對的,如果頁面是xhtml格式就必須關閉自身

『meta』是一個不成對的單一標籤。按照w3c的規定,如果頁面採用XHTML格式,就必須在最後的地方( >之前 )加上斜線來關閉自身的標籤。


HTML4.01的定義︰


  1. <meta vcontent="all" name="robots">
<meta vcontent="all" name="robots">

XHTML的定義(所有XHTML版本)︰


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

儘管現在的瀏覽器都保留了HTML4.01對『meta』標籤不關閉的支援,但這畢竟是不符合規範的寫法,因此建議您採用向XML過渡的XHTML文件類型來定義。


它必須放在<head>與</head>的區域裡面

『meta』一直以來就一直待在<head>與</head>裡面,從不離開的,你也不能把他請出來,就像玩象棋一樣,將與帥深居九宮不出。


把『head』翻譯成中文的話,就是頭部的意思,那麼也就是說,『meta』標籤必須被包含在頭部的區域裡,形成一個健全的結構,成為一個完整的『頭部訊息』。


它允許在下列中的DTD定義

Strict DTD、Transitional DTD、Frameset DTD、XHTML1.1、XHTMLBasice


meta屬性的解釋與應用

meta的屬性值

屬性與屬性之間必須空一格。


超文字傳輸協定
屬性︰http-equiv
值︰Content-Type、Content-Language、Refresh、Pragma、windows-Target


內容︰
屬性︰content
值︰text/html、zh-TW、關鍵字、作者資訊、頁面生成的工具名稱、站台主要內容、版權說明
屬性值還有針對頁面檢索的定義值︰
值︰all、noneindexnoindexfollownofollow
說明︰
設定為all:文件將被檢索,且頁面上的鏈接可以被查詢
設定為none:文件將不被檢索,且頁面上的鏈接不可以被查詢
設定為index:文件將被檢索
設定為follow:頁面上的鏈接可以被查詢
設定為noindex:文件將不被檢索,但頁面上的鏈接可以被查詢
設定為nofollow:文件將不被檢索,頁面上的鏈接可以被查詢

名稱︰
屬性︰name
值︰author、Generator、description、keywords、Copyright、robots


實際的應用例子︰

頁面語言編碼


  1. <meta http-equiv="Content-Type" content="text/html; charset=big5" />
<meta http-equiv="Content-Type" content="text/html; charset=big5" />

如果是正體中文,則指定頁面以『big5』碼顯示,英文是『ISO-8859-1』、簡體『gb2312』、日文『Shift_JIS』、韓文『euc-kr』。


如果你的頁面可能會包含其他國家的語言,那麼建議最好將頁面以『utf-8』萬國瑪來顯示,除了說編碼改成『utf-8』來顯示之外,文件本身也要存成『utf-8』才行。


給頁面指定一個地區語言

  1. <meta http-equiv="Content-Language" content="zh-TW" />
<meta http-equiv="Content-Language" content="zh-TW" />

根據所在的國家來指定一個符合當地的語言,『zh-TW』就是中文台灣、『zh-CN』是中文中國。


告訴搜索引擎頁面將如何被檢索

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

此屬性請參考上面的頁面檢索定義值


站台製作的作者與聯絡方式

  1. <meta name="author" content="k236740@gmail.com,藤原直樹" />
<meta name="author" content="k236740@gmail.com,藤原直樹" />

用以說明生成工具製

  1. <meta name="Generator" content="EmEditor6.0.0.4" />
<meta name="Generator" content="EmEditor6.0.0.4" />

在『content="工具名稱"』裡面填入此站台用什麼名稱的軟體製作的,例如FrontPage、DreamWeaver。


告訴查詢引擎你的網站台的主要內容

  1. <meta name="description" content="web標準的教程站點,推動web標準在台灣的應用" />
<meta name="description" content="web標準的教程站點,推動web標準在台灣的應用" />

向查詢引擎說明你的網頁的關鍵詞

  1. <meta name="keywords" content="web標準,web標準教程, web, xhtml, css,xhtml+css, w3c" />
<meta name="keywords" content="web標準,web標準教程, web, xhtml, css,xhtml+css, w3c" />

版權說明

  1. <meta name="Copyright" content="angel-devil.org/sir/blog/,自由版權,任意轉載" />
<meta name="Copyright" content="angel-devil.org/sir/blog/,自由版權,任意轉載" />

頁面定時跳轉


  1. <meta http-equiv="Refresh" content="3;url=www.angel-devil.org/sir/blog/" />
<meta http-equiv="Refresh" content="3;url=www.angel-devil.org/sir/blog/" />

定時讓網頁在指定的時間n內,跳轉到指定的頁面。


此屬性可能被百度視為一種作弊的手段,Google的我不是很瞭解。


設定網頁的到期時間


  1. <meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT" />
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT" />

可以用於設定網頁的到期時間,一旦過期則必須重新到伺服器上讓瀏覽器重新讀取。需要注意的是必須使用GMT時間格式。


禁止快取

  1. <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

強制頁面在當前窗口中以獨立頁面顯示


  1. <meta http-equiv="windows-Target" content="_top" />
<meta http-equiv="windows-Target" content="_top" />

強制頁面在當前窗口中以獨立頁面顯示,可以防止自己的網頁被別人當作一個frame頁讀入。


以上內容由本站原創,轉貼請註明以下資訊
作者︰藤原直樹
來源︰http://adw.tw/sir/blog/read.php/4.htm

站點首頁︰http://adw.tw/sir/blog/



arrow
arrow
    全站熱搜
    創作者介紹
    創作者 chyuanyiin 的頭像
    chyuanyiin

    PCTOP 銓尹行銷顧問有限公司 CHYUANYIIN 的談天說地溫馨小窩

    chyuanyiin 發表在 痞客邦 留言(0) 人氣()