meta标签使用方法总结

浏览数：27 / 时间：2015年06月09日

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

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

　　meta标签可以分为两大部分：

  • 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”

代码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中测试出效果了。

 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。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class log com 代码 使用 src http html des class log com 代码 使用 src http html

相关文章

随机文章

您可能还喜欢

您可能还喜欢