meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原创。
一个好的meta标签可以提高你的网站被搜索到的可能性,在搜索引擎优化方面需要好好利用meta标签的相关知识。
meta标签可以分为两大部分:
http-equiv 类似于http的头部协议,作用是回应给浏览器一些有用的信息来帮助正确精确的显示网页内容。常用的http-equiv 类型有:Content-Type 和 Content-Language(显示字符集的设定)。
代码1:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
这段代码指定了HTML页面使用的字符编码为gb2312,即国标汉字码,不同的语言对应不同的charset,日文对应的字符集是:"iso-2022-jp", 韩文对应的字符集:“ks_c_5601”
代码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时间格式)。
代码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中测试出效果了。
Description:
<meta name="description" content="这是我的一篇博客" />
description中的content=" ", 是对网页概况的介绍,这些信息可能会出现在搜索结果中,因此要尽量的避免和网页内容不相关的描述。
有一个小技巧:如果你使用的网页编码是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类似,也是用来描述一个网页的属性的,只不过列出的是关键词,而不是网页的摘要。各个关键词之间用逗号(英文逗号)隔开。
来看一下博客园的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。
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
其他注意:
有关上面那段代码更详细的参见这里:http://www.tuicool.com/articles/ra6Fjuj。
新闻热点
疑难解答