meta標簽 · 前端筆記

[TOC] ## 基本標簽 ### **使用 HTML5 doctype** 不區分大小寫。 ``` <!DOCTYPE html>  ``` ### **meta** | 屬性 | 描述 | | :--- | :--- | | name | 把 content 屬性連接到某個名稱。 | | content | 設置或返回元素的 content 屬性的值。 | | httpEquiv | 把 content 屬性連接到一個 HTTP 頭部。 | ### 字符編碼 #### **聲明文檔使用的字符編碼** ``` <meta charset='utf-8'> ``` 簡體中文 ``` <meta charset='utf-8'> ``` 繁體中文 ``` <html lang="zh-cmn-Hans"> ``` 很少情況才需要加地區代碼，通常是為了強調不同地區漢語使用差異，例如： ` 菠蘿和鳳梨其實是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為黃梨。 ` **優先使用 IE 最新版本和 Chrome** ``` <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ``` ### SEO 優化 #### **頁面重定向和刷新** content內的數字代表時間（秒），既多少時間后刷新。如果加url,則會重定向到指定網頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰） ``` <meta http-equiv="refresh" content="0;url=" /> ``` #### **頁面描述** 每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。[文檔](http://msdn.microsoft.com/zh-cn/library/ff723911%28v=expression.40%29.aspx) ``` <meta name="description" content="不超過150個字符"> ``` #### **頁面關鍵詞** ``` <meta name="keywords" content=""> ``` #### **定義頁面標題** ``` <title>標題</title> ``` #### **定義網頁作者** ``` <meta name="author" content="name, email@gmail.com"> ``` #### **定義網頁搜索引擎索引方式** content值是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。[文檔](http://msdn.microsoft.com/zh-cn/library/ff724037%28v=expression.40%29.aspx) ``` <meta name="robots" content="index,follow"> ``` #### **定義版權** ``` <meta name="copyright" content="本網站版權歸CSDN所有"> ``` #### **定義編輯器** ``` <meta name="generator" content="PCDATA|FrontPage|"> ``` #### **重訪** 通知搜索引擎多少天訪問一次 ``` <meta name="revisit-after" content="7 days" > ``` ### 可選標簽 #### 為移動設備添加 viewport ``` <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> ``` width=device-width會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊。 [http://bigc.at/ios-webapp-viewport-meta.orz](http://bigc.at/ios-webapp-viewport-meta.orz) content 參數： | **width** | ? viewport 寬度\(數值/device-width\) | | :--- | :--- | | **? height** | ? viewport 高度\(數值/device-height\) | | **? initial-scale** | ? 初始縮放比例 | | **? maximum-scale?** | ? 最大縮放比例 | | **? minimum-scale** | ? 最小縮放比例 | | **? user-scalable** | ? 是否允許用戶縮放\(yes/no\) | | **? minimal-ui** | ? iOS 7.1 beta 2 中新增屬性（`注意：iOS8 中已經刪除`），可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> | #### 添加到主屏后的標題（iOS 6 新增） ``` <meta name="apple-mobile-web-app-title" content="標題"> ``` #### 是否啟用 WebApp 全屏模式 ``` <meta name="apple-mobile-web-app-capable" content="yes"> ``` #### 設置狀態欄的背景顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">  只有在 "apple-mobile-web-app-capable" content="yes" 時生效 content 參數： | 值 | 描述 | | :--- | :--- | | ? default | ? 默認值。 | | ? black | ? 狀態欄背景是黑色。 | | ? black-translucent | ? 狀態欄背景是黑色半透明。 | 如果設置為?`default`或?`black`,網頁內容從狀態欄底部開始。如果設置為?`black-translucent`,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。 #### 禁止數字識自動別為電話號碼 ``` <meta name="format-detection" content="telephone=no"> ``` #### 禁止自動自動識別地址 ``` <meta name="format-detection" content="address=no"> ``` #### 禁止自動自動識別日期 ``` <meta name="format-detection" content="date=no"> ``` #### 禁止自動自動識別 Email ``` <meta name="format-detection" content="email=no"> ``` #### **添加智能 App 廣告條 Smart App Banner\(iOS6+Safari\)** 告訴瀏覽器這個網站對應的app，并在頁面上顯示下載banner，需要注意的是Smart App Banners標簽不能用在frame框架內部，否則不起作用。 ``` <meta name="apple-itunes-app" content="app-id=app-id, affiliate-data=myAffiliateData, app-argument=myURL"> ``` 參考推特的寫法 ``` <meta name="apple-itunes-app" content="app-id=333903271, app-argument=twitter://timeline, affiliate-data=partnerId=30&siteID=UkOLawSuc90&u1=tw-44c06a9f3dde70bac326583e550d2f3dafd9cf56a0f96e6e639cf2155"> ``` content 參數： | 屬性 | 描述 | | :--- | :--- | | ? app-id | ? APP的唯一標識\(必選\) | | ? affiliate-data | ? iTunes 會員數據\(可選\) | | ? app-argument | ? 一個為native app提供了context的URL\(可選\) | #### **iOS 圖標** rel 參數： `apple-touch-icon`：圖片自動處理成圓角和高光等效果。 `apple-touch-icon-precomposed`：禁止系統自動添加效果，直接顯示設計原圖。 * iPhone 和 iTouch，默認 57x57 像素，必須有 ``` <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> ``` * iPad，72x72 像素，可以沒有，但推薦有 ``` <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> ``` * Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 ``` <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> ``` * Retina iPad，144x144 像素，可以沒有，但推薦有 ``` <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> ``` 官方文檔：[https://developer.apple.com/library/ios/qa/qa1686/\_index.html](https://developer.apple.com/library/ios/qa/qa1686/_index.html) 參考文章：[http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/](http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/) **iOS 啟動畫面** * iPad 的啟動畫面是不包括狀態欄區域的。 * iPad 豎屏 768 x 1004（標準分辨率） ``` <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> ``` * iPad 豎屏 1536x2008（Retina） ``` <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> ``` * iPad 橫屏 1024x748（標準分辨率） ``` <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> ``` * iPad 橫屏 2048x1496（Retina） ``` <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> ``` * iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。 * iPhone/iPod Touch 豎屏 320x480 \(標準分辨率\) ``` <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> ``` * iPhone/iPod Touch 豎屏 640x960 \(Retina\) ``` <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> ``` * iPhone 5/iPod Touch 5 豎屏 640x1136 \(Retina\) ``` <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> ``` 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）[文檔](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) #### Android * **設置顯示分辨率** ``` <meta name="viewport" content="target-densitydpi=device-dpi" /> ``` target-densitydpi 的值： | 值 | 描述 | | :--- | :--- | | device-dpi | 使用設備原本的 dpi 作為目標 dp。不會發生默認縮放。 | | high-dpi | 使用hdpi 作為目標 dpi。中等像素密度和低像素密度設備相應縮小。 | | medium-dpi | 使用mdpi作為目標 dpi。高像素密度設備相應放大，像素密度設備相應縮小。這是默認的target density. | | low-dpi | 使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。 | | 200 | 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。 | * 禁止android識別郵箱 ``` <meta name="format-detection" content="email=no"/> ``` * **控制選項卡顏色** ``` <meta name="theme-color" content="#db5945"> ``` #### Windows 8 * **Windows 8 磁貼顏色** ``` <meta name="msapplication-TileColor" content="#000"/> ``` * **Windows 8 磁貼圖標** ``` <meta name="msapplication-TileImage" content="icon.png"/> ``` #### [360 瀏覽器](http://se.#/v6/help/meta.html) {#user-content-360} * **設置 360 瀏覽器渲染模式** `webkit` 為極速內核，`ie-comp` 為 IE 兼容內核，`ie-stand` 為 IE 標準內核。 ``` <meta name="renderer" content="webkit|ie-comp|ie-stand"> ``` #### [UC 瀏覽器](http://www.uc.cn/business/developer/) * **設置屏幕方向**` portrait`為橫屏，`landscape`為豎屏。 `portrait` 為橫屏，`landscape` 為豎屏。 ``` <meta name="renderer" content="webkit|ie-comp|ie-stand"> ``` * **設置全屏** ``` <meta name="full-screen" content="yes"> ``` * **設置適應屏幕排版（縮放是否顯示滾動條）** UC 瀏覽器在標準排版效果實現的基礎上，提供適應屏幕的排版方式，當設置為 `uc-fitscreen=yes`，頁面進行縮放操作時，僅放大圖片和文字等元素，但不放大屏幕寬度，保持不出現水平（橫向）滾動條。 ``` <meta name="screen-orientation" content="portrait|landscape"> ``` * **排版模式** UC 瀏覽器提供兩種排版模式，分別是適屏模式（fitscreen）及標準模式（standard），其中適屏模式簡化了一些頁面的處理，使得頁面內容更適合進行頁面閱讀、節省流量及響應更快，而標準模式則能按照標準規范對頁面進行排版及渲染。 ``` <meta name="layoutmode" content="fitscreen|standard"> ``` * **夜間模式** 可以幫助用戶在低亮度或黑暗情況下更舒適的進行頁面瀏覽。由于基于網頁的應用愈加復雜，由瀏覽器實現的單一夜間模式不一定能夠適應所有情況\(例如游戲應用\)，因此 UC 瀏覽器允許網頁設計者對其設計的頁面禁用瀏覽器的夜間模式，自行設計更適合用戶使用的夜間模式。注意：頁面內的 `frame/iframe` 中的夜間模式的 `meta` 不生效。 ``` <meta name="nightmode" content="enable|disable"> ``` * **整頁圖片強制顯示** 為了節省流量及加快速度，UC 為用戶提供了無圖模式，在實際使用中存在頁面中的圖片是不可缺少的，例如驗證碼，地圖等。通過強制圖片顯示的功能可以保證圖片顯示不受用戶的設置影響。 \*\*注意：整頁圖片強制顯示僅對當前頁面生效，對頁面內的 `frame/iframe` 不生效，也不影響前進后退的頁面 ``` <meta name="imagemode" content="force"> ``` * **開啟應用模式** 應用模式是為方便 Web 應用及游戲開發者設置的綜合開關，通過meta標簽進行指示打開，當進入應用模式時，瀏覽器將自動調整以下參數: | 參數 | 狀態 | 說明 | | :--- | :--- | :--- | | 全屏 | 生效 | 可通過 `meta` 或 JS API 調用退出全屏 | | 長按菜單 | 失效 | 可通過 JS API 調用重新生效 | | 瀏覽器默認手勢 | 失效 | 可通過 JS API 調用重新生效 | | 排版模式 | 標準模式 | 可通過 `meta` 或 JS API 調用設置其他排版模式 | | 強制圖片顯示 | 生效 | / | | 夜間模式 | 失效 | 可通過 `meta` 或 JS API 調用啟用夜間模式 | ``` <meta name="browsermode" content="application"> ``` #### QQ 瀏覽器（X5 內核） ```  <meta name="x5-orientation" content="portrait|landscape">  <meta name="x5-fullscreen" content="true">  <meta name="x5-page-mode" content="app"> ``` ### 其他 #### **添加 RSS 訂閱** ``` <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> ``` #### **添加 favicon icon** ``` <link rel="shortcut icon" type="image/ico" href="/favicon.ico"> ``` #### **禁止 Chrome 瀏覽器中自動提示翻譯** 更多：[http://www.w3.org/International/questions/qa-translate-flag](http://www.w3.org/International/questions/qa-translate-flag) ``` <meta name="google" value="notranslate"> ``` #### **禁止百度轉碼** ``` <meta http-equiv="Cache-Control" content="no-siteapp"> ``` #### **UC強制全屏** ``` <meta name="full-screen" content="yes"> ``` #### **QQ強制豎屏** ``` <meta name="x5-orientation" content="portrait"> ``` #### **UC強制全屏** ``` <meta name="full-screen" content="yes"> ``` #### **QQ強制全屏** ``` <meta name="x5-fullscreen" content="true"> ``` #### **UC應用模式** ``` <meta name="browsermode" content="application"> ``` #### **QQ應用模式** ``` <meta name="x5-page-mode" content="app"> ``` #### **windows phone 點擊無高光** ``` <meta name="msapplication-tap-highlig content="no”> ``` #### **啟用360瀏覽器的極速模式\(webkit\)** ``` <meta name="renderer" content="webkit"> ```