W3School say meta

標簽提供關于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。 —— W3School

mdn say meta

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

通俗的講

meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數(shù)據(jù)。這些元數(shù)據(jù)將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網(wǎng)絡服務。

屬性說明

1. name

name屬性主要用于描述網(wǎng)頁，比如網(wǎng)頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內(nèi)容是對name填入類型的具體描述，便于搜索引擎抓取。meta標簽中name屬性語法格式是：

<meta name="參數(shù)" content="具體的描述">。
其中name屬性共有以下幾種參數(shù)。(A-C為常用屬性)

A. keywords(關鍵字)

說明：用于告訴搜索引擎，你網(wǎng)頁的關鍵字。舉例：

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

B. description(網(wǎng)站內(nèi)容的描述)

說明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。舉例：

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

C. viewport(移動端的窗口)

說明：這個屬性常用于設計移動端網(wǎng)頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（常用范例）：

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

• width - 可視區(qū)域的寬度，值可為數(shù)字或關鍵詞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>淘寶網(wǎng)觸屏版</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="京東手機版提供了包括數(shù)碼、家電、手機、電腦配件、網(wǎng)絡產(chǎn)品、
日用百貨等數(shù)萬種商品，手機快捷購物，就上京東手機版。">

4. 網(wǎng)易

    <title>手機網(wǎng)易網(wǎng)</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 頂端的狀態(tài)條的樣式； 在 web app 應用下狀態(tài)條（屏幕頂部條）的顏色； 默認值為default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）。 注意：若值為 “black-translucent” 將會占據(jù)頁面px位置，浮在頁面上方 （會覆蓋頁面 20px 高度–iphone 4 和 itouch 4 的 Retina 屏幕為 40px）。
第四個meta標簽表示：告訴設備忽略將頁面中的數(shù)字識別為電話號碼。

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

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

舉例：

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

具體參數(shù)如下：

1.none : 搜索引擎將忽略此網(wǎng)頁，等價于noindex，nofollow。
2.noindex : 搜索引擎不索引此網(wǎng)頁。
3.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。
4.all : 搜索引擎將索引此網(wǎng)頁與繼續(xù)通過此網(wǎng)頁的鏈接索引，等價于index，follow。
5.index : 搜索引擎索引此網(wǎng)頁。
6.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。

E. author(作者)

說明：用于標注網(wǎng)頁作者舉例：

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

F. generator(網(wǎng)頁制作軟件)

說明：用于標明網(wǎng)頁是什么軟件做的舉例: (不知道能不能這樣寫)：

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

G. copyright(版權)

說明：用于標注版權信息舉例：

    <meta name="copyright" content="Lxxyx"> //代表該網(wǎng)站為Lxxyx個人版權所有。

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

說明：如果頁面不是經(jīng)常更新，為了減輕搜索引擎爬蟲對服務器帶來的壓力，可以設置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。舉例：

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

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

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

  <meta name="renderer" content="webkit|ie-comp|ie-stand">  //與font-family優(yōu)先規(guī)則一樣
  <meta name="renderer" content="webkit"> //默認webkit內(nèi)核
  <meta name="renderer" content="ie-comp"> //默認IE兼容模式
  <meta name="renderer" content="ie-stand"> //默認IE標準模式

2. http-equiv屬性

http-equiv類似于HTTP的頭部協(xié)議，它回應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。

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

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

其中http-equiv屬性主要有以下幾種參數(shù)：

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

說明：用于設定網(wǎng)頁字符集，便于瀏覽器解析與渲染頁面舉例：

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

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

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

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

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

關于content內(nèi)容不同含義的解釋

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

用法1.

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

gd

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

共有以下幾種用法：

1. no-cache: 先發(fā)送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。
2. no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
3. public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果
4. private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）
5. maxage : 表示當前請求開始，該響應在多久內(nèi)能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。

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

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

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

D. expires(網(wǎng)頁到期時間)

說明:用于設定網(wǎng)頁的到期時間，過期后網(wǎng)頁必須到服務器上重新傳輸。舉例：

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

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

說明：網(wǎng)頁將在設定的時間內(nèi)，自動刷新并調(diào)向設定的網(wǎng)址。舉例:

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

F. Set-Cookie(cookie設定)

說明：如果網(wǎng)頁過期。那么這個網(wǎng)頁存在本地的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