定義及用法

⑴<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, [email protected]" />

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‘">

電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com

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" -->