HTML meta 標籤

HTML meta 標籤可以用來提供網頁內容的資訊給瀏覽器或是搜尋引擎,例如網頁內容的描述、網頁重要關鍵字、網頁編碼等都是常用 meta 來標示的網頁資訊,另外還有網頁作者、網頁發佈時間、所使用的編輯器等較不重要的資訊,也可以透過 META TAG 來標示,META 的功能僅是用來註明這些網頁資訊,且提供給瀏覽器或是搜尋引擎,並非是要給寫給瀏覽網頁的"人"看的內容。

HTML meta 標籤寫在 head 範例
<head>
<title>測試網頁</title>
<meta name="description" content="這裡是網頁的簡短描述">
<meta name="keywords" content="關鍵字 1,關鍵字 2">
</head>
標準的 <meta> 標籤沒有結尾,直接將參數寫在 <meta> 內即可,一個網頁內可以有很多個不同的 <meta> 標籤,全部都要寫在 head 標籤內,範例中的 title 標籤是用來標示網頁標題用的,可以寫在 <meta> 標籤之前,也可以寫在 <meta> 標籤之後。

傳統的 HTML meta 標籤的功能,共有兩個重要的部分,分別為 name 與 http-equiv,隨著 HTML 的版本更新,到現在最新的 HTML5 已經開始支援 charset 的語法,以下就這三個部分製作成表,提供給各位參考。

HTML meta name 常用屬性
語法說明
<meta name="description" content="網頁簡短描述">用來寫網頁的簡短描述。
<meta name="keywords" content="網頁關鍵字">用來放置網頁關鍵字。
<meta name="author" content="作者姓名">
記錄網頁的作者名稱
<meta name="generator" content="編輯器名稱">
用來記錄網頁編輯器名稱
<meta name="copyright" content="網頁版權">
用來標示網頁的版權或著作權聲明
<meta name="distribution" content="網頁發佈地區">
用來記錄網頁的發佈地區

最常用到的 meta tag 其實僅有前面兩個,也就是 name=descript 以及 name=keywords,每個 meta 使用 name 的時候,都會搭配 content 來呈現資訊內容,簡單來說,name 代表資訊項目,content 代表資訊值。

HTML meta http-equiv 常用屬性
語法說明
<meta http-equiv="Content-Type" content="text/html"; charset="uft-8″>
網頁內容的種類以及編碼
<meta http-equiv="Content-Language" content="zh-TW">
網頁所使用的語言種類
<meta http-equiv="Refresh" content="time">
自動更新網頁的時間
<meta http-equiv="Pragma" content="no-cache">
禁止瀏覽器用快取開啟網頁
<meta http-equiv="windows-Target" content="_top">
強制在單一視窗中顯示網頁

範例請參閱:HTML meta http-equiv 屬性

HTML 5 新增的 meta 功能
語法說明
<meta charset="UTF-8">
設定網頁編碼,UTF-8 是萬國碼

HTML5 可說是 HTML 網頁進化幅度非常大的一個版本,僅需用如此簡短的寫法就能夠標示網頁的編碼,也隨著 UTF-8 萬國碼的普及,建議各位設計師在設計網頁時,盡量以 UTF-8 為主,畢竟這樣在較多國家不同版本的瀏覽器,比較不容易出錯。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C