<meta>標簽可提供頁面數(shù)據(jù)的元信息（meta information）旋讹。
<meta>標簽位于文檔頭部，不包含內(nèi)容冒滩，其屬性定義了與文檔關(guān)聯(lián)的鍵值對微驶。
簡單來說，<meta>就是文檔信息描述的標簽。我們從以下幾個方面來看看<meta>的實際用途因苹。比如：
- 搜索引擎優(yōu)化（SEO）
- 定義頁面使用語言
- 自動刷新并指向新的頁面
- 實現(xiàn)網(wǎng)頁轉(zhuǎn)換時的動態(tài)效果
- 控制頁面緩沖
- 網(wǎng)頁定級評價
- 控制網(wǎng)頁顯示的窗口
一苟耻、meta標簽的屬性
1、charset屬性
該特性申明文檔的字符編碼但扶檐，該聲明可以被任何一個元素的 lang 特性的值覆蓋凶杖。推薦使用utf-8國際通用編碼。如：
<meta charset="utf-8">
2款筑、content屬性
此屬性包含http-equiv 或name 屬性的值智蝠，具體取決于所使用的值。
3奈梳、http-equiv屬性
這個枚舉屬性定義了能改變服務(wù)器和用戶引擎行為的編譯杈湾。這個編譯值使用content 來定義，如下：
-
content-language（過時）
指定頁面的默認語言攘须，推薦使用
<html>設(shè)置全局lang屬性來代替漆撞。 -
content-security-policy：內(nèi)容安全策略
它允許頁面作者定義當前頁的 內(nèi)容策略。 內(nèi)容策略主要指定允許的服務(wù)器源和腳本端點于宙，這有助于防止跨站點腳本攻擊浮驳。
-
content-type（過時）
設(shè)置文檔字符編碼，推薦使用meat的
charset屬性代替捞魁。 -
default-style：默認樣式（首選樣式）
該屬性指定了文檔首選的默認樣式至会。content的值必須包含
link元素的標題、href屬性鏈接到CSS樣式表或包含CSS樣式表的``元素的標題署驻。 -
refresh：頁面刷新時間
如果
content值為正整數(shù)奋献，則設(shè)置為指定時間間隔刷新當前頁面，值為正整數(shù)后跟字符串的形式則指定時間間隔內(nèi)跳轉(zhuǎn)到指定頁面旺上。以上時間單位為秒。<!-- Redirect page after 3 seconds --> <meta http-equiv="refresh" content="3;url=http://www.cnblogs.com/fzz9/"> <meta http-equiv="refresh" content="3 http://www.cnblogs.com/fzz9/"> -
set-cookie（過時）
為頁面設(shè)置cookie糖埋，請改用HTTP的Set-Cookie頭部宣吱。
4、name屬性
該屬性定義文檔級元數(shù)據(jù)的名稱瞳别。如果以下其中一個屬性設(shè)置了itemprop, http-equiv or charset 征候，就不能再設(shè)置這個屬性了。
name屬性可包含以下值（不完整）：
-
application-name
定義正運行在該網(wǎng)頁上的網(wǎng)絡(luò)應(yīng)用名稱祟敛。
-
author
文檔的作者名稱疤坝，自由格式。
-
description
其中包含頁面內(nèi)容的簡短和精確的描述馆铁。 一些瀏覽器跑揉，如Firefox和Opera，將其用作書簽頁面的默認描述。
-
generator
包含生成頁面的軟件的標示符历谍。
-
keywords
包含與逗號分隔的頁面內(nèi)容相關(guān)的單詞现拒。
-
referrer（實驗中的屬性）
控制所有從該文檔發(fā)出的 HTTP 請求中HTTP Referer首部的內(nèi)容。
-
creator
定義文檔創(chuàng)建者的名稱望侈，與author類似印蔬。
-
googlebot
屬性
robots的同義詞，該屬性只有g(shù)oogleBot(谷歌索引抓取工具)才會使用脱衙。 -
publisher
自由格式定義文檔發(fā)布者的名稱侥猬。
-
robots
定義搜索引擎爬蟲與頁面應(yīng)具有的行為。 它是以逗號分隔的值列表捐韩，可選值：
Value(可選值) Description（描述） Used by（可支持使用的搜索引擎） indexAllows the robot to index the page（允許機器人索引頁面） All noindexPrevents the robot from indexing the page All followAllows the robot to follow the links on the page（允許機器人跟隨頁面上的鏈接） All nofollowPrevents the robot from following the links on the page All noodpPrevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page Google ,Yahoo , Bing noarchivePrevents the search engine from caching the content of the page（阻止搜索引擎緩存頁面內(nèi)容） Google,Yahoo,Bing nosnippetPrevents the display of any description of the page in the search engine results page（阻止在搜索引擎結(jié)果頁面中顯示頁面的任何描述） Google noimageindexPrevents this page from appearing as the referring page of an indexed image Google noydirPrevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page Yahoo nocacheSynonym of noarchiveBing -
viewport（供移動設(shè)備使用）
該屬性提供有關(guān)視口初始大小的提示陵究，僅供移動設(shè)備使用。
可選值為：
Value 可能值 描述 width一個正整數(shù)或者字符串 device-width(以設(shè)備寬度作為視口寬度) 以pixels（像素）為單位奥帘， 定義viewport（視口）的寬度铜邮。 height一個正整數(shù)或者字符串 device-height(以設(shè)備高度作為視口g高度) 以pixels（像素）為單位， 定義viewport（視口）的高度寨蹋。 initial-scale一個0.0 到10.0之間的正數(shù) 定義設(shè)備寬度（縱向模式下的設(shè)備寬度或橫向模式下的設(shè)備高度）與視口大小之間的縮放比率松蒜。 maximum-scale一個0.0 到10.0之間的正數(shù) 定義縮放的最大值；它必須大于或等于minimum-scale的值已旧，不然會導(dǎo)致不確定的行為發(fā)生秸苗。 minimum-scale一個0.0 到10.0之間的正數(shù) 定義縮放的最小值；它必須小于或等于maximum-scale的值运褪，不然會導(dǎo)致不確定的行為發(fā)生惊楼。 user-scalable一個布爾值（yes 或者no） 如果設(shè)置為no，用戶將不能放大或縮小網(wǎng)頁秸讹。默認值為yes檀咙。 我們常使用下面這個設(shè)置來適配移動端頁面：
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
二、meta標簽的實際使用
1璃诀、各大網(wǎng)站首頁的meta
我們可以從各大網(wǎng)站的頁面查看他們對meta的使用弧可，比如：
-
淘寶首頁
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="spm-id" content="a21bo"> <meta name="description" content="淘寶網(wǎng) - 亞洲較大的網(wǎng)上交易平臺，提供各類服飾劣欢、美容棕诵、家居、數(shù)碼凿将、話費/點卡充值… 數(shù)億優(yōu)質(zhì)商品校套，同時提供擔保交易(先收貨后付款)等安全交易保障服務(wù)，并由商家提供退貨承諾牧抵、破損補寄等消費者保障服務(wù)笛匙，讓你安心享受網(wǎng)上購物樂趣！"> <meta name="aplus-xplug" content="NONE"> <meta name="keyword" content="淘寶,掏寶,網(wǎng)上購物,C2C,在線交易,交易市場,網(wǎng)上交易,交易市場,網(wǎng)上買,網(wǎng)上賣,購物網(wǎng)站,團購,網(wǎng)上貿(mào)易,安全購物,電子商務(wù),放心買,供應(yīng),買賣信息,網(wǎng)店,一口價,拍賣,網(wǎng)上開店,網(wǎng)絡(luò)購物,打折,免費開店,網(wǎng)購,頻道,店鋪"> -
微博首頁
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="initial-scale=1,minimum-scale=1"> <meta content="隨時隨地發(fā)現(xiàn)新鮮事！微博帶你欣賞世界上每一個精彩瞬間膳算，了解每一個幕后故事座硕。分享你想表達的，讓全世界都能聽到你的心聲涕蜂！" name="description"> -
github首頁
<meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="description" content="GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects."> <meta property="fb:app_id" content="1401488693436528"> <meta property="og:url" content="https://github.com"> <meta property="og:site_name" content="GitHub"> <meta property="og:title" content="Build software better, together"> <meta property="og:description" content="GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects."> <meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-logo.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="1200"> <meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-mark.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="620"> <meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-octocat.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="620"> <meta property="twitter:site" content="github"> <meta property="twitter:site:id" content="13334762"> <meta property="twitter:creator" content="github"> <meta property="twitter:creator:id" content="13334762"> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:title" content="GitHub"> <meta property="twitter:description" content="GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects."> <meta property="twitter:image:src" content="https://github.githubassets.com/images/modules/open_graph/github-logo.png"> <meta property="twitter:image:width" content="1200"> <meta property="twitter:image:height" content="1200"> <meta name="pjax-timeout" content="1000"> <meta name="request-id" content="2ED9:0DCF:16C7FB:216F9D:5CC52252" data-pjax-transient=""> <meta name="selected-link" value="/" data-pjax-transient=""> <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU"> <meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA"> <meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc"> <meta name="octolytics-host" content="collector.githubapp.com"> <meta name="octolytics-app-id" content="github"> <meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event"> <meta name="octolytics-dimension-request_id" content="2ED9:0DCF:16C7FB:216F9D:5CC52252"> <meta name="octolytics-dimension-region_edge" content="ap-southeast-1"> <meta name="octolytics-dimension-region_render" content="iad"> <meta name="octolytics-actor-id" content="30432876"> <meta name="octolytics-actor-login" content="fongzhizhi"> <meta name="octolytics-actor-hash" content="7746069481520fac3723891a8bbfada265f7541285b3ba8dce727e3dd67e5af2"> <meta name="analytics-location" content="/dashboard" data-pjax-transient="true"> <meta name="google-analytics" content="UA-3769691-2"> <meta class="js-ga-set" name="userId" content="d47384dc9e738b855285fea4b0c3b639"> <meta class="js-ga-set" name="dimension1" content="Logged In"> <meta name="hostname" content="github.com"> <meta name="user-login" content="fongzhizhi"> <meta name="expected-hostname" content="github.com"> <meta name="js-proxy-site-detection-payload" content="NDE0ZmM0YmRlYTcyMmYxMmM3OTcxN2NkMmJlMDFkZmM2ODEwNjA5YjI2YzIxNjlhNTVjODQ0NjJlY2Q4NWI0Ynx7InJlbW90ZV9hZGRyZXNzIjoiMTE2LjI0Ljk5LjEwMSIsInJlcXVlc3RfaWQiOiIyRUQ5OjBEQ0Y6MTZDN0ZCOjIxNkY5RDo1Q0M1MjI1MiIsInRpbWVzdGFtcCI6MTU1NjQyMzI1NCwiaG9zdCI6ImdpdGh1Yi5jb20ifQ=="> <meta name="enabled-features" content="SPONSORS_TIERS,UNIVERSE_BANNER,MARKETPLACE_INVOICED_BILLING,MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,NOTIFY_ON_BLOCK,RELATED_ISSUES"> <meta name="html-safe-nonce" content="df3a1b9bcd5d110071c16fe060650098953e13ef"> <meta http-equiv="x-pjax-version" content="5b8034c4a9fa0ce9faea05e0eaa63e01"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <meta name="theme-color" content="#1e2327"> -
stackoverflow首頁
<meta name="description" content="S tack Overflow is the largest, most trusted online community for developers to learn, share? ?their programming ?knowledge, and build their careers."> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> <meta property="og:type" content="website"> <meta property="og:url" content="https://stackoverflow.com/"> <meta property="og:site_name" content="Stack Overflow"> <meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"> <meta name="twitter:card" content="summary"> <meta name="twitter:domain" content="stackoverflow.com"> <meta name="twitter:title" property="og:title" itemprop="name" content="Stack Overflow - Where Developers Learn, Share, & Build Careers"> <meta name="twitter:description" property="og:description" itemprop="description" content="Stack Overflow | The World’s Largest Online Community for Developers">
2华匾、meta一些的具體作用
-
瀏覽器兼容性設(shè)置
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />當指定的content值為IE=edge,chrome=1時，優(yōu)先使用 IE 最新版本和 Chrome机隙。
假定客戶端安裝了Google Chrome Frame蜘拉，則在IE中使用chrome的渲染引擎來渲染頁面，否則有鹿，將會使用客戶端IE最高的標準模式對頁面進行渲染旭旭。
還能這樣設(shè)置：
<!-- 使用IE6 --> <meta http-equiv="X-UA-Compatible" content="IE=6" > -
瀏覽器內(nèi)核控制
很多瀏覽器是雙核的，比如
webkit內(nèi)核高速瀏覽葱跋，IE內(nèi)核兼容網(wǎng)頁和舊版網(wǎng)站持寄。除了瀏覽器的默認設(shè)置外，我們還可通過設(shè)置meta標簽的屬性來設(shè)置當前頁面的內(nèi)核渲染模式娱俺。<meta name="renderer" content="webkit|ie-comp|ie-stand"> -
站點適配
主要是移動端手機協(xié)議選擇稍味，主要用于PC-手機頁的對應(yīng)關(guān)系：
<!-- [wml|xhtml|html5] 根據(jù)手機頁的協(xié)議語言，選擇其中一種荠卷； url="url" 后者代表當前PC頁所對應(yīng)的手機頁URL模庐，兩者必須是一一對應(yīng)關(guān)系。 --> <meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url"> -
SEO（搜索引擎優(yōu)化）
根據(jù)搜索引擎爬取網(wǎng)頁內(nèi)容的特點油宜，我們可以對頁面信息進行定義掂碱，以便更好地讓搜索引擎識別到，以此來提高網(wǎng)站或頁面的識別度慎冤，增加搜索時的排名等疼燥。
-
頁面關(guān)鍵字：
keyword這是name屬性的屬性值，我們可以使用該屬性值對頁面進行關(guān)鍵字描述粪薛，以便于搜索引擎的準確抓取悴了。
-
頁面描述：
description同
keyword類似，該屬性值可對頁面進行總結(jié)性描述违寿。 搜索引擎的搜素方式相關(guān)設(shè)置：
robots
-
3、總結(jié)
meta標簽規(guī)定了文檔的屬性信息熟空，瀏覽器在處理該頁面時就會先讀取meta中的信息再進行處理藤巢，不同的瀏覽器或設(shè)備有不同的屬性鍵值對，根據(jù)具體使用查詢文檔或使用案例進行設(shè)置息罗。
參考地址
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
