本文的目的是蒐集當前主流的meta配置，方便開發者快速開發調試。在這裏不會做各種meta的深入分析，只是簡單的介紹，讓大家知道有這個東西。
meta簡述
-
meta用於描述HTML文檔的元數據。通常用於指定網頁的描述，關鍵詞，作者及其他元數據。 - 元數據可以被使用瀏覽器（如何顯示內容或加載頁面），搜索引擎（關鍵詞），或其他
Web服務調用。 -
meta從一定程度上影響seo。
meta支持哪些屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 定義文檔的字符編碼。 |
| content | text | 定義與 http-equiv 或 name 屬性相關的元信息。 |
| http-equiv | content-type<br/>default-style<br/>refresh | 把 content 屬性關聯到 HTTP 頭部。 |
| name | application-name<br/>author<br/>description<br/>generator<br/>keywords | 把 content 屬性關聯到一個名稱。 |
| scheme | format/URI | HTML5不支持。 定義用於翻譯 content 屬性值的格式。 |
http-equiv
meta標籤上的http-equiv屬性與http頭部信息相關，而且是響應頭，因爲html本質上是通過服務器響應得到的。http-equiv用於僞裝 HTTP 響應頭部信息。那麼http-equiv有哪些類型呢？讓我們一起看下。
| 值 | 描述 |
|---|---|
| cache-control | 控制文檔的緩存機制。允許的值如下：<br/>public：所有內容都將被緩存(客戶端和代理服務器都可緩存)<br/>private：內容只緩存到私有緩存中(僅客戶端可以緩存，代理服務器不可緩存)<br/>no-cache：不緩存，前提是通過服務器的緩存驗證機制，如過期，內容改變等校驗規則<br/>no-store：所有內容都不會被緩存到緩存或 Internet 臨時文件中<br/>（*設置了貌似無效，還是說不會出現在響應頭嗎？哪位大神可以解釋下）
|
| content-language | 響應體的語言。如zh-CN, en-US等<br/>（設置了貌似無效）
|
| content-type | 返回內容的MIME類型 |
| date | 原始服務器消息發出的時間，GMT時間格式 |
| expires | 響應過期的日期和時間，GMT時間格式<br/><meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT"><br/>（設置了貌似無效）
|
| last-modified | 請求資源的最後修改時間，GMT時間格式<br/>（設置了貌似無效）
|
| location | 用來重定向接收方到非請求URL的位置來完成請求或標識新的資源<br/>（設置了貌似無效）
|
| refresh | 定義間隔多久後刷新頁面。單位是秒。 |
| set-cookie | 創建一個 cookie ，包含 cookie 名，cookie 值，過期時間。<br/>（設置了貌似無效）
|
| window-target | 用來防止別人在框架裏調用自己的頁面。<br/><meta http-equiv="Window-target" content="_top"><br/>（設置了貌似無效）
|
| Pragma | 向後兼容只支持 HTTP/1.0 協議的緩存服務器，那時候 HTTP/1.1 協議中的 Cache-Control 還沒有出來。<br/><meta http-equiv="Pragma" content="no-cache"><br/>（設置了貌似無效）
|
注意：以上都是在chrome瀏覽器最新版本， vue dev環境下測試的，不代表所有瀏覽器和服務器表現。
常見meta
-
指定字符編碼
<meta charset="UTF-8"> -
IE殺手，推薦所有前端工程師採用，讓我們幹掉IE的市場份額。<!-- renderer適用於國產雙內核瀏覽器 --> <!-- 使用Blink（Webkit） --> <meta name="renderer" content="webkit"> <!-- IE兼容模式，使用ie低版本兼容 --> <meta name="renderer" content="ie-comp"> <!-- IE標準模式，使用ie高版本兼容 --> <meta name="renderer" content="ie-stand"> <!-- force-rendering適用於其他雙內核瀏覽器 --> <meta name="force-rendering" content="webkit"> <!-- 強化對IE的兼容性，強制IE使用最新版標準模式渲染或者使用Chrome Frame渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
viewport常見設置，一般適用於移動端。視口寬度設爲理想寬度，禁止縮放。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> -
meta三劍客<meta name="description" content="Tusi博客,專注大前端技術架構與分享,關注用戶體驗"> <meta name="keyword" content="Tusi博客,web前端,nodejs全棧,響應式,用戶體驗"> <meta name="author" content="Tusi"> -
UC瀏覽器私有meta<!-- 橫屏/豎屏 --> <meta name="screen-orientation" content="landscape|portrait"> <!-- 全屏 --> <meta name="full-screen" content="yes"> <!-- 縮放不出滾動條 --> <meta name="viewport" content="uc-fitscreen=yes|no"> <!-- 排版，fitscreen簡化頁面，適合閱讀省流量，standard模式和標準瀏覽器一致 --> <meta name="layoutmode" content="fitscreen|standard" <!-- 夜間模式的啓用和禁用 --> <meta name="nightmode" content="enable|disable"/> <!-- 強制圖片顯示 --> <meta name="imagemode" content="force"/> <!-- 強制圖片顯示，只作用於單圖 --> <img src="..." show="force"> <!-- 應用模式,默認全屏，禁止長按菜單，禁止手勢，標準排版，以及強制圖片顯示。 --> <meta name="browsermode" content="application"> -
QQ瀏覽器X5內核私有meta（現在微信內置瀏覽器的內核也是X5哦）<!-- 橫屏/豎屏 --> <meta name="x5-orientation" content="landscape|portrait"> <!-- 全屏 --> <meta name="x5-fullscreen" content="true"> <!-- 應用模式 --> <meta name="x5-page-mode" content="app"> -
蘋果機適配
<!-- "添加到主屏幕“後，全屏顯示 --> <meta name="apple-touch-fullscreen" content="yes"> <!-- 隱藏菜單欄和狀態欄，類似於應用模式 --> <meta name="apple-mobile-web-app-capable" content="yes|no"> <!-- 設置狀態欄顏色，貌似只有default白色，black黑色，black-translucent灰色半透明 --> <meta name=”apple-mobile-web-app-status-bar-style” content=black”> <!-- 取消電話號碼識別，防止誤觸撥號 --> <meta name="format-detection" content="telephone=no"> -
其他優化和適配手段
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- robots 用來告訴搜索機器人哪些頁面需要被檢索 --> <!-- index 搜索引擎抓取這個頁面 --> <!-- noindex 搜索引擎不抓取這個頁面 --> <!-- follow 抓取外鏈 --> <!-- nofollow 不抓取外鏈 --> <meta name="robots" content="index,follow"> <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,follow"> <meta name="robots" content="noindex,nofollow"> <!-- referrer 控制http請求頭的referer，暫時沒想到什麼實際應用場景 --> <!-- no-referrer 不發referer --> <!-- origin 只發送origin部分 --> <!-- no-referrer-when-downgrade 默認值，當目的地是先驗安全的(https->https)則發送origin作爲 referrer，但是當目的地是較不安全的(https->http)時則不發送referrer -->。 <!-- origin-when-crossorigin 在同源請求下，發送完整的URL(不含查詢參數)，其他情況下則僅發送當前文檔的origin --> <!-- unsafe-URL 在同源請求下，發送完整的URL(不含查詢參數) --> origin-when-crossorigin <meta name="referrer" content="no-referrer"> <!-- og: Open Graph Protocol，一種友好的配置，讓自己的網站在社交網絡分享中更得心應手，更多的配置可以去自行搜索 --> <!-- og:type 告訴SNS，我這是一個什麼類型的網站 --> <meta property=”og:type” content=”article”/> <!-- og:title 告訴SNS，分享時告訴用戶我這個網站的標題是什麼，別自己瞎搞個標題 --> <meta property=”og:title” content=”Tusi博客”/> <meta property=”og:url” content=”https://blog.wbjiang.cn”/> <!-- og:image 縮略圖 --> <meta property=”og:image” content=”/static/imgs/thumbnail.png”/> <meta property=”og:description” content=”專注於大前端技術架構與分享，關注用戶體驗”/>
掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章！
