前端“meta”标签详细整理_IT百科

其实这些东西大概在一年前就搞出来了，看了很多有关的文章，现在分享出来，如果对你有些帮助，我还是挺开心的。 因为里面有很多也是我没用过的，实在是用不到，如果觉得有问题，就留言或者微信、邮箱联系我，我们共同探讨。

http-equiv ，顾名思义， 相当于http的文件头作用 ，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性 语法格式 是： <meta http-equiv="参数" content="参数变量值">；

其中http-equiv属性主要有以下几种参数：

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法： <meta http-equiv="expires" content="Fri, 12 Jan 2016 18:18:18 GMT">

注意：必须使用GMT的时间格式。

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：<meta http-equiv="Pragma" content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

content内的数字代表时间（秒），即多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）

说明：自动刷新并指向新页面。

用法： <meta http-equiv="refresh" content="2URL=http://www.root.net">(注意后面的引号，分隔在秒数的后面和网址的前面)

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

说明：如果网页过期，那么存盘的cookie将被删除。

用法： <meta http-equiv="Set-Cookie" content="cookievalue=xxxexpires=Friday, 12-Jan-2001 18:18:18 GMT； path=/">

注意：必须使用GMT的时间格式。

说明：强制页面在当前窗口以独立页面显示。

用法： <meta http-equiv="Window-target" content="_top">

注意：用来防止别人在框架里调用自己的页面。

说明：设定页面使用的字符集。

用法： <meta http-equiv="content-Type" content="text/htmlcharset=gb2312">

http-equiv="Content-Type" 表示描述文档类型

content="text/HTML 文档类型，这里为html,如果JS就是text/javascript，

charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8

现在有更为简洁的<meta charset=“utf-8” />

用法： <meta http-equiv="Content-Language" content="zh-cn" />

如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。

http-equiv="X-UA-Compatible"，这个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

name属性来表述 页面文档的元信息 ，通过http-equiv属性设置http请求指令，通过charset设置页面的字符编码。

每个网页应具有描述该网页内容的一组唯一的关键字

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

robots是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow

能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。

大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px

只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent

国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染<meta name="renderer" content="webkit|ie-comp|ie-stand">

content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。

这里特别需要说明一下，有一次一个朋友问360的首页或者天猫之类的大网站，发现不只是优先使用webkit内核，而是只有这一种选择，根本没有兼容模式的选择，为什么呢？

找了好长时间才找到一个靠谱点的答案：如果想要实现这么一个功能，需要跟他们合作，具体是怎么一种方式如果有需要可以跟联系他们的客服吧，或者是你知道这究竟是怎么一回事，也可以跟我说一下。

以淘宝为例

淘宝xTao为外部合作伙伴提供的一套跟踪引导成交效果数据的解决方案

（1）、网页描述Description

网页的描述要根据网站的实际内容填写，很多站长会随意填写网站的描述，或者在描述中大量堆砌关键词，这些都是对SEO不利的行为，例如一个以SEO知识和资讯为主的站点，它的描述Meta标签可以这样写：

这样的描述不仅概括了整个网站的内容，也突出了软件这一关键词，而类似“某某网站是最好的门户”、“某某网站为您服务”这样的描述，就由于忽略了网站的主要关键词，而让搜索引擎摸不着头脑。

（2）、网页关键词Keywords

与META标签中的"description"类似，"Keywords"也是用来描述一个网页的属性，只不过要列出的内容是“关键词”，而不是网页的介绍，这就意味着，要根据网页的主题和内容选择合适的关键词。

对此，夫唯学院建议各位SEO人员在选择关键词时，除了要考虑与网页核心内容相关之外，还应该是用户易于通过搜索引擎检索的，过于生僻的词汇不太适合做META标签中的关键词。

由于网页关键词由于一直被大量地用于优化，目前它对于搜索引擎的重要性已经不如以前了，但是完善网页的关键词标签仍然可以起到一定的作用。

同样以一个SEO知识网站为例，它的关键词可以这样写：

往往我们会采用大而全的关键词来描述，诸如“SEO”“SEO技巧”等非常热门的关键词，但是对于大多数站点来说，使用类似的关键词对提升排名不会有任何效果，因为这类关键词的搜索量很大，而只有权重非常高的门户网站才有可能获得这类词较好的排名。

常用的HTTP-EQUIV类型有：

Set-Cookie(cookie设定)

说明：如果网页过期，那么存盘的cookie将被删除。

用法：<METAHTTP-EQUIV="Set-Cookie"CONTENT="cookievalue=xxxexpires=Wednesday,21-Oct-9816:14:21GMTpath=/">

注意：必须使用GMT的时间格式。

Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

用法：<METAHTTP-EQUIV="Window-target"CONTENT="_top">

注意：用来防止别人在框架里调用你的页面。

Content-Type(显示字符集的设定)

说明：设定页面使用的字符集。(我们在前面字体设计中已经介绍过它的作用)

用法：<metahttp-equiv="Content-Type"content="text/htmlcharset=gb2312">

expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

用法：<METAHTTP-EQUIV="expires"CONTENT="Wed,26Feb199708:21:57GMT">

注意：必须使用GMT的时间格式。

Pragma(cach模式)

说明：禁止浏览器从本地机的缓存中调阅页面内容。

用法：<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">

注意：这样设定，访问者将无法脱机浏览。

Refresh(刷新)

说明：需要定时让网页自动链接到其它网页的话，就用这句了。

用法：<METAHTTP-EQUIV="Refresh"CONTENT="5URL=网址">

注意：其中的5是指停留5秒钟后自动刷新到URL网址。

meat标签的NAME变量语法格式是：<METANAME="xxx"CONTENT="xxxxxxxxxxxxxxxxxx">

Keywords(关键字)

说明：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：<METANAME="keywords"CONTENT="xxxx">

description(简介)

说明：description用来告诉搜索引擎你的网站主要内容。

举例：<METANAME="description"CONTENT="xxxxxxx">

robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：<METANAME="robots"CONTENT="none">

author(作者)

说明：标注网页的作者

举例：<METAname="AUTHOR"content="spider医生">

以

上是meta标签的一些基本用法，其中最重要的就是:Keywords和descriptionn的设定。为什么呢？道理很简单，这两个语句可以让搜索引

www上搜索，当发现新的网站时，便检索页面中的keywords和decription，并将其加入到自己的数据库，然后再根据关键词的密度将网站排

序。也就是说：

不要用形容词，副词。例如最好的，最大的等。

不要用笼统的词汇，要尽量精确。例如不用"摩托罗拉手机",改用"V998"等寻找合适的关键词的一个技巧是：到lycos,Alta,infoseek等搜索引擎，搜索与你内容相仿的网站，查看pai名前十位的网站的meta关键字，copy下来用到自己的站点上.

如果你的页面中根本没有Keywords和description的meta标签，那么机器人是无法将你的站点加入数据库，网友也就不可能搜索到你的站点。

如

果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非常小的。所以,我们必须记住添加keywords和

description的meta标签，并尽可能写好关键字和简介。写keywords的禁忌是：不要用常见词汇。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/bake/11575171.html

前端“meta”标签详细整理

发表评论

评论列表（0条）