作爲前端，你必須要知道的 meta 標籤知識

前言

面試 baidu 的時候，面試官問：你都知道什麼meta標籤？用處是什麼？儘可能多的說出來。我：嗯…… 嗯…… 我一般都自動生成… 面試官：……

後來找資料好好學了下，再看了 taobao 和頭條的網頁才知道：meta 標籤用處可大得很吶！今天就來淺淺總結一下。

順便感嘆一下字節這塊適配做的是真的蠻好

概覽

meta 標籤一般放在整個html頁面的head部分，在MDN中對他這樣定義：

meta 是文檔級元數據元素，用來表示那些不能由其它 HTML 元相關元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元數據。

是不是感覺看起來很抽象？說白了就是爲了傳達信息。

先看看meta 元素定義的元數據的類型：

如果設置了 name屬性，meta 元素提供的是文檔級別的元數據，應用於整個頁面。
如果設置了 http-equiv屬性，meta 元素則是編譯指令，提供的信息與類似命名的 HTTP 頭部相同。
如果設置了 charset屬性，meta 元素是一個字符集聲明，告訴文檔使用哪種字符編碼。
如果設置了 itemprop 屬性，meta 元素提供用戶定義的元數據。

name 屬性

name和content一起使用，前者表示要表示的元數據的名稱，後者是元數據的值。

author

用來表示網頁的作者的名字，例如某個組織或者機構。

<meta aaa@mail.abc.com">

description

是一段簡短而精確的、對頁面內容的描述。以頭條和 taobao 的description標籤爲例：

keywords

與頁面內容相關的關鍵詞，使用逗號分隔。某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。還是以頭條和 taobao 爲例

viewpoint

爲 viewport（視口）的初始大小提供指示。目前僅用於移動設備。

可能你也發現了，我們在vscode中自動生成html的代碼片段時，會自動生成：

<meta >

width用來設置 viewport 的寬度爲設備寬度;

initial-scale爲設備寬度與 viewport 大小之間的縮放比例。

robots

表示爬蟲對此頁面的處理行爲，或者說，應當遵守的規則，是用來做搜索引擎抓取的。

它的content可以爲：

all: 搜索引擎將索引此網頁，並繼續通過此網頁的鏈接索引文件將被檢索
none: 搜索引擎講忽略此網頁
index: 搜索引擎索引此網頁
follow: 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁

renderer

用來指定雙核瀏覽器的渲染方式，比如 360 瀏覽器，我們可以通過這個設置來指定 360 瀏覽器的渲染方式

<meta > //默認webkit內核
<meta > //默認IE兼容模式
<meta > //默認IE標準模式

http-equiv

http-equiv也是和content一起使用，前者表示要表示的元數據的名稱，後者是元數據的值。

http-equiv 所有允許的值都是特定 HTTP 頭部的名稱，

X-UA-Compatible

我們最常見的http-equiv值可能就是X-UA-Compatible了，它常常長這個樣子：

它是用來是做 IE 瀏覽器適配的。

IE=edge告訴瀏覽器，以當前瀏覽器支持的最新版本來渲染，IE9 就以 IE9 版本來渲染。

chrome=1告訴瀏覽器，如果當前 IE 瀏覽器安裝了Google Chrome Frame插件，就以 chrome 內核來渲染頁面。

像上圖這種兩者都存在的情況：如果有 chrome 插件，就以 chrome 內核渲染，如果沒有，就以當前瀏覽器支持的最高版本渲染。

另外，這個屬性支持的範圍是IE8-IE11

你可能注意到了，如果在我們的http頭部中也設置了這個屬性，並且和meta中設置的有衝突，那麼哪一個優先呢？答案是：開發者偏好（meta元素）優先於 Web 服務器設置（HTTP 頭）。

content-type

用來聲明文檔類型和字符集

x-dns-prefetch-control

一般來說，HTML 頁面中的 a 標籤會自動啓用 DNS 提前解析來提升網站性能，但是在使用 https 協議的網站中失效了，我們可以設置：

來打開 dns 對 a 標籤的提前解析

cache-control、Pragma、Expires

和緩存相關的設置，但是遺憾的是這些往往不生效，我們一般都通過http headers來設置緩存策略

總結

常用了就是這些啦~ 實際使用時還有很多新的需要學習，這就需要俺們平時多看看其他網站是怎麼設置meta的~ 一起加油叭

作者：花椰菜菜

https://juejin.cn/post/7089271039842058253

大前端技術之路 分享 Web 前端，Node.js、React Native 等大前端技術棧精選

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/-RuWqj70sRwTZYtN5jzCqA

前言

概覽