meta標籤的用法

元數據即描述數據的數據

meta

一個html文件是一個數據，meta標籤就是用來描述該文件的元數據

位於文檔的頭部，不包含任何內容，僅提供頁面的說明，關鍵字等數據，服務於瀏覽器，搜索引擎和其他網絡服務

標籤的屬性定義了與文檔相關聯的名稱/鍵值對

• http-equiv: 把content屬性關聯到HTTP頭部
  • content-type
  • expires
  • refresh
  • set-cookie
• name: 把content屬性關聯到一個名稱
  • author
  • description
  • keywords
  • generator
  • revised
  • others
• content: 於http-equiv和name屬性相關的元信息
• charset：聲明當前文檔所使用的字符編碼

Notes

1. 必須位於head元素內部
2. 總是以名稱/值的形式被成對傳遞的
3. 一個meta元素只用於一種用途
4. 如果設置了name，則說明是一個文檔頁面，適用於整個頁面
5. 如果設置了http-equiv，則是一個pragma指令，通常由Web服務器提供有關如何提供網頁的信息。
6. 如果設置了charset，則是字符集聲明，用於網頁所使用的字符編碼。
7. 如果設置了itemprop，則是用戶定義的元數據 - 對於用戶代理是透明的，因爲元數據的語義是特定於用戶的

name

定義元數據的名稱，與content屬性包含的值相關聯。HTML 和 XHTML 標籤都沒有指定任何預先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。

• application-name：定義正運行在該網頁上的網絡應用名稱

  • 簡單的網頁不應該去定義

• author：文檔的作者名稱

• description：內容的簡短和精確描述，一些瀏覽器，如Firefox和Opera，將其用作書籤頁面的默認描述。

• generator：生成頁面的軟件的標識符

• keywords：用逗號分隔的與頁面內容相關的單詞

• referrer：控制所有從該頁面發出的HTTP請求中referer首部的內容。content取值：數據來源於MDN

  content	解釋
  no-referrer	不要發送 HTTP Referer 首部。
  origin	發送當前文檔的 origin。
  no-referrer-when-downgrade	當目的地是先驗安全的(https->https)則發送 origin 作爲 referrer ，但是當目的地是較不安全的 (https->http)時則不發送 referrer 。這個是默認的行爲。
  origin-when-crossorigin	在同源請求下，發送完整的URL (不含查詢參數) ，其他情況下則僅發送當前文檔的 origin。
  unsafe-URL	在同源請求下，發送完整的URL (不含查詢參數)。

• creator：文檔創建者的名稱，可以是機構的名稱，有多個的話必須定義多個meta

• googlebot：robots谷歌的索引抓取工具Googlebot 的同義詞，只適用於google

• publisher：以自由格式定義文檔發佈者的名稱，可以是機構的名稱。

• robots：定義協作爬蟲應該與頁面的行爲，以逗號分隔的值的列表。數據來源於MDN

  值	描述	使用者
  index	允許機器人索引頁面	所有
  noindex	阻止機器人索引頁面	所有
  follow	允許機器人跟蹤頁面上的鏈接	所有
  nofollow	阻止機器人跟蹤頁面上的鏈接	所有
  noodp	阻止使用Open Directory Project描述（如果有）作爲搜索引擎結果頁面中頁面的描述	谷歌，雅虎，必應
  noarchive	阻止搜索引擎緩存頁面內容	谷歌，雅虎
  nosnippet	阻止在搜索引擎結果頁面中顯示頁面的任何描述	谷歌
  noimageindex	阻止此頁面顯示爲索引圖像的引用頁面	谷歌
  noydir	阻止使用Yahoo Directory描述（如果有）作爲搜索引擎結果頁面中頁面的描述	雅虎
  nocache	同義詞 noarchive	Bing

• slurp：與robots一樣， 但其僅使用於 Slurp – Yahoo Search的抓取工具。

• rebderer：爲雙核瀏覽器準備，用於指定雙核瀏覽器默認以何種方式渲染頁面

• viewport：提供有關視口初始大小的提示，僅供移動設備使用。數據來源於MDN

  值	可能值	描述
  width	一個正整數或者字符串 device-width	以pixels（像素）爲單位， 定義viewport（視口）的寬度。
  height	一個正整數或者字符串 device-height	以pixels（像素）爲單位， 定義viewport（視口）的高度。
  initial-scale	一個0.0 到10.0之間的正數	定義設備寬度（縱向模式下的設備寬度或橫向模式下的設備高度）與視口大小之間的縮放比率。
  maximum-scale	一個0.0 到10.0之間的正數	定義縮放的最大值；它必須大於或等於minimum-scale的值，不然會導致不確定的行爲發生。
  minimum-scale	一個0.0 到10.0之間的正數	定義縮放的最小值；它必須小於或等於maximum-scale的值，不然會導致不確定的行爲發生。
  user-scalable	一個布爾值（yes或者no）	如果設置爲no，用戶將不能放大或縮小網頁。默認值爲yes。

Notes

1. 設置了itemprop, http-equivor charset中任意一個屬性 ，都不能在設置這個屬性了。
2. 動態的插入<meta name="referrer">是不起作用的，如果同時有多個彼此衝突的策略被定義，那麼 no-referrer 策略會生效。
3. 如果沒有提供 name 屬性，會採用 http-equiv 屬性的值。

charset

聲明當前文檔所使用的字符編碼，可以被具有lang屬性的元素所覆蓋。值必須是一個符合由IANA所定義的字符編碼首選MIME 名稱（preferred MIME name ）之一。

Notes

1. 鼓勵使用UTF-8
2. 不應該使用不兼容ASCII的編碼規範， 以避免不必要的安全風險：瀏覽器不支持他們(這些不規範的編碼)可能會導致瀏覽器渲染html出錯. 比如JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB,ISO-2022 系列,EBCDIC系列 等文字
3. 非兼容ASCII編碼就是那些不會將8位代碼點的0x20 到 0x7E 映射爲Unicode代碼點 0x0020 到 0x007E 的編碼)
4. 開發者必須禁用 CESU-8, UTF-7, BOCU-1 或 SCSU 這些字符集，因爲這些字符集已經被證實存在跨站腳本攻擊（XSS）的風險。
5. 開發者應儘量避免使用 UTF-32字符集對網頁進行編碼，因爲不是所有的HTML5編碼算法能夠將其與 UTF-16 編碼區分開來。
6. 聲明的字符編碼必須與頁面保存所使用的編碼相匹配，以避免亂碼和安全漏洞.
7. HTTP的Content-Type頭部以及任何Byte-Order Marks元素都優先於此元素。
8. 強烈建議使用該屬性定義字符編碼. 如果未定義，某些跨腳本技術可能危害網頁

http-equiv

指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。

• content-language：定義頁面使用的默認語言
  • 儘量使用全劇屬性lang來代替
• content-security-policy：允許頁面作者定義當前頁的 內容策略。 內容策略主要指定允許的服務器源和腳本端點，這有助於防止跨站點腳本攻擊。
• content-type：定義文檔的MIME type
  • 使用charset代替
• default-style：指定了在頁面上使用的首選樣式表
• refresh
  • 如果content只包含一個正整數，則是重新載入頁面的時間間隔
  • 如果content包含一個正整數並且跟着一個字符串，則是重定向到指定鏈接的時間間隔
• set-cookie：爲頁面定義cookie
  • 該用HTTP的Set-Cookie代替

robots.txt和meta robots區別

robots.txt

阻止搜索引擎抓取頁面，一般不建議使用

創建

在根目錄創建robots.txt

內容

User-agent：搜索引擎的值（*表示所有），比如Baiduspider，Googlebot，MSNBot等

Disallow：不希望抓取的頁面路徑

Allow：禁止抓取的路徑裏面存在子路徑需要被抓取

應用場景

• 未完成的頁面
• 測試頁面
• 網站後臺

meta robots

在索引層面阻止搜索引擎索引頁面，但搜索引擎還是抓取了頁面的

應用場景

• 當網頁不適合出現但是又可以提高SEO排名

參考

meta-MDN

三分鐘搞懂 SEO的《meta robots、robots.txt》