岚海网络信息技术有限公司官方博客

精彩文集

精彩热评

heading(h1,h2,h3…) 标签的用法

  • 设计师 jason
  • 2011-08-24
  • 0

学会合理的使用heading标签应该算做是使用符合w3c的义语Xhtml进行页面构架的第一步。今天正好就朋友问起我h1标签的用法,那么我来说说我的习惯。

首先我要知道,什么是heading标签?

heading是h1,h2,h3,h4,h5,h6 这六个Xhtml标签的统称,既标题的意思。六个标签的权重由大到小,既h1为大标题,h6为最小的标题。

写法为(h1)内容(/h1);heading标签均为块级元素(block),其嵌套规则XHTML标签的嵌套规则一文中有提到过。 

为什么要使用heading标签?

珍爱生命 远离“DIV”+ CSS 一文中我们说到,所谓div+css,其实只是我们通俗的叫法,正确的叫法应该是Xhtml+css。

我们所使用到的标签,都应该是有含义的:比如ul是无序列表,适合做新闻列表;ol是有序列表,适合做排行版;del是删除线,适合用来放b2c的“原价”;address里放的是地址;blockquote大段引用…其它义语标签的用法,在这里暂不一一列举,等等这些,为得是能让搜索引擎知道,这些内容到底是什么意思,也算是比较浅显的所谓人机交互。

义语标签对于SEO的重要性大家都很明白,那么heading标签,顾名思义,标题!它们的重要性大家可想而知。

heading标签是用来诠释整个网站、频道、栏目甚至文章段落的标签。

关于heading标签的用法,网上众说纷纭,我参考了官方的说明及结合了许多网站的构架、优化经验,总结了一套自己认为合理的使用方法,仅供参考。

以下方法适用于行业门户网站、购物商城、电子商务网站企业网站等类型的站点。如像新浪、网易那样的大站,可以把其诸如旅游频道、科技频道等栏目理解为一个独立网站。

h1,h2,h3 的用法:

h1 — 大标题,放置于首页顶部区域,通常即导航以上的部分,全站通用,用来诠释整个网站的内容,应包含网站主关键字,但切忌不要进行关键字堆砌。最好是在网页源代码的body标签一开始的第一个容器中第一行出现。且保证一个页面中只出现一次。

h2 — 副标题,每个页面出现的次数以1-3次为宜。

首页:同h1,放置于主头部区域,于h1的下方,全站调用,同样用于概括整站的内容。或者在头部通用区域的下方,首页内容的开头或者中间部分使用一次,用于诠释首页的内容。

子频道页:无论顶部区域是否出现过一次h2,可结合实际情况在头部通用区域的下方,页面内容的开头部分使用一次,用于诠释频道页面的内容。

(以上2种方法可以任选其一,也可以同时并存)

文章/产品内页:文章的标题使用h2标签。

按以上方法,h2标签最多会被使用到3次,但是请少使用1次。据以往经验来看,文章/产品内页使用h2标签效果显著!

图例:

云南电玩网

设计师在进行页面设计的时候就应该实现构思好heading标签的放置位置。这是云南电玩网的顶部设计。其中首页body中代码的一开始就出现了h1标签,内容为“云南电玩网,昆明电玩在线购物商城”。紧接着logo用的是h2标签,插图的alt属性里写着“云南电玩网-昆明最大的掌机,电视游戏机网购平台”。

主意两个标签措词不同,但均包含了网站的主要关键字。

这里值得说明的是,有的网站的设计感会很强,很难给heading标签预留出前合适的位置,那么这里可以采用的是,把页面中出现的第一个img放在h1里,比如logo,在其alt属性中写入网站名称或关键字。那么对于SEO的效果来说,经尝试是有作用的,至于效果,个人认为肯定会比把heading标签里的文字直接出现在页面上要略差一点。

西华通讯

西华通讯手机在线销售b2c,用的是h1,h2在顶部全站通用。

云南货架网

云南货架网,企业网站。顶部全站调用一个h1,首页使用独立的h2,每个频道页面用自己独立的h2。

h3— 小标题,个人爱用于栏目的名称,如图:

 

迪庆旅游投资集团

香格里拉旅投集团为例,首页及内页的栏目标题均使用h3标签。至于h3的使用次数,没有明确的规定,大家用到该用的地方就行。刚才说道h2适用于文章内页的文章标题上,那么h3我通常也用到文章的分段标题上,如本文一开始的“首先我要知道,什么是heading标签?”等。

以上主要讲述了h1-h3这3个heading标签的用法,至于h4-h6,并没有前3个那么常用,大家只要记得它们的权重为降序,举一反三即可。

heading标签的用法很灵活,jason在这里也只是抛砖引玉,后续的文章中我们会逐一分享到title的调用方法及strong与heading的区别等一些列SEO知识,敬请期待。

转载请注明出处:岚海网络官方博客http://www.lhave.com/blog/

全部 0 条评论