概要
meta元素可提供有關(guān)頁(yè)面的元信息(meta-information),比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。<meta> 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。——W3School
屬性
必要屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| content | some text | 定義與http-equiv或name屬性相關(guān)的元信息， 并且始終要和 name 屬性或 http-equiv 屬性一起使用。 |
<head>
<meta name="description" content="Free Web tutorials">
</head>
可選屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| http-equiv | content-type/expire/ refresh | 把content屬性關(guān)聯(lián)到HTTP頭部。 |
| name | author / description / keywords / generator / revised / others | 把 content 屬性關(guān)聯(lián)到一個(gè)名稱。 |
| content | some text | 定義用于翻譯 content 屬性值的格式。 |
屬性解析
name
定義
name 屬性規(guī)定元數(shù)據(jù)的名稱。 specifies the name for the metadata.name 屬性規(guī)定屬性的信息/值的名稱。
如果設(shè)置了 http-equiv 屬性，則不應(yīng)該設(shè)置 name 屬性。
語(yǔ)法
<meta name="value">
屬性值
| 值 | 描述 |
|---|---|
| application-name | 規(guī)定頁(yè)面所代表的 Web 應(yīng)用程序的名稱。 |
| author | 規(guī)定文檔的作者的名字。</br>實(shí)例： <meta name="author" content="zyy"> |
| description | 規(guī)定頁(yè)面的描述。搜索引擎會(huì)把這個(gè)描述顯示在搜索結(jié)果中。實(shí)例： <meta name="description" content="Free web tutorials"> |
| generator | 規(guī)定用于生成文檔的一個(gè)軟件包（不用于手寫頁(yè)面）。</br>實(shí)例： <meta name="generator" content="FrontPage 4.0"> |
| keywords | 規(guī)定一個(gè)逗號(hào)分隔的關(guān)鍵詞列表 - 相關(guān)的網(wǎng)頁(yè)（告訴搜索引擎頁(yè)面是與什么相關(guān)的）。</br>提示：總是規(guī)定關(guān)鍵詞（對(duì)于搜索引擎進(jìn)行頁(yè)面分類是必要的）。</br>實(shí)例： <meta name="keywords" content="HTML, meta tag, tag reference"> |
注意更多屬性可查看Meta name 屬性
實(shí)例
<head>
<meta name="description" content="zyy'meta">
<meta name="keywords" content="標(biāo)簽,HTML,meta name">
<meta name="author" content="zyy">
</head>
http-equiv
定義
http-equiv 屬性提供了屬性的信息/值的 HTTP 頭。
http-equiv 屬性可用于模擬一個(gè) HTTP 響應(yīng)頭。
使用 http-equiv 已經(jīng)不是規(guī)定 HTML 文檔的字符集的唯一方式：
- HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5： <meta charset="UTF-8">
語(yǔ)法
<meta http-equiv="content-type|default-style|refresh">
屬性值
| 值 | 描述 |
|---|---|
| content-type | 規(guī)定文檔的字符編碼。</br>實(shí)例：<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| default-style | 規(guī)定要使用的預(yù)定義的樣式表。</br>實(shí)例：<meta http-equiv="default-style" content="the document's preferred stylesheet"></br>注釋：上面 content 屬性的值必須匹配同一文檔中的一個(gè) link 元素上的 title 屬性的值，或者必須匹配同一文檔中的一個(gè) style 元素上的 title 屬性的值。 |
| refresh | 定義文檔自動(dòng)刷新的時(shí)間間隔。</br>實(shí)例：<meta http-equiv="refresh" content="300"></br>注釋：值 "refresh" 應(yīng)該慎重使用，因?yàn)樗鼤?huì)使得頁(yè)面不受用戶控制。 |
實(shí)例
<head>
<meta http-equiv="content-type" "text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30">
</head>
過(guò)時(shí)的用法
<!--不再使用-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--應(yīng)該使用-->
<meta charset="UTF-8"/>
meta.name的屬性值copyright可以用作版權(quán)說(shuō)明
<!-- 不再使用 -->
<meta name="copyright" content="SitePoint" />
應(yīng)該提供一個(gè)鏈接標(biāo)記指向一個(gè)版權(quán)頁(yè)面(或錨在相同的頁(yè)面上)。
<!-- 應(yīng)該使用 -->
<link rel="copyright" href="copyright.html" />
自2009年開始谷歌就宣布keywords已經(jīng)不再包括在排名算法之中。（實(shí)際上google從來(lái)沒有在算法中使用過(guò)）
<!-- 不再使用 -->
<meta name="keywords" content="zyy,zyyy,HTML,CSS" />
心得
meta標(biāo)簽之所以很重要一個(gè)是因?yàn)閙eta標(biāo)簽提供了頁(yè)面的元信息，meta標(biāo)簽的內(nèi)容也會(huì)存在與搜索結(jié)果中。當(dāng)用戶在搜索結(jié)果總選擇要打開的連接時(shí)，首先看到的就是meta的描述。所以雖然現(xiàn)在keywords已經(jīng)不用來(lái)排名，但作為一個(gè)方便用戶閱讀來(lái)說(shuō)還是很重要的。而且作為一個(gè)描述也會(huì)增加網(wǎng)頁(yè)的點(diǎn)擊量，者不僅所有的流量來(lái)自于谷歌等搜索引擎，其他網(wǎng)站也會(huì)賦予meta標(biāo)簽權(quán)重*。
標(biāo)簽權(quán)重：權(quán)重標(biāo)簽就是會(huì)影響頁(yè)面權(quán)重或者相關(guān)性的html標(biāo)簽。權(quán)重標(biāo)簽常用于突出頁(yè)面中相對(duì)重要的內(nèi)容，從而提高頁(yè)面相關(guān)性，增加頁(yè)面權(quán)重。從用戶體驗(yàn)角度來(lái)理解就更加清晰明了，例如寫一篇文章，通過(guò)權(quán)重標(biāo)簽把某個(gè)關(guān)鍵詞（或語(yǔ)句）變得很顯眼，那么如果用戶進(jìn)來(lái)，一眼之間肯定就會(huì)看到那個(gè)關(guān)鍵詞（或語(yǔ)句），那么百度蜘蛛是模擬用戶的瀏覽方式，肯定也會(huì)很優(yōu)化重視那個(gè)關(guān)鍵詞（或語(yǔ)句）。
在segmentfault看了這篇文章，覺得整理的很詳細(xì)，所以轉(zhuǎn)載過(guò)來(lái)和大家分享一下。
原文地址：http://segmentfault.com/blog/ciaocc/1190000002407912
引用
http://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_content
http://segmentfault.com/a/1190000002407912
http://www.runoob.com/jsref/prop-meta-content.html
http://www.runoob.com/tags/att-meta-name.html
http://www.runoob.com/tags/att-meta-http-equiv.html
http://www.w3cplus.com/css/meta-tags-html-basics-best-practices.html
