標籤：cache 搜尋方塊 iso 寬度 target ios sig 可用性 目的
Meta 標籤meta標籤是HTML中head頭部的一個輔助性標籤，它位於HTML文檔頭部的 <head> 和 <title> 標記之間，它提供使用者不可見的資訊。雖然這部分資訊使用者不可見，但是其作用非常強大，特別是當今的前端開發工作中，設定合適的meta標籤可以大大提升網站頁面的可用性。
案頭端開發中，meta標籤通常用來為搜尋引擎最佳化（SEO）及 robots定義頁面主題，或者是定義使用者瀏覽器上的cookie；它可以用於鑒別作者，設定頁面格式，標註內容提要和關鍵字；還可以設定頁面使其可以根據你定義的時間間隔重新整理自己，以及設定RASC內容等級，等等。
移動端開發中，meta標籤除了案頭端中的功能設定外，還包括，比如viewport設定，添加到主畫面表徵圖，標籤頁顏色等等實用設定。具體可以看後面詳細的介紹。
meta標籤分類meta標籤根據屬性的不同，可分為兩大部分：http-equiv 和 name 屬性。
<!-- 設定文檔的字元編碼 --> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其他任何的 head 內容必須在這些標籤的 *後面* --> <!-- 允許控制資源的過度載入 --> <meta http-equiv="Content-Security-Policy" content="default-src ‘self‘"> <!-- 儘早地放置在文檔中 --> <!-- 僅應用於該標籤下的內容 --> <!-- Web 應用程式的名稱（僅當網站被用作為一個應用時才使用）--> <meta name="application-name" content="應用程式名稱"> <!-- 針對頁面的簡短描述（限制 150 字元）--> <!-- 在*某些*情況下，該描述是被用作搜尋結果展示片段的一部分 --> <meta name="description" content="一個頁面描述"> <!-- 控制搜尋引擎的抓取和索引行為 --> <meta name="robots" content="index,follow,noodp"><!-- 所有的搜尋引擎 --> <meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 --> <!-- 告訴 Google 不顯示網站連結的搜尋方塊 --> <meta name="google" content="nositelinkssearchbox"> <!-- 告訴 Google 不提供此頁面的翻譯 --> <meta name="google" content="notranslate"> <!-- 驗證 Google 搜尋控制台的所有權 --> <meta name="google-site-verification" content="verification_token"> <!-- 用來命名軟體或用於構建網頁（如 - WordPress、Dreamweaver）--> <meta name="generator" content="program"> <!-- 關於你的網站主題的簡短描述 --> <meta name="subject" content="你的網站主題"> <!-- 非常簡短（少於 10 個字）的描述。主要用於學術論文。--> <meta name="abstract" content=""> <!-- 完整的網域名稱或網址 --> <meta name="url" content="https://example.com/"> <meta name="directory" content="submission"> <!-- 基於網站內容給出一般的年齡分級 --> <meta name="rating" content="General"> <!-- 允許控制 referrer 資訊如何傳遞 --> <meta name="referrer" content="never"> <!-- 禁用自動檢測和格式化可能的電話號碼 --> <meta name="format-detection" content="telephone=no"> <!-- 通過設定為 “off” 完全退出 DNS 預取 --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- 在用戶端儲存 cookie，網頁瀏覽器的用戶端識別 --> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> <!-- 指定要顯示在一個特定架構中的頁面 --> <meta http-equiv="Window-Target" content="_value"> <!-- 地理位置標籤 --> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" --> <meta name="geo.region" content="country[-state]"> <!-- 如 content="New York City" --> <meta name="geo.placename" content="city/town">相關的詳細說明請查看：
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 -->| 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">而如果你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。
<meta name="viewport" content="width=device-width,user-scalable=yes"> <meta name="viewport" content="width=375"> <meta name="viewport" content="width=414">大部分 4.7~5 寸的安卓裝置的 viewport 寬設為 360px，iPhone 6 上卻是 375px，大部分 5.5 寸安卓機器（比如說三星 Note）的 viewport 寬為 400，iPhone 6 plus 上是 414px。
SEO 最佳化部分<!-- 頁面標題<title>標籤(head 頭部必須) --><title>your title</title><!-- 頁面關鍵詞 keywords --><meta name="keywords" content="your keywords"><!-- 頁面描述內容 description --><meta name="description" content="your description"><!-- 定義網頁作者 author --><meta name="author" content="author,email address"><!-- 定義網頁搜尋引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 --><meta name="robots" content="index,follow">相關連結：WEB1038 – 標記包含無效的值
百度禁止轉碼通過百度手機開啟網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在 head 內添加
<meta http-equiv="Cache-Control" content="no-siteapp" />相關連結：SiteApp 轉碼聲明
不推薦的 meta 屬性 <!-- 用於聲明文檔語言，但支援得不是很好。最好使用 <html lang=""> --> <meta name="language" content="en"> <!-- Google 無視 & Bing 認為垃圾的指標 --> <meta name="keywords" content="你,關鍵字,在這裡,不使用空格,而用逗號進行分隔"> <!-- 目前沒有在任何搜尋引擎中使用過的聲明 --> <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm"> <!-- 為垃圾郵件機器人收穫 email 地址提供了一種簡單的方式 --> <meta name="reply-to" content="[email protected]"> <!-- 最好使用 <link rel="author"> 或 humans.txt 檔案 --> <meta name="author" content="name, [email protected]"> <meta name="designer" content=""> <meta name="owner" content=""> <!-- 告訴搜尋機器人一段時間後重新訪問該網頁。這不支援，因為大多數搜尋引擎使用隨機時間間隔來重新抓取網頁 --> <meta name="revisit-after" content="7 days"> <!-- 在一段時間後將使用者重新導向到新的 URL --> <!-- W3C 建議不要使用該標籤。Google 建議使用伺服器端的 301 重新導向。--> <meta http-equiv="refresh" content="300; url=https://example.com/"> <!-- 描述網站的主題 --> <meta name="topic" content=""> <!-- 公司概要或網站目的 --> <meta name="summary" content=""> <!-- 一個已廢棄的標籤，和關鍵詞 meta 標籤的作用相同 --> <meta name="classification" content="business"> <!-- 是否是相同的 URL，年代久遠且不支援 --> <meta name="identifier-URL" content="https://example.com/"> <!-- 和關鍵詞標籤類似的功能 --> <meta name="category" content=""> <!-- 確保你的網站在所有國家和語言中都能顯示 --> <meta name="coverage" content="Worldwide"> <!-- 和 coverage 標籤相同 --> <meta name="distribution" content="Global"> <!-- 控制在互連網上哪些使用者可以訪問 --> <meta http-equiv="Pics-label" content="value"> <!-- 緩衝控制 --> <!-- 最好在伺服器端配置緩衝控制 --> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache">移動前端不得不瞭解的HTML5 head 頭標籤 —— Meta 標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
