關於瀏覽器meta標籤

W3School say meta

標籤提供關於HTML文檔的元數據。元數據不會顯示在頁面上，可是對於機器是可讀的。它可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。 —— W3Schoolhtml

mdn say meta

HTML <meta> 元素表示那些不能由其它HTML相關元素(<base>, <link>, <script>, <style> or <title>.)之一表示的任何元數據信息。前端

通俗的講

meta經常使用於定義頁面的說明，關鍵字，最後修改日期，和其它的元數據。這些元數據將服務於瀏覽器（如何佈局或重載頁面），搜索引擎和其它網絡服務。web

屬性說明

1. name

name屬性主要用於描述網頁，好比網頁的關鍵詞，敘述等。與之對應的屬性值爲content，content中的內容是對name填入類型的具體描述，便於搜索引擎抓取。meta標籤中name屬性語法格式是：chrome

<meta name="參數" content="具體的描述">。
其中name屬性共有如下幾種參數。(A-C爲經常使用屬性)編程

A. keywords(關鍵字)bootstrap

說明：用於告訴搜索引擎，你網頁的關鍵字。舉例：segmentfault

<meta name="keywords" content="博客，前端">

B. description(網站內容的描述)瀏覽器

說明：用於告訴搜索引擎，你網站的主要內容。舉例：緩存

<meta name="description" content="熱愛前端與編程">

C. viewport(移動端的窗口)安全

說明：這個屬性經常使用於設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（經常使用範例）：

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

width - 可視區域的寬度，值可爲數字或關鍵詞device-width
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例
user-scalable - 用戶是否能夠手動縮放

1. 天貓

<title>天貓觸屏版</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta charset="utf-8"> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
    <meta content="yes" name="apple-mobile-web-app-capable"> 
    <meta content="black" name="apple-mobile-web-app-status-bar-style"> 
    <meta content="telephone=no" name="format-detection">

2. 淘寶

<title>淘寶網觸屏版</title>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta property="wb:webmaster" content="c51923015ca19eb1">
    <meta name="author" content="m.taobao.com">
    <meta name="copyright" content="Copyright ©m.taobao.com 版權全部">
    <meta name="revisit-after" content="1 days">
    <meta name="keywords" content="">
    <meta name="description" content="">

3. 京東

<title> 京東 - 手機版 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name="format-detection" content="telephone=no">
    <meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品">
    <meta name="description" 
content="京東手機版提供了包括數碼、家電、手機、電腦配件、網絡產品、
日用百貨等數萬種商品，手機快捷購物，就上京東手機版。">

4. 網易

<title>手機網易網</title>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scalable=no" name="viewport">
    <meta name="apple-itunes-app" content="app-id=425349261">
    <meta name="apple-mobile-web-app-capable" content="yes">

4. 百度

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">

6. 手機端特有的有哪些？

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
     <meta content="yes" name="apple-mobile-web-app-capable"> 
     <meta content="black" name="apple-mobile-web-app-status-bar-style"> 
     <meta content="telephone=no" name="format-detection">

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持 1:1，而且文檔最大的寬度比例是 1.0，且不容許用戶縮放屏幕。
第二個 meta 標籤是 iphone 設備中的 safari 私有 meta 標籤，它表示：容許全屏模式瀏覽。
第三個 meta 標籤也是 iphone 的私有標籤，它指定的 iphone 中 safari 頂端的狀態條的樣式；在 web app 應用下狀態條（屏幕頂部條）的顏色；默認值爲default（白色），能夠定爲 black（黑色）和 black-translucent（灰色半透明）。注意：若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面 20px 高度–iphone 4 和 itouch 4 的 Retina 屏幕爲 40px）。
第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼。

D. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面須要索引，哪些頁面不須要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

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

具體參數以下：

1.none : 搜索引擎將忽略此網頁，等價於noindex，nofollow。
2.noindex : 搜索引擎不索引此網頁。
3.nofollow: 搜索引擎不繼續經過此網頁的連接索引搜索其它的網頁。
4.all : 搜索引擎將索引此網頁與繼續經過此網頁的連接索引，等價於index，follow。
5.index : 搜索引擎索引此網頁。
6.follow : 搜索引擎繼續經過此網頁的連接索引搜索其它的網頁。

E. author(做者)

說明：用於標註網頁做者舉例：

<meta name="author" content="632851952@qq.com">

F. generator(網頁製做軟件)

說明：用於標明網頁是什麼軟件作的舉例: (不知道能不能這樣寫)：

<meta name="generator" content="vscode">

G. copyright(版權)

說明：用於標註版權信息舉例：

<meta name="copyright" content="Lxxyx"> //表明該網站爲Lxxyx我的版權全部。

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：若是頁面不是常常更新，爲了減輕搜索引擎爬蟲對服務器帶來的壓力，能夠設置一個爬蟲的重訪時間。若是重訪時間太短，爬蟲將按它們定義的默認時間來訪問。舉例：

<meta name="revisit-after" content="7 days" >

I. renderer(雙核瀏覽器渲染方式)

說明：renderer是爲雙核瀏覽器準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面。好比說360瀏覽器。舉例：

<meta name="renderer" content="webkit|ie-comp|ie-stand">  //與font-family優先規則同樣
  <meta name="renderer" content="webkit"> //默認webkit內核
  <meta name="renderer" content="ie-comp"> //默認IE兼容模式
  <meta name="renderer" content="ie-stand"> //默認IE標準模式

2. http-equiv屬性

http-equiv相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。

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

<meta http-equiv="參數" content="具體的描述">

其中http-equiv屬性主要有如下幾種參數：

A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用於設定網頁字符集，便於瀏覽器解析與渲染頁面舉例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //舊的HTML，不推薦

 <meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8

B. X-UA-Compatible(瀏覽器採起何種版本渲染當前頁面)

說明：用於告知瀏覽器以何種版原本渲染頁面,也可用於兼容性處理。（通常都設置爲最新模式，在各大框架中這個設置也很常見。）舉例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面

關於content內容不一樣含義的解釋

C. cache-control(指定請求和響應遵循的緩存機制)

用法1.

說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。參考連接：Google Developers 參考連接：HTTP緩存

<meta http-equiv="cache-control" content="no-cache">

共有如下幾種用法：

no-cache: 先發送請求，與服務器確認該資源是否被更改，若是未被更改，則使用緩存。
no-store: 不容許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
public : 緩存全部響應，但並不是必須。由於max-age也能夠作到相同效果
private : 只爲單個用戶緩存，所以不容許任何中繼進行緩存。（好比說CDN就不容許緩存private的響應）
maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器從新請求。例如：max-age=60表示響應能夠再緩存和重用 60 秒。

用法2.(禁止百度自動轉碼)

說明：用於禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，可是轉碼效果不少時候卻不盡人意。因此能夠在head中加入例子中的那句話，就能夠避免百度自動轉碼了。舉例：

<meta http-equiv="Cache-Control" content="no-siteapp" />

D. expires(網頁到期時間)

說明:用於設定網頁的到期時間，過時後網頁必須到服務器上從新傳輸。舉例：

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

E. refresh(自動刷新並指向某頁面)

說明：網頁將在設定的時間內，自動刷新並調向設定的網址。舉例:

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒後跳轉向個人博客

F. Set-Cookie(cookie設定)

說明：若是網頁過時。那麼這個網頁存在本地的cookies也會被自動刪除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體範例

參考1 https://segmentfault.com/a/1190000004279791
參考2 https://segmentfault.com/a/1190000007162530
參考3 http://www.3lian.com/edu/2014/10-10/171025.html

做者：bpup 連接：https://www.jianshu.com/p/04c475d32c5f 來源：簡書