移動前端不得不了解的HTML5 head 頭標簽 —— Meta 標簽
阿新 • • 發佈：2018-06-02
target bing sea sign 以及 網址 應用 ots 頁面加載
Meta 標簽
meta標簽是HTML中head頭部的一個輔助性標簽，它位於HTML文檔頭部的 <head> 和 <title> 標記之間，它提供用戶不可見的信息。雖然這部分信息用戶不可見，但是其作用非常強大，特別是當今的前端開發工作中，設置合適的meta標簽可以大大提升網站頁面的可用性。
桌面端開發中，meta標簽通常用來為搜索引擎優化（SEO）及 robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用於鑒別作者，設定頁面格式，標註內容提要和關鍵字；還可以設置頁面使其可以根據你定義的時間間隔刷新自己，以及設置RASC內容等級，等等。
移動端開發中，meta標簽除了桌面端中的功能設置外，還包括，比如viewport設置，添加到主屏幕圖標，標簽頁顏色等等實用設置。具體可以看後面詳細的介紹。
meta標簽分類
meta標簽根據屬性的不同，可分為兩大部分：http-equiv 和 name 屬性。
http-equiv
相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。name屬性
主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於瀏覽器，搜索引擎等機器人識別，等等。
推薦使用的meta標簽
<!-- 設置文檔的字符編碼 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content= 相關的詳細說明請查看：
- Google 可以識別的 Meta 標簽
- WHATWG Wiki: Meta 拓展
- ICBM – 維基百科
- 地理標記 – 維基百科
為移動設備添加 viewport
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">適配 iPhone 6 和 iPhone 6plus 則需要寫：
<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 標簽