HTML meta 標籤看這篇就夠了

時間 2020-03-23

標籤 html meta 標籤看這夠了欄目 HTML 简体版

原文原文鏈接

引言

<meta> 元素提供有關頁面的元信息，放在文檔的頭部，不包含內容，屬性定義了與文檔相關的鍵值對，不會顯示在頁面上，但對於機器是可讀的。html

一般狀況下，meta 元素被用於規定頁面的描述、關鍵字、文檔的做者、最後修改時間等，也會包含 header 頭中的一部分信息。java

下面就說說 meta 的經常使用用法。python

header 頭

最多見的一個 meta 標籤可能就是<meta charset="UTF-8">了，讀者可能會有疑問了，這裏的 charset 和 header 頭中的有什麼關係？相似的還有不少，好比設置緩存、cookie等，固然除了 charset 以外的不多用到，有些也已經慢慢移除了，好比當使用Set-Cookie的時候，chrome 會給出警告信息。ios

通過試驗，發現，當 meta 和 header 頭中同時設置一個內容的時候，header 頭中的會覆蓋 meta 中的信息優先使用。web

好比有 index.html 文件，編碼格式爲 GBK：chrome

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        中文亂碼嗎
    </body>
</html>

複製代碼

直接拖到瀏覽器打開，會亂碼，經過服務器訪問，並設置 header 頭信息 res.setHeader('Content-Type', 'text/html; charset=GBK')，正常顯示。跨域

referrer 信息

在谷歌首頁源碼中發現了<meta content="origin" name="referrer">，這個 meta 是用來設置 Referrer Policy 的，設置是否帶 referer、什麼狀況帶 referer，怎麼帶 referer。瀏覽器

referrer 有以下取值緩存

no-referrer 請求的時候，不帶 referer 請求頭安全

no-referrer-when-downgrade 這個是默認策略，整個 URL(origin、path、queryString) 都會做爲 referrer 發送，但當安全協議降級，好比從 https -> http 的時候，不會發送。

origin 只發送 URL 中的 origin 信息，好比網址爲https://example.com/page.html，請求頭中爲referer: https://example.com/。

origin-when-cross-origin 同源請求，發送整個 URL，跨域時候和 origin 的狀況同樣。

same-origin 僅同源狀況發送 referer

strict-origin 相似 origin，但協議不能降級，好比從http://a.com請求http://b.com或者https://...會攜帶 referer。

strict-origin-when-cross-origin 與 origin-when-cross-origin 相似，但協議不能降級。

unsafe-url 任何狀況都發送完整的 URL。

這個測試也很簡單，在本地啓動一個服務器，而後請求下面的網頁，讓網頁裏面去請求內容，查看請求頭便可，好比這裏，頁面加載後悔請求 a.png 這張圖片，設置不一樣的 referrer 屬性，攜帶的 referer 頭信息不同。

<html>
    <head>
        <meta charset="UTF-8">
        <meta content="origin" name="referrer">
    </head>
    <body>
        <img src="a.png">
    </body>
</html>

複製代碼

tips，有沒有發現，在 meta 標籤中使用的是referrer，http 請求頭裏面用的是 referer？後者不是個單詞，當時在制定 RFC 的時候，拼寫錯了，發現的時候已經晚了，已經被大量使用，所以 HTTP 標準決定繼續使用這個錯誤拼寫，一直沿用到如今。因此在使用的時候也要注意，拼寫有的時候是正確的，有的時候是錯誤的。

IE 渲染模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

上面這個也是碰到比較多的一個 meta 標籤了，天貓、淘寶、京東、百度首頁源碼都有相似的標籤（部分沒有,chrome=1）。

這個 meta 標籤是用來設置瀏覽器的兼容性模式的，是 IE8 新加的一個屬性，對於 < IE8 的瀏覽器是不識別的，也是 IE 內核特有的屬性，其餘內核瀏覽器不認識。

content 中的內容IE=edge,chrome=1，其中IE=edge告訴瀏覽器，以當前瀏覽器最高版本 IE 來進行渲染；chrome=1告訴瀏覽器，若是安裝了 Google Chrome Frame插件（GCF），則保持 IE 外觀的模式下，使用 chrome 內核進行渲染，這裏注意，該插件支持 IE6 ~ IE9，這裏讀者朋友可能會有疑惑了，不是 < IE8 的瀏覽器不支持當前小節的屬性嗎，那怎麼使用呢？其實也很簡單，在網址前面加上gcf:便可，好比gcf:https://baidu.com。

除此以外還有一個用於設置360瀏覽器渲染模式的設置，經常使用<meta name="renderer" content="webkit">來啓用360瀏覽器、QQ瀏覽器的極速模式（Chrome 內核），相似的還有一個<meta name="force-rendering" content="webkit"/>，讓其餘雙核瀏覽器切換爲極速模式。

視窗設置

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

上面的標籤通常在移動端中使用，width=device-width 設置網頁的寬度（viewport）和設備的寬度同樣，這樣橫向就不會出現滾動條，用戶瀏覽體驗會大幅提高；後面的幾個設置不容許用戶手動縮放。

電話檢測

<meta name="format-detection" ...>

下面是天貓首頁的設置，用來禁止自動識別電話、日期、地址，電話可能你們都遇到過，ios 上面，自動將一串數字加了連接，點擊會進行撥號，加入下面第一個禁止便可。

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
複製代碼

The Open Graph Protocol（開放圖譜協議）

在天貓首頁的源碼中發現了下面的內容：

<meta property="og:title" content="天貓">
<meta property="og:type" content="website">
<meta property="og:url" content=" https://www.tmall.com/">
<meta property="og:image" content=" https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png">
複製代碼

這種好像比較少見，但隱隱以爲確定有用，查了下，果真，他叫 Open Graph Protocol，是 Facebook 制訂的一個社交網絡分享協議，有了上面的內容，分享以後會帶上更多的信息、展現圖片等，讓分享的內容更吸引人。打開facebook，而後發佈，輸入連接，有property="og:..."屬性的話，會自動生成相似下面的內容：

天貓

京東

能夠看到，若是沒有設置 Open Graph Protocol 的話，facebook會自動獲取標題和 meta 中的 description 信息展現，也沒有圖片展現。其實這個就像微信分享時候自定義的標題、連接、圖片等同樣，不過這個是不須要調用js，直接分享便可被Facebook等網站識別。能夠從這裏查看網站對 Open Graph Protocol 的支持狀況。

robots SEO

在 google 的首頁源碼中發現了<meta content="noodp" name="robots">標籤，根據 robots 猜想跟搜索引擎爬取機器人有關。查閱資料後，果真，跟搜索引擎爬蟲有關，用來作SEO用的。

meta robots 能夠取以下的值

index 容許將該網頁錄入搜索引擎索引。

follow 容許搜索引擎抓取當前頁面上全部的連接。

noindex 禁止將該網頁錄入搜索引擎索引。

nofollow 禁止搜索引擎抓取當前頁面上的連接。

noarchive 在搜索結果中不保存當前頁面的快照

all 至關於index, follow，此值是默認值。

noodp 不使用開放目錄中的網頁摘要描述。

noydir 不使用雅虎分類目錄中的網頁摘要。

最後兩個可能不是很好理解，noodp 是 NO Open Directory Project 的縮寫，noydir 是 NO Yahoo Directory 的縮寫。他兩是相似的，都是可讓你們錄入網站、摘要，記錄網站的信息，兩個區別：前者是開放的，你們均可以維護，後者是提交以後審覈生效，能夠看這裏。

有些網站會設置開放目錄中的信息，致使搜索引擎展現開放目錄中設置的信息，和網站的現有信息不匹配，經過 noodp、noydir 禁止搜索引擎使用開放目錄上的信息，使用網站頁面的現有信息。

最後兩個在國內使用的很少。

HTML meta 標籤看這篇就夠了

引言

header 頭

referrer 信息

IE 渲染模式

視窗設置

電話檢測

The Open Graph Protocol（開放圖譜協議）

robots SEO

公衆號

廣告

HTML meta 標籤 看這篇就夠了

引言

header 頭

referrer 信息

IE 渲染模式

視窗設置

電話檢測

The Open Graph Protocol（開放圖譜協議）

robots SEO

公衆號

廣告

HTML meta 標籤看這篇就夠了