当前位置:首页 > 网页设计 > 细谈网页设计中的meta标签应用
Dec27th

细谈网页设计中的meta标签应用

diyidu 网页设计 5 人阅读了此文 我来说两句!

    <meta>是放置在<head></head>之间的标记,功用与变化等对,所以我就公式化地介绍吧——

    1.<meta name="Description" content="低一度,是一个专注于网页设计、博客运营、免费资源、电脑网络技术等的原创IT评论博客。" >
    网页描述,作用于搜索引擎的登录。
    2.<meta name="Keywords" content="网页设计,博客运营,免费资源,电脑网络" >
    网页关键字,作用于搜索引擎的登录。
    3.<meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
    4.<meta http-equiv="Pragma" content="no-cache">
    以上两行功能相同,都要求浏览器重新载入该页面,不要使用快取功能,当然可以修改Expire(过期)时间。
    5.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    6.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    这是设定http文件及其编码语系,简体中文网页使用charset=gb2312(注意,这也取决于程序的编码字符集类型,例如Z-Blog的编码字符集是utf-8,这儿就要改为charset=utf-8);繁体中文使用charset=big5,或者不设置编码也可以;纯英文网页建议使用iso-8859-1。
    7.<meta name="Generator" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
    8.<meta name="Generator" content="Microsoft FrontPage 3.0">
    这两个是表示该网页是由什么编辑器写的。
    9.<meta http-equiv="refresh" content="10; url=http://www.diyidu.cn/">
    这行<meta>比较实用,能在预定秒数内自动转到指定的网址。原代码中的10表示10秒。

    meta是用来在http文档中模拟http协议的响应头报文。meta标签放置于网页的<head>与</head>之间。meta标签的用处很多。meta的属性有两种:name和http-equiv。name属性主要用于描述网页,对应的是content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的就是description(站点在搜索引擎上的描述)和 keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

    name属性

    1.<meta name="Generator" contect="">
    用以说明生成该网页的编辑器类型(如Microsoft FrontPage 4.0等);
    2.<meta name="Keywords" contect="">
    向搜索引擎通报网页的关键词;
    3.<meta name="Description" contect="">
    告诉搜索引擎该网站的主要关注内容是什么;
    4.<meta name="Author" contect="你的姓名">
    告诉搜索引擎谁是这个站点的作者(管理员);
    5.<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">
    参数说明:设定为all,文件将被检索,且页面上的链接可以被查询;设定为none,文件将不可检索,且页面上的链接不可以被查询;设定为index,文件将被检索;设定为follow,页面上的链接可以被查询;设定为noindex,文件将不被检索,但页面上的链接可以被查询;设定为nofollow,文件将被检索,但页面上的链接不可以被查询。这是写给搜索引擎看的。

    http-equiv属性

    1.<meta http-equiv="Content-Type" contect="text/html"; charset=gb_2312-80">
    2.<meta http-equiv="Content-Language" contect="zh-CN">
    这两行是用以说明页面制作所使用的文字及语言类型;英文是ISO-8859-1字符集,另外还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等;
    3.<meta http-equiv="Refresh" contect="n; url=http://yourlink">
    这是定时让网页在指定时间(n秒内),跳转到页面http://yourlink;
    4.<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">
    这是用于设定网页的到期时间,一旦过期则必须重新调用(注意:必须使用GMT时间格式);
    5.<meta http-equiv="Pragma" contect="no-cache">
    这是用于设定禁止浏览器从本地机子的缓存中调阅页面内容,设定后一旦离开网页就无法从cache中再次调出;
    6.<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">
    这是cookie设定,如果网页已过期,存盘的cookie将被删除(注意:必须使用GMT时间格式);
    7.<meta http-equiv="Pics-label" contect="">
    这是网页等级评定,在IE的internet选项中有项内容设置,可防止浏览一些受限网站,而网站的限制级别就是通过meta属性来设置的;
    8.<meta http-equiv="windows-Target" contect="_top">
    强制页面在当前窗口中以独立页面的方式显示,这可以防止网页被别人当做一个frame页调用;
    9.<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion=50)">
    10.<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">
    这两行是设定进入和离开页面时的特效,这个功能即FrontPage中的“格式/网页过渡”(注意:所加页面不能是frame页面)。

    meta标签是用来描述http网页文档的属性,如作者、日期和时间、网页描述、关键词、页面刷新等。

    在有关搜索引擎注册、搜索引擎优化排名等网络营销方法内容中,通常都要谈论meta标签的作用,我们甚至可以说,meta标签的内容设计对于搜索引擎营销来说是至关重要的一个因素,尤其是其中的“description”(网页描述)和“Keywords”(关键词)两个属性更为重要。尽管现在的搜索引擎,检索信息的决定与搜索结果的排名很少依赖于meta标签中的内容,但meta标签的内容设计依然是很重要的。

    从http代码实例中可以看到,一段代码中有3个含有meta的地方,并且meta并不是独立存在的,而是要在后面连接其他的属性,如 description、Keywords、http-equiv等。下面简单介绍一些搜索引擎营销中常见的meta标签的组成及其作用。 
    
    meta标签可分为两大部分:http-equiv和name变量

    1.关于meta标签中的http-equiv

    http代码实例中有一项内容是:<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    其作用是指定了当前文档所使用的字符编码为gb2312,也就是中文简体字符。根据这一行代码,浏览器就可以识别出这个网页应该用中文简体字符来显示。类似地,如果 将 “gb2312”替换为“big5”,就是我们熟知的中文繁体字符了。

    http-equiv用于向浏览器提供一些说明信息,从而可以根据这些说明做出反应。http-equiv其实并不仅仅只有说明网页的字符编码这一个作用,常用的http-equiv类型还包括:网页到期时间、默认的脚本语言、默认的风格页语言、网页自动刷新时间等。

    2.关于meta标签中的"description"

    http代码实例中有关"description"中的代码为:<meta name="description" content="低一度,是一个专注于网页设计、博客运营、免费资源、电脑网络技术等的原创IT评论博客。">

    "description"中的content="网页描述",是对一个网页概况的介绍,这些信息可能会出现在搜索结果中,因此需要根据网页的实际情况来设计,尽量避免与网页内容不相关的“描述”。另外,最好对每个网页添加相应的描述(至少同一个类别的网页有相应的描述),而不是整个网站都采用同样的描述内容,因为一个网站有多个网页,每个网页的内容肯定是不同的,如果采用同样的description,显然会有一些网页内容会与描述脱钩,这样不仅不利于搜索引擎对网页的排名,也不利于用户根据搜索结果中的信息来判断是否点击进入网站进行进一步的检索。

    3.关于meta标签中的"Keywords"

    与meta标签中的"description"类似,"Keywords"也是用来描述一个网页的属性,只不过要列出的内容是“关键词”,而不是网页描述。这就意味着,要根据网页的主题和内容选择合适的关键词。在选择关键词时,除了要考虑与网页核心内容相关以外,还应该是用户易于通过搜索引擎检索的,过于生僻的词汇不太适合做meta标签中的关键词(当然,太热门的关键词也不利于排名)。关于meta标签中关键词设计,要注意不要堆砌过多,罗列大量关键词对于搜索引擎检索没有太大的意义,对于一些热门的领域(即同类网站数量较多的),甚至可能起到副作用。

本文出自:低一度,地址:http://www.diyidu.cn/post/meta_writing.html,转载须注明!

to "细谈网页设计中的meta标签应用" 引用该日志!

  1. 周哥
    #1 周哥 回复该留言 2009-12-27 14:56:57

    ZB的话没有那么多讲究啦,其实安装两个插件就可以搞定了,不一定非要自己去写。
    TitleSEO/NOBIRDArticleSEO,把这两个安装好就完全OK了。

    diyidu 于 2009-12-27 15:36:04 回复
    这两个都有点小问题,还是自己写可靠。

  2. licream
    #2 licream 回复该留言 2009-12-27 22:33:02

    - -,支持下。

    diyidu 于 2009-12-27 22:39:16 回复
    谢谢支持。

  3. liuzm
    #3 liuzm 回复该留言 2009-12-28 9:22:10

    呵呵!博主真是有心了!HTML高手,学习了!哈哈!

    diyidu 于 2009-12-28 10:36:53 回复
    高手不敢当啊,没你的东西高深。

  4. evlos
    #4 evlos 回复该留言 2009-12-28 17:09:42

    好多呢,坐下来慢慢看,我查漏补缺正好需要这个~ O(∩_∩)O哈!

    diyidu 于 2009-12-29 0:45:42 回复
    哦,慢慢看吧,希望对你有帮助。

  5. Zenoven
    #5 Zenoven 回复该留言 2009-12-29 22:09:08

    我这个还真的是不清楚。。。挺有用的东西。

    diyidu 于 2009-12-29 22:59:55 回复
    这个meta是做站必须懂的。

此楼已盖到第5层了,目前尚未封顶!