即將是史上最全的meta大全

本文的目的是蒐集當前主流的meta配置，方便開發者快速開發調試。在這裏不會作各類meta的深刻分析，只是簡單的介紹，讓你們知道有這個東西。

meta簡述

• meta用於描述 HTML 文檔的元數據。一般用於指定網頁的描述，關鍵詞，做者及其餘元數據。
• 元數據能夠被使用瀏覽器（如何顯示內容或加載頁面），搜索引擎（關鍵詞），或其餘 Web 服務調用。
• meta從必定程度上影響seo。

meta支持哪些屬性

屬性	值	描述
charset	character_set	定義文檔的字符編碼。
content	text	定義與 http-equiv 或 name 屬性相關的元信息。
http-equiv	content-type default-style refresh	把 content 屬性關聯到 HTTP 頭部。
name	application-name author description generator keywords	把 content 屬性關聯到一個名稱。
scheme	format/URI	HTML5不支持。 定義用於翻譯 content 屬性值的格式。

http-equiv

meta標籤上的http-equiv屬性與http頭部信息相關，並且是響應頭，由於html本質上是經過服務器響應獲得的。http-equiv用於假裝 HTTP 響應頭部信息。那麼http-equiv有哪些類型呢？讓咱們一塊兒看下。

值	描述
cache-control	控制文檔的緩存機制。容許的值以下： public：全部內容都將被緩存(客戶端和代理服務器均可緩存) private：內容只緩存到私有緩存中(僅客戶端能夠緩存，代理服務器不可緩存) no-cache：不緩存，前提是經過服務器的緩存驗證機制，如過時，內容改變等校驗規則 no-store：全部內容都不會被緩存到緩存或 Internet 臨時文件中 （設置了貌似無效，仍是說不會出如今響應頭嗎？哪位大神能夠解釋下）
content-language	響應體的語言。如zh-CN, en-US等 （設置了貌似無效）
content-type	返回內容的MIME類型
date	原始服務器消息發出的時間，GMT時間格式
expires	響應過時的日期和時間，GMT時間格式 <meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT"> （設置了貌似無效）
last-modified	請求資源的最後修改時間，GMT時間格式 （設置了貌似無效）
location	用來重定向接收方到非請求URL的位置來完成請求或標識新的資源 （設置了貌似無效）
refresh	定義間隔多久後刷新頁面。單位是秒。
set-cookie	建立一個 cookie ，包含 cookie 名，cookie 值，過時時間。 （設置了貌似無效）
window-target	用來防止別人在框架裏調用本身的頁面。 <meta http-equiv="Window-target" content="_top"> （設置了貌似無效）
Pragma	向後兼容只支持 HTTP/1.0 協議的緩存服務器，那時候 HTTP/1.1 協議中的 Cache-Control 尚未出來。 <meta http-equiv="Pragma" content="no-cache"> （設置了貌似無效）

注意：以上都是在chrome瀏覽器最新版本， vue dev環境下測試的，不表明全部瀏覽器和服務器表現。

常見meta

1. 指定字符編碼

   <meta charset="UTF-8">

2. 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">

3. viewport常見設置，通常適用於移動端。視口寬度設爲理想寬度，禁止縮放。

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

4. meta三劍客

   <meta name="description" content="Tusi博客,專一大前端技術架構與分享,關注用戶體驗">
   <meta name="keyword" content="Tusi博客,web前端,nodejs全棧,響應式,用戶體驗">
   <meta name="author" content="Tusi">

5. 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">

6. QQ瀏覽器X5內核私有meta（如今微信內置瀏覽器的內核也是X5哦）

   <!-- 橫屏/豎屏 -->
   <meta name="x5-orientation" content="landscape|portrait">
   <!-- 全屏 -->
   <meta name="x5-fullscreen" content="true">
   <!-- 應用模式 -->
   <meta name="x5-page-mode" content="app">

7. 蘋果機適配

   <!-- "添加到主屏幕「後，全屏顯示 -->
   <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">

8. 其餘優化和適配手段

   <!-- 針對手持設備優化，主要是針對一些老的不識別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(不含查詢參數) -->
   <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博客，即刻閱讀最新文章！