HTML meta 標簽詳解

簡介

元數(shù)據(jù)不會顯示在頁面上，但可以機器解析。元數(shù)據(jù)由瀏覽器（如何顯示內(nèi)容或重新加載頁面）、搜索引擎（關(guān)鍵字）或是其他網(wǎng)絡(luò)服務(wù)使用。

下面我們就來看看常用的meta標簽。

一、Meta 標簽的 charset 屬性

想必每一個都開發(fā)者都十分熟悉下面這一個meta元素， 它設(shè)置文檔使用utf-8字符集編碼，

如果設(shè)置了 charset 屬性, meta 元素就是一個字符集聲明，用于告訴文檔使用哪種字符編碼。utf-8字符集包含了人類大部分的文字。意味著該 web 頁面可以顯示任意的語言。

<meta?charset="utf-8">

你也可以設(shè)置為 GBK （中國大陸國標字符集）[不推薦]

<meta?charset="GBK">

但是！當你設(shè)置為 GBK 再使用藏文之類的語言時，那么頁面將會會出現(xiàn)亂碼。

二、meta 標簽的 name 屬性

如果設(shè)置了 name 屬性，meta 元素提供的是文檔級別（document-level）的元數(shù)據(jù)，應(yīng)用于整個頁面。如通過keywords, description等屬性設(shè)置SEO相關(guān)內(nèi)容

meta標簽中name屬性語法格式是：

1. keywords

keywords 定義了一組關(guān)鍵詞，用于搜索引擎優(yōu)化。

<meta?name="keywords"?content="HTML,?Liu?Xing,?JavaScript之禪">

在網(wǎng)絡(luò)和 SEO 剛剛興起的時候，這個標簽是相當有用的，但是到如今，很多搜索引擎都已經(jīng)不再用keywords標簽作排名因素。我們在使用時應(yīng)該避免關(guān)鍵詞堆砌

2. description

description 是一個針對頁面的簡短描述，用于告訴搜索引擎你網(wǎng)站的主要內(nèi)容， 此內(nèi)容可能被用作搜索引擎結(jié)果的一部分。

<meta?name="description"?content="JavaScript之禪專注于Web開發(fā),?匯集HTML,?CSS,
JavaScript教程">

3. robots

robots 用于告訴網(wǎng)頁爬蟲如何索引網(wǎng)頁

<meta?name="robots"?content="none">

它有以下幾種參數(shù)值：

• all：對索引編制或內(nèi)容顯示無任何限制, 該指令為默認值

• noindex: 告訴搜索引擎不要索引當前頁, 等價于noindex，nofollow

• index: 告訴搜索引擎索引當前頁

• follow: 即使頁面沒有被索引，爬蟲也應(yīng)該爬取頁面上的所有鏈接

• nofollow: 告訴爬蟲不要跟蹤頁面上的任何鏈接以及資源

• noimageindex: 告訴爬蟲不要索引頁面上的任何圖片

• none: 相當于同時使用 noindex 和 nofollow

• noarchive: 不在搜索結(jié)果中顯示緩存鏈接。如果您未指定此指令，搜索引擎可能會生成緩存網(wǎng)頁，并且用戶可能會通過搜索結(jié)果訪問該網(wǎng)頁。

• nosnippet: 不在搜索結(jié)果中顯示該網(wǎng)頁的文本摘要或視頻預覽

4. viewport

viewport 是用戶網(wǎng)頁的可視區(qū)域。viewport 通常用于設(shè)置頁面的視口, 這個屬性常用于設(shè)計移動端網(wǎng)頁。

一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標簽大致如下：

<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">

它主要有以下屬性值：

• width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度
• height：和 width 相對應(yīng)，指定高度
• initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例
• maximum-scale：允許用戶縮放到的最大比例
• minimum-scale：允許用戶縮放到的最小比例
• user-scalable：用戶是否可以手動縮放

5. subject

subject 是關(guān)于你的網(wǎng)站主題的簡短描述

<meta?name="subject"?content="你的網(wǎng)站主題">

6. rating

rating 基于網(wǎng)站內(nèi)容給出一般的年齡分級，通常用于讓瀏覽者知道內(nèi)容是不是合適的。如果您希望對頁面的受眾適當性進行評分，請使該標記

<meta?name="rating"?content="General">

它主要有以下屬性值：

• general
• mature
• restricted
• adult
• 14 years
• safe for kids

7. referrer

referrer 允許由客戶端指定資源的 URI 來自于哪一個請求地址，它告訴了服務(wù)器，用戶在訪問當前資源時是從哪過來的。此數(shù)據(jù)可用于分析、日志記錄、優(yōu)化緩存等。與HTTP請求中的referer字段相同。（注：Referer的正確拼寫是Referrer，但是在寫入標準時寫錯了，只好將錯就錯）

<meta?name="referrer"?content="no-referrer">

它主要有以下屬性值：

• no-referrer: 整個 referrer 會被移除。訪問來源信息不隨著請求一起發(fā)送。
• no-referrer-when-downgrade: （默認值） 在沒有指定任何策略的情況下用戶代理的默認行為。在同等安全級別的情況下，引用頁面的地址會被發(fā)送(HTTPS->HTTPS)，但是在降級的情況下不會被發(fā)送 (HTTPS->HTTP)
• origin: 在任何情況下，僅發(fā)送文件的源作為引用地址
• origin-when-cross-origin: 對于同源的請求，會發(fā)送完整的URL作為引用地址，但是對于非同源請求僅發(fā)送文件的源
• same-origin: 對于同源的請求會發(fā)送引用地址，但是對于非同源請求則不發(fā)送引用地址信息
• strict-origin: 在同等安全級別的情況下，發(fā)送文件的源作為引用地址(HTTPS->HTTPS)，但是在降級的情況下不會發(fā)送 (HTTPS->HTTP)
• strict-origin-when-cross-origin: 對于同源的請求，會發(fā)送完整的URL作為引用地址；在同等安全級別的情況下，發(fā)送文件的源作為引用地址(HTTPS->HTTPS)；在降級的情況下不發(fā)送此信息?(HTTPS->HTTP)
• unsafe-url: 無論是同源請求還是非同源請求，都發(fā)送完整的 URL（移除參數(shù)信息之后）作為引用地址

8. author

author 用于標明該頁面的作者

<meta?name="author"?content="Liu?Xing">

9. generator

generator 用于標明網(wǎng)頁又什么工具生成，如使用Hexo生成的靜態(tài)網(wǎng)站，其值就為Hexo

<meta?name="generator"?content="Hexo">

10. copyright

copyright 用于標注版權(quán)信息

<meta?name="copyright"?content="Liu?Xing">

三、meta 標簽的 http-equiv 屬性

如果設(shè)置了 http-equiv 屬性（http-equivalent的簡寫），meta 元素則是編譯指令，提供的信息與類似命名的HTTP header相同，它可用于模擬 HTTP header 響應(yīng)，通常可以用來控制緩存，刷新等操作。

meta標簽中http-equiv屬性語法格式是：

1. content-type

該屬性與類似，用于設(shè)定網(wǎng)頁字符集，便于瀏覽器解析與渲染頁面。不推薦使用。

<meta?http-equiv="content-Type"?content="text/html;charset=utf-8">

上面的示例定義了網(wǎng)頁為text/html，字符集為utf-8。推薦使用文章開頭介紹的 來設(shè)置。

2. refresh

refresh 定義文檔自動刷新的時間間隔

<meta?http-equiv="refresh"?content="30">

上面的例子中，頁面會間隔30s刷新一次。

4. cache-control

cache-control 用來控制緩存策略

主要有以下屬性值：

• public 表明響應(yīng)可以被任何對象（包括：發(fā)送請求的客戶端，代理服務(wù)器，等等）緩存。
• private 表明響應(yīng)只能被單個用戶緩存，不能作為共享緩存（即代理服務(wù)器不能緩存它）
• no-cache 不使用強緩存，需要與服務(wù)器驗證協(xié)商緩存驗證。
• no-store 緩存不應(yīng)存儲有關(guān)客戶端請求或服務(wù)器響應(yīng)的任何內(nèi)容，即不使用任何緩存。
• max-age=緩存存儲的最大周期，超過這個周期被認為過期
• ...

5. expires

expires 用于設(shè)定網(wǎng)頁的到期時間，它告訴瀏覽器在過期時間之前可以直接從瀏覽器緩存中存取數(shù)據(jù)。

關(guān)于 HTTP 緩存機制, 建議參考閱讀筆者寫的另一篇文章深入理解 HTTP 緩存機制

結(jié)語

至此，我們一共介紹了15種meta標簽的用法，分別可以用于SEO，響應(yīng)式開發(fā)，HTTP響應(yīng)控制等。meta標簽對于社交媒體分享，提升SEO以及瀏覽器/平臺的一些兼容性設(shè)置也都十分重要。