meta 标签

100 阅读 0 评论 66 点赞

我是靠谱客的博主重要棉花糖，最近开发中收集的这篇文章主要介绍meta 标签，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.meta的作用

mate标签（metadata元信息，描述信息的信息）都是以“名 / 值 ”对的形式实现，不会在页面显示，用于提供页面的相关信息，向浏览器提供渲染信息，搜索引擎优化（SEO），mate标签规定页面的描述，关键字，最后的修改日期，作者及其他信息等。

2.meta的属性构成

meta有可选属性（http-equiv="参数"和name=“参数”, scheme可选属性应用率非常低这里不再赘述）

必选属性（content=“参数描述”），

刚才说到，mate标签是以名值对的形式实现的，而可选属性可以理解为名属性，必选属性可以理解为值属性。必选属性不是必须选择，而是伴随着可选属性的使用必须选择，并不能单独出现。比如：

//这里没有可选属性，所以也不会有必选属性

//必选属性content用来描述可选属性的说明

3.常用属性的参数分析

3.1 http-equiv 参数（HTTP标题信息，模拟 HTTP 响应头）

3.11 Content-Type(显示字符集的设定) ：用来设定网页字符集，浏览器会据此调用相应的字符集

//<meta charset="UTF-8" />是下述的简写形式，这是HTML5设定的样式，推荐这种写法

3.12 Refresh（刷新）：一定的时间后，页面重定向（跳转）或刷新

//页面加载5秒后跳转到百度

//页面加载5秒后刷新当前页面

3.13 Cache-Control：一般是用来指定请求和响应遵循的缓存机制，不过Cache-Control属性有两个content参数是用来防止百度转码的：content="no-transform" 和 content="no-siteapp"，（互联网有web和wap两类网页，web远多于wap，为确保wap可用性，必须把web网页转换为wap网页，使其能在移动终端浏览。百度转码把web网页去除了许多对wap页面不能显示的东西。）（也可能会在页面添加广告）

3.14 X-UA-Compatible：这个是IE8的专用mate标签属性（为什么IE8专用？因为在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用某种IE版本方式渲染），IE8以外的浏览器是不识别的。

//使用Windows Internet Explorer 7 的标准渲染模式

//使用Windows Internet Explorer 9 的标准渲染模式

//让IE8以当前计算机最高级别的IE版本渲染

//如果IE有安装Google Chrome Frame（谷歌内嵌浏览器框架GCF，谷歌单独为IE开发的浏览器插件），那么就使用chrome内核来渲染，如果没有就和<meta http-equiv="X-UA-Compatible" content="IE=edge" />一样

3.15 Expires（期限）：网页缓存的过期时间，过期后浏览器会删除本地缓存，当再次访问页面时，必须重新向服务器发送请求。

//缓存到期在未来的某个时间，这里必须使用GMT（GreenwichMeanTime）时间格式。（格林尼治标准时间，也是世界标准时间，是指位于英国伦敦郊区的皇家格林尼治天文台的标准时间，因为本初子午线被定义在通过那里的经线）

//content也可以设置为秒数，比如在页面加载60秒后缓存过期

//如果content设置为过去的时间，或者content="-1"，则表示：缓存立即过期

3.16 Pragma（cache模式）：禁止浏览器从本地计算机的缓存中访问页面内容。(关于缓存控制，最好在服务器端配置)

// 控制缓存的一种机制（兼容http 1.0）

// 和“<meta http-equiv="Cache-control" content="no-cache">”有所不同，Cache-Control: no-cache是http 1.1提供的，只能应用于http 1.1，Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。Cache-Control: no-store才表示不会缓存页面。

3.17 Window-target（显示窗口的设定）：强制窗口以独立页面显示

//用来防止别人在框架里调用自己的页面

content="_blank" 在新窗口显示

content="_top" 当前整个窗口显示

content="_parent" 父容器显示，比如框架嵌套

content="_self" 当前容器显示，比如框架嵌套

＜meta http-equiv="Window-target" content="_top"＞

3.18 Set-Cookie（cookie设定）：如果网页过期，则删除本地cookies信息（GMT时间格式）

//在这之前，我一直认为cookie就是浏览器缓存。实际上cookie与域名绑定，用于验证用户身份的信息，而常说的浏览器缓存就是html，css，js，图片等资源文件。

//"网页过期"没有找到确切答案，大致意思是页面长时间没有连接服务器，导致页面信息失效，据说和Session机制有关，希望技术前辈能给出一些指教。

3.2 name 参数（页面描述信息）

3.21 Keywords（关键字）：

//向搜索引擎提供页面关键字，提高搜索排名。content可以有多个关键字，用逗号分隔，keywords一般不超过3个，每个关键词不宜过长。

//不过keywords关键字搜索引擎基本不支持了，因为有黑帽会滥用这个属性。

3.22 description (网站内容描述)

//description，和上面的keywords一样，是对网页内容的简要描述,不过，keywords是由几个词语组成的，而description则是完整的一句话。description一般不超过150个字符.

//和Keywords一样，description对搜索引擎的权重越来越小，而title标签的作用愈加突出。

3.23 viewport （移动端窗口）

//让网页适配手机窗口，自适应页面离不开这个属性

1. width：控制 viewport 的大小，可以给它指定一个值如：600，width=device-width为设备的宽度

2. initial-scale：页面的初始缩放值

3.minimum-scale：允许用户的最小缩放值

4.maximum-scale：允许用户的最大缩放值

5.user-scalable：是否允许用户进行缩放，no 不允许，yes允许

3.24 renderer(双核浏览器渲染方式)

//renderer适用于双核浏览器，指定双核浏览器优先以何种方式渲染页面，content取值区分大小写，IE兼容模式是：IE6，7，8。IE标准模式是IE9及以上

3.25 author（作者）

//告诉搜索引擎网页的作者或制作组，制作公司等，可以是名字，域名或是E-mail等。author能提供网页版权信息，在国外网站比较常用，因为国外比较重视版权申明

3.26 copyright (版权)

3.27 robots（定义搜索引擎爬虫的索引方式）

//Robots用来告诉搜索引擎页面是否可索引。robots是指所有的搜索引擎，也可以特指某个搜索引擎，如：Googlebot，Baiduspide等。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

index : 可以抓取当前页面

noindex : 不可抓取当前页面

follow : 可从当前页面的链接，继续访问其他页面

nofollow: 不可从当前页面的链接访问其他页面

all : 可抓取，可继续访问

none : 不可抓取，不可继续访问

可以得到4种组合：

不可把两个对立的词写到一起，例如

对立的词也不可同时出现

3.28 revisit-after (搜索引擎爬虫重访时间)

//如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。

这篇博客是在零零碎碎的时间中完成的，参考了大量资料。很多知识就摆在那里，告诉你是这样，不过我往往喜欢钻牛角尖，想探究为什么是这样，所以做了一些自己的理解与补充。至于为什么这样的为什么就不去探究了，要不然就没完没了啊。哈哈，毕竟知识与知识之间环环相扣，层层相连，无穷无尽。有不对不完善的地方还请各位多多批评指正，感谢！