meta標籤簡介

meta 標籤的概念

元數據（metadata）提供有關頁面的元信息。元數據不會顯示在頁面上，可是對於機器是可讀的。
meta 元素常被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據。標籤始終位於 head 元素中。
元數據老是以 鍵/值 對的形式被成對傳遞的。

meta 的做用

1. meta 裏的數據是供機器解讀的，告訴機器該如何解析這個頁面。
2. 能夠添加服務器發送到瀏覽器的 http 頭部內容。

meta 的屬性

<meta> 標籤的屬性定義了與文檔相關聯的 鍵/值 對。

charset 屬性

HTML5中新添加的，用於定義字符集。儘可能寫在第一行，否則可能會產生亂碼。

<meta charset="UTF-8">

content 屬性

當 meta 有 http-equiv 或 name 屬性時，必定要有 content 屬性對其進行說明。

http-equiv 屬性

http-equiv 屬性是添加http頭部內容的。該屬性爲 鍵/值 對提供了鍵名。並指示服務器在發送實際的文檔以前先在要傳送給瀏覽器的 MIME 文檔頭部包含該 鍵/值 對。

1. content-type：設定網頁類型，設置字符集，適用於舊的HTML版本，推薦使用charset屬性。

   <meta http-equiv="content-Type" content="text/html;charset=utf-8">

2. X-UA-Compatible：瀏覽器採起何種版本渲染當前頁面，通常都設置爲最新模式。

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3. refresh：重定向頁面，content 中的數字表示秒數，若是沒有url，表示刷新頁面；有url，表示5秒後重定向至新的網址。

   <meta http-equiv="refresh" content="5;url=https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta">

4. cache-control

   • 指定請求和響應遵循的緩存機制

     <meta http-equiv="cache-control" content="no-cache">

     content 參數：

     • no-cache：瀏覽器和緩存服務器都不該該緩存頁面信息。
     • no-store：請求和響應的信息都不該該被存儲在對方的磁盤系統中。
     • public：緩存全部相應。
     • private：只爲單個用戶緩存。
     • maxage：表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器從新請求。數字表明秒數。例如：max-age=60 表示響應能夠再緩存和重用 60 秒。

   • 禁止百度自動轉碼：禁止當前頁面在移動端瀏覽時，被百度自動轉碼，不過不保證100%禁止。

     <meta http-equiv="cache-control" content="no-siteapp">
     <meta http-equiv="cache-control" content="no-transform">

5. pragma：cache模式，禁止緩存，沒法脫機瀏覽。

   <meta http-equiv="pragma" content="no-cache">

6. expires：網頁到期時間，過時後必須到服務器上從新傳輸。必須使用 GMT 時間格式，或直接設爲0。

   <meta http-equiv="expires" content="0">

name 屬性

name 屬性是供瀏覽器進行解析。沒有指定具體的值，一般狀況下，能夠自由使用對本身和源文檔的讀者來講富有意義的名稱。前提是瀏覽器可以解析寫進去的name屬性才能夠，否則就是沒有意義的。

1. renderer：這個meta標籤的意思就是告訴瀏覽器，用webkit內核進行解析，固然前提是瀏覽器有webkit內核才能夠。這個 renderer 是在360瀏覽器裏說明的。360瀏覽器meta文檔說明

   <meta name="renderer" content="webkit|ie-comp|ie-stand">

2. generator：網站的製做軟件。
3. copyright：網站的版權信息。
4. revisit-after：網站重訪天數。

SEO 優化部分的 meta

robots

定義網頁搜索引擎爬蟲的索引方式，告訴爬蟲哪些頁面須要索引，哪些不須要索引。

<meta name="robots" content="index,follow">

content 參數：

• all：默認值，等價於index + follow。
• index：索引此網頁。
• follow：繼續經過此網頁的連接索引搜索其它的網頁。
• noindex：不索引此網頁。
• nofollow：不繼續經過此網頁的連接索引搜索其它的網頁。
• none：等價於noindex + nofollow。

其它

<!-- keywords 頁面關鍵字(由於被濫用，SEO 已經取消了關鍵字搜索了) -->
<meta name="keywords" content="word1,word2,word3">
<!-- description 頁面內容描述 -->
<meta name="description" content="ye mian miao shu">
<!-- author 定義網頁做者 -->
<meta name="author" content="Dora">

移動端經常使用的 meta

viewport

viewport 主要是影響移動端頁面佈局的

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

content 參數：

• width：viewport 寬度，數值 device-width
• height：viewport 高度，數值 device-height
• initial-scale：初始縮放比例，取值 0.0-10.0
• maximum-scale：最大縮放比例，取值 0.0-10.0
• minimum-scale：最小縮放比例，取值 0.0-10.0
• user-scalable：是否容許用戶縮放，數值 yes / no

其它

<!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->
<meta name="format-detection" content="telphone=no, email=no">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

各瀏覽器平臺的 meta

IE

<!-- 優先使用最新的 ie 版本，避免使用兼容模式 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

Google Chrome

<!-- 優先使用最新的 Chrome 版本 -->
<meta http-equiv="x-ua-compatible" content="chrome=1">
<!-- 禁止自動翻譯 -->
<meta name="google" value="notranslate">

360 瀏覽器

<!-- 選擇360瀏覽器的解析內核，啓用 webkit 極速模式 -->
<meta name="rederer" content="webkit">

UC 手機瀏覽器

<!-- 將屏幕鎖定在特定的方向 -->
<meta name="screen-orientation" content="landscape|portrait">
<!-- 強制全屏 -->
<meta name="full-screen" content="yes">
<!-- 強制圖片顯示，即便是「text mode" -->
<meta name="imagemode" content="force">
<!-- 應用模式顯示，默認全屏，禁止長按菜單，禁止手勢，標準排版，強制圖片顯示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜間模式顯示 -->
<meta name="nightmode" content="disable">
<!-- 使用適屏模式顯示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 當頁面有太多文字時禁止縮放 -->
<meta name="wap-font-scale" content="no">

QQ 手機瀏覽器

<!-- 將屏幕鎖定在特定方向 -->
<meta name="x5-orientation" content="landscape|portrait">
<!-- 強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 頁面以應用模式顯示 -->
<meta name="x5-page-mode" content="app">

Apple 的 IOS

<!-- Add to Home Screen添加到主屏 -->
<!-- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設置狀態欄的背景顏色,只有在 「apple-mobile-web-app-capable」 content=」yes」 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏後的標題 -->
<meta name="apple-mobile-web-app-title" content="App Title">