META標籤的設置

㈠定義及用法

⑴<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。

⑵<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

⑶元數據（metadata）是關於數據的信息。元數據老是以名稱/值的形式被成對傳遞的。

⑷典型的狀況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據。

⑸元數據可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。

 

㈡可選屬性

注意：當有http-equiv或者name屬性時，必需要有content屬性，content 屬性提供了名稱/值對中的值，content屬性定義與 http-equiv 或 name 屬性相關的元信息。content始終要和 name 屬性或 http-equiv 屬性一塊兒使用。

 

㈢name屬性

⑴定義元數據的名稱，與content屬性包含的值相關聯。HTML 和 XHTML 標籤都沒有指定任何預先定義的 <meta> 名稱。一般狀況下，您能夠自由使用對本身和源文檔的讀者來講富有意義的名稱。

⑵application-name：定義正運行在該網頁上的網絡應用名稱

    •簡單的網頁不該該去定義
⑶author：文檔的做者名稱

⑷description：內容的簡短和精確描述，一些瀏覽器，如Firefox和Opera，將其用做書籤頁面的默認描述。

⑸generator：生成頁面的軟件的標識符

⑹keywords：用逗號分隔的與頁面內容相關的單詞

⑺referrer：控制全部從該頁面發出的HTTP請求中referer首部的內容。

⑻content取值：

⑼creator：文檔建立者的名稱，能夠是機構的名稱，有多個的話必須定義多個meta

⑽googlebot：robots谷歌的索引抓取工具Googlebot 的同義詞，只適用於google

⑾publisher：以自由格式定義文檔發佈者的名稱，能夠是機構的名稱。

⑿robots：定義協做爬蟲應該與頁面的行爲，以逗號分隔的值的列表。

 

⒀slurp：與robots同樣， 但其僅使用於 Slurp – Yahoo Search的抓取工具。

⒁rebderer：爲雙核瀏覽器準備，用於指定雙核瀏覽器默認以何種方式渲染頁面

⒂viewport：提供有關視口初始大小的提示，僅供移動設備使用。

 

 

㈣http-equiv

指示服務器在發送實際的文檔以前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。

⑴content-language：定義頁面使用的默認語言
    •儘可能使用全劇屬性lang來代替

⑵content-security-policy：容許頁面做者定義當前頁的 內容策略。 內容策略主要指定容許的服務器源和腳本端點，這有助於防止跨站點腳本攻擊。

⑶content-type：定義文檔的MIME type
    •使用charset代替

⑷default-style：指定了在頁面上使用的首選樣式表

⑸refresh
    •若是content只包含一個正整數，則是從新載入頁面的時間間隔
    •若是content包含一個正整數而且跟着一個字符串，則是重定向到指定連接的時間間隔

⑹set-cookie：爲頁面定義cookie
    •該用HTTP的Set-Cookie代替

㈤移動端meta標籤配置

★控制顯示區域各類屬性

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

⑴width - viewport的寬度（範圍從 200 到 10,000，默認爲 980 像素）

⑵height – viewport的高度（範圍從 223 到 10,000 ）

⑶initial-scale - 初始的縮放比例（範圍從 > 0 到 10）

⑷minimum-scale - 容許用戶縮放到的最小比例

⑸maximum-scale – 容許用戶縮放到的最大比例

⑹user-scalable – 用戶是否能夠手動縮放(no，yes)

 

1.http-equiv 屬性的 Content-Type 值（顯示字符集的設定）

說明：設定頁面使用的字符集，用以說明主頁製做所使用的文字語言，瀏覽器會根據此來調用相應的字符集顯示 page 內容。

用法：

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

注意：該 meta 標籤訂義了 HTML 頁面所使用的字符集爲 utf-8 ，就是萬國碼。它能夠在同一頁面顯示中文簡體、繁體及其它語言（如日文，韓文）等。

 

2.name 屬性設置做者姓名及聯繫方式

<meta name="author" contect="liudanyun, liudy102@163.com" />

 

3.忽略將數字變爲電話號碼：

<meta content="telephone=no" name="format-detection">

通常狀況下，IOS和Android系統都會默認某長度內的數字爲電話號碼，即便不加也是會默認顯示爲電話的，so，取消這個頗有必要！

 

4.IOS中Safari容許全屏瀏覽：

<meta content="yes" name="apple-mobile-web-app-capable">

 

5.IOS中Safari頂端狀態條樣式：

<meta content="black" name="apple-mobile-web-app-status-bar-style">

 

6.使用特殊連接：

若是你關閉自動識別後 ，又但願某些電話號碼可以連接到 iPhone 的撥號功能 ，那麼能夠經過這樣來聲明電話連接 ,

<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發短信</a>

或用於單元格：

<td onclick="location.href='tel:122'">

 

㈥meta標籤經常使用的寫法

<meta charset="utf-8"> <!-- 設置文檔字符編碼 --> <meta http-equiv="x-ua-compatible" content="ie=edge"><!-- 告訴IE瀏覽器，IE8/9及之後的版本都會以最高版本IE來渲染頁面。 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 指定頁面初始縮放比例。--> <!-- 上述3個meta標籤須放在head標籤最前面;其它head內容放在其後面，如link標籤--> <!-- 容許控制加載資源 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <!-- 儘量早的放在文檔 --> <!-- 只適用於下面這個標籤的內容 --> <!-- 使用web應用程序的名稱(當網站做爲一個應用程序的時候)--> <meta name="application-name" content="Application Name"> <!-- 頁面的簡短描述(限150個字符)--> <!-- 在某些狀況下這個描述做爲搜索結果中所示的代碼片斷的一部分。--> <meta name="description" content="A description of the page"> <!-- 控制搜索引擎爬行和索引的行爲 --> <meta name="robots" content="index,follow,noodp"><!-- 全部搜索引擎 --> <meta name="googlebot" content="index,follow"><!-- 谷歌 --> <!-- 告訴谷歌搜索框不顯示連接 --> <meta name="google" content="nositelinkssearchbox"> <!-- 告訴谷歌不要翻譯這個頁面 --> <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="your website's subject"> <!-- 很短(10個詞之內)描述。主要學術論文 --> <meta name="abstract" content=""> <!-- 完整的域名或網址 --> <meta name="url" content="https://example.com/"> <meta name="directory" content="submission"> <!-- 對當前頁面一個等級衡量，告訴蜘蛛當前頁面在整個網站中的權重究竟是多少。General是通常頁面，Mature是比較成熟的頁面，Restricted表明受限制的。 --> <meta name="rating" content="General"> <!-- 隱藏發送請求時請求頭表示來源的referrer字段。 --> <meta name="referrer" content="no-referrer"> <!-- 禁用自動檢測和格式的電話號碼 --> <meta name="format-detection" content="telephone=no"> <!-- 經過設置「off」,徹底退出DNS隊列 --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別--> <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"> <meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" --> <meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->