H*标签在页面中的巧妙应用

H*标签经常出现网站、博客的页面中，一般使用 h1,h2 来定义标题，查阅了相关的文章，但并没有介绍具体该怎么使用。于是便分析了一些具有代表性的blog，看看他们是怎样定义文章标题的。

Official Google Blog 使用 h3 定义的文章标题，h2 定义的侧边栏目标题和文章时间，没有用到 h1；Google 黑板报只使用了 h3 来定义文章标题和侧边栏目标题，没有使用 h1,h2；而 Official Google Reader Blog 的定义方式我比较喜欢，使用 h1 定义网站标题，h2 来定义文章标题，h3 来定义侧边栏目标题。

知名网页设计师 “Jeffrey Zeldman” 的博客应该是 Web 标准的典范，他使用的定义方式大家应该都比较熟悉，使用 h1 定义网站标题，使用 h2 来定义文章标题和侧边栏目标题，h3 就用来定义文章时间。Matt Cutts 最懒，直接使用美女 Rebecca 的 Almost Spring 模板，具体定义方法和 Jeffrey Zeldman 一样，而 WordPress 默认模板也是选用这个方式来定义的。

国内 BSP 特别喜欢使用 div 来定义文章标题，代表有百度的空间、对牛乱弹琴、徐静蕾的BLOG。

从结果来看定义标题没有固定的模式，感觉都比较随意。仅从 SEO 方面来说，只需要注意在 h1,h2,h3 中出现关键词就行了，从 Web 标准来说使用 div 定义都没有错。而 Matt Cutts 的博客最有代表性，一个 Google 高级工程师，SEO 专家，在自己博客模板上并没有为 SEO 刻意花什么功夫。这就说明一个道理，只要你大体上做到对搜索引擎友好就行了，不要太在乎细节上的东西。也可以这么说，一般人使用 WordPress 默认的东西就够了，不用再到处找什么方法优化自己的博客，把心思放在文章上可能更重要。

但是如果非要说说文章标题使用什么来定义，可以从 2 个方面来看：

1、按照内容的重要性来定义，如：Official Google Reader Blog

使用 h1 定义网站标题

使用 h2 定义文章标题

使用 h3 定义栏目标题

2、按照网站的层次来定义，如：Official Google Blog

使用 h1 定义网站标题

使用 h2 定义栏目标题

使用 h3 定义文章标题

很少有使用 h1 来定义文章标题的，一般都用来定义网站标题，要不就不用。

附：一些有名网站定义文章标题的方式

使用 h1 定义文章标题 Techcrunch

使用 h2 定义文章标题 Official Google Reader Blog / Matt Cutts / Jeffrey Zeldman / Engadget / WordPress Blog

使用 h3 定义文章标题 Official Google Blog / Google 黑板报 / Boing Boing

使用 div 定义文章标题 TechEBlog / 百度的空间、对牛乱弹琴、徐静蕾的 BLOG

特别在使用h1定义标题的时候，最好使用文字来定义

例如：

这时的H1也就对搜索引擎失去了作用，因为目前搜索引擎还不能很好的识别图片。

再来看看这段。H1的代码对搜索引擎依然可读，我们只是利用text-indent:-9999px;将“邀请好友加入”的文字远远的扔到左边去了。点击查看示例

这样既有利于seo，又不会影响页面美观。