meta标签

2019-04-28 本文已影响0人一颗脑袋

<meta>标签可提供页面数据的元信息（meta information）。

<meta>标签位于文档头部，不包含内容，其属性定义了与文档关联的键值对。

简单来说，<meta>就是文档信息描述的标签。我们从以下几个方面来看看<meta>的实际用途。比如：

搜索引擎优化（SEO）
定义页面使用语言
自动刷新并指向新的页面
实现网页转换时的动态效果
控制页面缓冲
网页定级评价
控制网页显示的窗口

一、meta标签的属性

1、`charset`属性

该特性申明文档的字符编码但，该声明可以被任何一个元素的 lang 特性的值覆盖。推荐使用utf-8国际通用编码。如：

<meta charset="utf-8">

2、`content`属性

此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

3、`http-equiv`属性

这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义，如下：

content-language（过时）

指定页面的默认语言，推荐使用<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头部。

4、`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">

二、meta标签的实际使用

1、各大网站首页的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">

2、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

3、总结

meta标签规定了文档的属性信息，浏览器在处理该页面时就会先读取meta中的信息再进行处理，不同的浏览器或设备有不同的属性键值对，根据具体使用查询文档或使用案例进行设置。

参考地址

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

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

meta标签

一、meta标签的属性

1、`charset`属性

2、`content`属性

3、`http-equiv`属性

4、`name`属性

二、meta标签的实际使用

1、各大网站首页的meta

2、meta一些的具体作用

3、总结

参考地址

猜你喜欢

热点阅读

meta标签

一、meta标签的属性

1、charset属性

2、content属性

3、http-equiv属性

4、name属性

二、meta标签的实际使用

1、各大网站首页的meta

2、meta一些的具体作用

3、总结

参考地址

猜你喜欢

热点阅读

1、`charset`属性

2、`content`属性

3、`http-equiv`属性

4、`name`属性