HTML meta tag - 網頁設計教學站

HTML meta tag 的功能是用來標示一些網頁資訊給搜尋引擎了解，也就是說 meta tag 的內容並不會直接顯示在網頁上，瀏覽者可以透過檢視原始碼看到 meta tag 的內容，除非網頁設計師有特別隱藏 meta tag 的內容，否則一般瀏覽器的檢視原始碼應該都看得到。常用的 meta tag 是 keywords 與 description 這兩個，分別用來標註網頁的關鍵字以及內容簡介，其他還有許多可以使用的 meta tag，例如標註網頁作者名稱、編輯器名稱、網頁版權 ... 等，不過現在比較少用到這些標註。

HTML meta tag 基本語法

HTML meta tag 共有兩個參數可以使用，第一個參數 name 用來標示是哪一種 meta tag，例如要標示的是網頁關鍵字，就可以使用參數值 keywords，第二個參數 content 則是第一個參數 name 的內容，例如 <meta name="keywords" content="早餐"> 這樣，就表示網頁內容的關鍵字與早餐有關，meta tag 有好幾種不同的 name 可以使用，常見的有下列這幾種：

keywords - 網頁關鍵字
description - 網頁內容描述
author - 網頁作者名稱
generator - 網頁編輯器
copyright - 網頁版權宣告
distribution - 網頁發佈地區

有了這些 name 可以用，接著就來看看 meta tag 要怎麼實際應用在一個網頁中。

HTML meta tag 實際範例

<head>
   <title>歡迎光臨本站</title>
   <meta name="description" content="本站有許多的網頁設計參考資源">
   <meta name="keywords" content="網頁設計,程式設計">
</head>

如果你把以上的內容複製起來，開一個空白文件，把程式碼貼上去並存成 test.html，接著用瀏覽器打開，應該可以看到網頁標題是「歡迎光臨本站」，其他 meta tag 的內容都看不到，透過檢視原始碼的方式，才可以看得到，這就是第一段所提到的，HTML meta tag 的功能主要是寫給搜尋引擎看的，以上就是 HTML meta tag 的基本介紹。

延伸閱讀