meta標籤

時間 2019-12-09

標籤 meta 標籤欄目 HTML5 简体版

原文原文鏈接

<meta>標籤可提供頁面數據的元信息（meta information）。html

<meta>標籤位於文檔頭部，不包含內容，其屬性定義了與文檔關聯的鍵值對。html5

簡單來講，<meta>就是文檔信息描述的標籤。咱們從如下幾個方面來看看<meta>的實際用途。好比：git

搜索引擎優化（SEO）
定義頁面使用語言
自動刷新並指向新的頁面
實現網頁轉換時的動態效果
控制頁面緩衝
網頁定級評價
控制網頁顯示的窗口

1、meta標籤的屬性

一、`charset`屬性

該特性申明文檔的字符編碼但，該聲明能夠被任何一個元素的 lang 特性的值覆蓋。推薦使用utf-8國際通用編碼。如：github

<meta charset="utf-8">

二、`content`屬性

此屬性包含http-equiv 或name 屬性的值，具體取決於所使用的值。web

三、`http-equiv`屬性

這個枚舉屬性定義了能改變服務器和用戶引擎行爲的編譯。這個編譯值使用content 來定義，以下：chrome

content-language（過期）api

指定頁面的默認語言，推薦使用<html>設置全局lang屬性來代替。瀏覽器
content-security-policy：內容安全策略緩存

它容許頁面做者定義當前頁的內容策略。內容策略主要指定容許的服務器源和腳本端點，這有助於防止跨站點腳本攻擊。安全
content-type（過期）

設置文檔字符編碼，推薦使用meat的charset屬性代替。
default-style：默認樣式（首選樣式）

該屬性指定了文檔首選的默認樣式。content的值必須包含link元素的標題、href屬性連接到CSS樣式表或包含CSS樣式表的``元素的標題。
refresh：頁面刷新時間

若是content值爲正整數，則設置爲指定時間間隔刷新當前頁面，值爲正整數後跟字符串的形式則指定時間間隔內跳轉到指定頁面。以上時間單位爲秒。
```

<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（過期）

爲頁面設置cookie，請改用HTTP的Set-Cookie頭部。

四、`name`屬性

該屬性定義文檔級元數據的名稱。若是如下其中一個屬性設置了itemprop, http-equiv or charset ，就不能再設置這個屬性了。

name屬性可包含如下值（不完整）：

application-name

定義正運行在該網頁上的網絡應用名稱。
author

文檔的做者名稱，自由格式。
description

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

包含生成頁面的軟件的標示符。
keywords

包含與逗號分隔的頁面內容相關的單詞。
referrer（實驗中的屬性）

控制全部從該文檔發出的 HTTP 請求中HTTP Referer首部的內容。
creator

定義文檔建立者的名稱，與author相似。
googlebot

屬性robots的同義詞，該屬性只有googleBot(谷歌索引抓取工具)纔會使用。
publisher

自由格式定義文檔發佈者的名稱。

robots

定義搜索引擎爬蟲與頁面應具備的行爲。它是以逗號分隔的值列表，可選值：

Value(可選值)	Description（描述）	Used by（可支持使用的搜索引擎）
`index`	Allows the robot to index the page（容許機器人索引頁面）	All
`noindex`	Prevents the robot from indexing the page	All
`follow`	Allows the robot to follow the links on the page（容許機器人跟隨頁面上的連接）	All
`nofollow`	Prevents the robot from following the links on the page	All
`noodp`	Prevents 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
`noarchive`	Prevents the search engine from caching the content of the page（阻止搜索引擎緩存頁面內容）	Google,Yahoo,Bing
`nosnippet`	Prevents the display of any description of the page in the search engine results page（阻止在搜索引擎結果頁面中顯示頁面的任何描述）	Google
`noimageindex`	Prevents this page from appearing as the referring page of an indexed image	Google
`noydir`	Prevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page	Yahoo
`nocache`	Synonym of `noarchive`	Bing

viewport（供移動設備使用）

該屬性提供有關視口初始大小的提示，僅供移動設備使用。

可選值爲：

Value	可能值	描述
`width`	一個正整數或者字符串 device-width(以設備寬度做爲視口寬度)	以pixels（像素）爲單位，定義viewport（視口）的寬度。
`height`	一個正整數或者字符串 device-height(以設備高度做爲視口g高度)	以pixels（像素）爲單位，定義viewport（視口）的高度。
`initial-scale`	一個0.0 到10.0之間的正數	定義設備寬度（縱向模式下的設備寬度或橫向模式下的設備高度）與視口大小之間的縮放比率。
`maximum-scale`	一個0.0 到10.0之間的正數	定義縮放的最大值；它必須大於或等於minimum-scale的值，否則會致使不肯定的行爲發生。
`minimum-scale`	一個0.0 到10.0之間的正數	定義縮放的最小值；它必須小於或等於maximum-scale的值，否則會致使不肯定的行爲發生。
`user-scalable`	一個布爾值（yes 或者no）	若是設置爲no，用戶將不能放大或縮小網頁。默認值爲yes。

咱們常使用下面這個設置來適配移動端頁面：

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

2、meta標籤的實際使用

一、各大網站首頁的meta

咱們能夠從各大網站的頁面查看他們對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="淘寶網 - 亞洲較大的網上交易平臺，提供各種服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！">
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">

微博首頁

<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="隨時隨地發現新鮮事！微博帶你欣賞世界上每個精彩瞬間，瞭解每個幕後故事。分享你想表達的，讓全世界都能聽到你的心聲！" 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, &amp; Build Careers">
<meta name="twitter:description" property="og:description" itemprop="description" content="Stack Overflow | The World’s Largest Online Community for Developers">

二、meta一些的具體做用

瀏覽器兼容性設置
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
```
當指定的content值爲IE=edge,chrome=1時，優先使用 IE 最新版本和 Chrome。

假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，不然，將會使用客戶端IE最高的標準模式對頁面進行渲染。

還能這樣設置：
```

<meta http-equiv="X-UA-Compatible" content="IE=6" >
```
瀏覽器內核控制

不少瀏覽器是雙核的，好比webkit內核高速瀏覽，IE內核兼容網頁和舊版網站。除了瀏覽器的默認設置外，咱們還可經過設置meta標籤的屬性來設置當前頁面的內核渲染模式。
```
<meta name="renderer" content="webkit|ie-comp|ie-stand">
```

站點適配

主要是移動端手機協議選擇，主要用於PC-手機頁的對應關係：

<!-- [wml|xhtml|html5] 根據手機頁的協議語言，選擇其中一種；
   url="url" 後者表明當前PC頁所對應的手機頁URL，二者必須是一一對應關係。
-->
<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url">

SEO（搜索引擎優化）

根據搜索引擎爬取網頁內容的特色，咱們能夠對頁面信息進行定義，以便更好地讓搜索引擎識別到，以此來提升網站或頁面的識別度，增長搜索時的排名等。
- 頁面關鍵字：keyword
  
  這是name屬性的屬性值，咱們可使用該屬性值對頁面進行關鍵字描述，以便於搜索引擎的準確抓取。
- 頁面描述：description
  
  同keyword相似，該屬性值可對頁面進行總結性描述。
- 搜索引擎的搜素方式相關設置：robots

三、總結

meta標籤規定了文檔的屬性信息，瀏覽器在處理該頁面時就會先讀取meta中的信息再進行處理，不一樣的瀏覽器或設備有不一樣的屬性鍵值對，根據具體使用查詢文檔或使用案例進行設置。

參考地址

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

https://huanghui8030.github.io/html/meta-sydq.html

相關標籤/搜索