meta标签使用方法总结

时间 2019-11-13

原文原文链接

　　meta标签是用来描述一个HTML网页文档的属性，好比该网页的做者，日期，网页的关键字，刷新，网页等级设定等等，是文档中的最基本的元信息，本文是对meta标签的学习总结，内容大多来自网上各个地方，非原创。html

　　一个好的meta标签能够提升你的网站被搜索到的可能性，在搜索引擎优化方面须要好好利用meta标签的相关知识。web

　　meta标签能够分为两大部分：chrome

http-equiv： http标题信息
name：页面描述信息

　　http-equiv 相似于http的头部协议，做用是回应给浏览器一些有用的信息来帮助正确精确的显示网页内容。经常使用的http-equiv 类型有：Content-Type 和 Content-Language(显示字符集的设定)。数据库

如下以示例代码介绍http-equiv的详细内容：

代码1：编程

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

　　这段代码指定了HTML页面使用的字符编码为gb2312，即国标汉字码，不一样的语言对应不一样的charset，日文对应的字符集是："iso-2022-jp", 韩文对应的字符集: “ks_c_5601”windows

代码2：浏览器

<meta http-equiv="Refresh" content="5; url=http://www.cnblogs.com" />

　　这段代码让网页在指定的5秒内，跳转到所指定的页面，好比博客园首页，或者网页的自动刷新。缓存

代码3：服务器

<meta http-equiv="Expires" content="Mon,1,May 2015 00:00:00 GMT" />

　　这段代码能够用于设定网页的到期时间，一旦过时必须到服务器上从新调用（GMT时间格式）。ide

代码4：

<meta http-equiv="Pragma" content="no-cache" />

　　这段代码用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就没法从Cache中再调出。

代码5：

<meta http-equiv="Pics-label" content="" />

　　这段代码用于网页等级的评定，在IE的internet选项中有一项内容设置能够防止浏览一些受限制的网站，而网站的限制等级就是经过meta属性的设置。

　代码6：

<meta http-equiv="windows-Target" content="_top" />

　　这段代码能够强制页面在当前窗口中以独立页面显示，防止本身的网页被别人当成一个frame调用。Content选项：_blank、_top、_self、_parent

代码7：

<Meta http-equiv="Page-Enter" Content="revealTrans(Duration=0.5,tansition=10" />

 <Meta http-equiv="Page-Exit" Content="revealTrans(Duration=0.5,transition=12" />

　　Page-Enter、Page-Exit是页面被载入和调出时的一些特效。相应的还有：Site-Exit和Site-Enter离开和进入网站。content表示的是网页过渡的效果设置，本例中的RevealTrans是动态滤镜的一种，能够用于进入和退出的效果，Duration表示滤镜特效的持续时间(单位：s), Transition:表示滤镜的类型，取值为0到23。

　　注意：这些特效我本身作了一些测试，在Chrome, FF,下特效都显示不出来，原文（HTML页面过渡效果大全）中测试环境是IE5.5之上，不过我利用IE tester只在IE8中测试出效果了。

name，常见的有Keyword，Description，Robots等，下面逐一介绍。

Description:　

<meta name="description" content="这是个人一篇博客" />

　　description中的content=" ", 是对网页概况的介绍，这些信息可能会出如今搜索结果中，所以要尽可能的避免和网页内容不相关的描述。

网页描述为天然语言而不是罗列不少关键词；
描述内容为但愿在搜索引擎检索结果中展现的摘要信息。
必须和网页的标题内容，网页主题内容有高度的相关性。
不要超过255个字符，搜索引擎通常都会索引Description中的前255个字符，

　　有一个小技巧：若是你使用的网页编码是UTF-8，那么在Description中的标点符号最好都使用英文，例如英文的逗号、句号等。若是是中文的话，那么就使用中文的标点符号便可。

在Google网站管理员工具中，有个很是有用的工具——网页内容分析。它能够对你网站中全部的Description作出一个准确的判断和建议，例如哪些Description是重复的，哪些Description过短或者太长，哪些Description是和网页内容无关的等等问题。（Google网站管理员工具：http://www.google.com/webmasters/tools?hl=zh_CN）

Keywords:

<meta name="keywords" content="博客,meta标签" />

　　Keywords和description相似，也是用来描述一个网页的属性的，只不过列出的是关键词，而不是网页的摘要。各个关键词之间用逗号(英文逗号)隔开。

要根据网页的主题和内容来选择适合的关键词，越是核心的关键词越是放到前面
选择关键词既要考虑网页的核心内容相关，还要用户容易经过搜索引擎检索，尽可能避免使用生僻的词来作关键字。
不要堆砌过多的关键词，罗列大量关键词对于搜索引擎没有太大的意义，对于N多同类型的网站来讲可能还会有反作用。

来看一下博客园的description和Keywords：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>博客园 - 开发者的网上家园</title>
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区"/>
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自建立以来，博客园一直致力并专一于为开发者打造一个纯净的技术交流社区，推进并帮助开发者经过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />

以上来自博客园首页的网页源代码中<meta>部分，参考一下。

Robots:

<meta name="Robots" content="All" />

　　不少搜索引擎都是经过放出robot/spider搜索网站，robot/spider自动在www上搜索，当发现新的网站后，这些robot/spider会检索页面中的keywords和descript，而后加入到本身的数据库中。而Robots用来告诉机器人哪些页面须要索引，哪些页面不须要，content的参数有：all, none, index, noindex, follow, nofollow 。默认状况下是all。

All:文件将被检索，并且页面的连接能够被查询。
none: 页面不被检索，页面的连接不能够被查询。
index: 文件将被检索，让robot/spider登陆。
follow: 页面的连接能够被查询。
noindex:阻止页面被列入索引，页面的连接能够被查询（不让robot/spider登陆）。
nofollow: 阻止对页面中任何连接进行索引（注，这不一样于超级连接上的nofollow属性，那个属性只是组织索引单独的连接。

　　META信息是对页面自己给搜索引擎的一个说明。而有些时候，咱们可能须要拒绝搜索引擎来访问咱们网站的某个文件夹（例如后台文件夹），或者是要屏蔽一些搜索引擎的索引，咱们就能够采起使用robots.txt文件来限制一些权限。具体本文再也不详述，能够本身搜索相关内容。

Author:

<meta name="Author" content="guihailiuli" />

这段代码能够说明网页的做者，content的内容能够是制做者或联系信息。

Copyright:

<meta name="Coptright" content="Created By guihailiuli" />

说明页面的版权。

Revisit-after:

<meta name="revisit-after" content="7 days" />

　　设置robot/spiser的重访时间，通常大型网站，蜘蛛爬行频率至关频繁，致使服务器重压。所以作这样的限制是让蜘蛛在限定日期内重访，例如7 days就是七天访问一次

Distribubtion:

<meta name="Distribution" content="Global" />

　　这段代码是指网站都在哪些地区范围出现，通常设置为Global即为全球范围。

补充：

　　在百度，知乎的首页的meta标签中看到有下面这段代码：

<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">

HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么做用？

　　X-UA-Compatible是自从IE8新添加一个位置，对IE8一下的浏览器是不识别的，经过在meta中设置X-UA-Compatible的值，能够指定网页的兼容性模式设置。　

　　网页中指定的模式优先于服务器经过HTTP Header指定的模式。

经常使用的例子：

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代码告诉IE浏览器，不管是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代码告诉IE浏览器，IE8/9及之后的版本都会以最高版本IE来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则能够激活Chrome Frame.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

　　Edge告诉IE以最高的模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级别标准模式渲染，避免版本升级形成影响，也就是说：什么版本的IE就用什么版本的标准模式渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

使用这段代码强制IE使用Chrome Frame 渲染。有关Chrome Frame能够到百科上查看：Google Chrome Frame

其余注意：

“IE=Edge,chrome=1” , 的弊端是代码没法经过W3C的验证，不过若是只有这一个"错误"基本上也不会有什么不良的影响。
根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其余 meta 元素之外的全部其余元素以前。若是不是的话，它不起做用

有关上面那段代码更详细的参见这里：http://www.tuicool.com/articles/ra6Fjuj。