定义文章标题,用 H1,H2 还是 H3

上次在 “SEO for WordPress 完全指南” 中提到文章标题的使用,有点疑惑,在一些 SEO 或者 Web 标准的文章中只说道需要使用 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标签在同一网页上仅能用一次

在网页中,根据重要程度排序是这样的:TITLE >H1 >H2 >H3 >STRONG。H1一般用1次,H2一般2-6次,超过这种使用频率就要考虑一下网页设计规范了。而H1-PRE的字号要求一般是在浏览器默认字号H4(1em或16px)基础上乘以1.5或除以1.5,实际上很多网站都将1.5调整到1.2倍以适应合适的浏览效果。H1标签在网页中是仅次于TITLE的,在朋友的网站中,只要涉及到加粗的文字统一采用了H1标签,造成的结果是一个网页中存在着5-6次的H1标注。这种情况下,很容易被搜索引擎认为是优化过度或作弊。

H1标签在图片中的应用

有些人会认为:<h1><img src="http://www.newsunday.com/favicon.ico" alt="秦爱网志" /></h1> 就已经实现了对图片使用H1标签的作用,事实上搜索引擎对ALT中的标签并不太感冒的,H1标签的强调效果也就失去了作用。那么如何在图片引用中使用H1标签呢?

♦ 在HTML中使用

<div id="ico">

<h1><span>秦爱网志</span></h1>

</div>

♦ 在CSS中对H1定义

#ico h1

{

background: url(http://www.newsunday.com/favicon.ico) no-repeat

width:16px

height: 16px

}

#ico h1 span

{

display:none

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的个人博客系统的示例代码。 HTML部分: ```html <!DOCTYPE html> <html> <head> <title>My Blog</title> <meta charset="utf-8"> </head> <body> <header> <h1>My Blog</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">关于我</a></li> </ul> </nav> </header> <main> <section> <h2>最新文章</h2> <ul id="latest-posts"></ul> </section> <section> <h2>热门文章</h2> <ul id="popular-posts"></ul> </section> </main> <footer> © 2021 My Blog </footer> </body> </html> ``` JavaScript部分: ```javascript // 定义最新文章和热门文章列表 var latestPosts = [ { title: "文章标题1", date: "2021-01-01", content: "文章内容1" }, { title: "文章标题2", date: "2021-01-02", content: "文章内容2" }, { title: "文章标题3", date: "2021-01-03", content: "文章内容3" } ]; var popularPosts = [ { title: "文章标题4", date: "2021-01-04", content: "文章内容4" }, { title: "文章标题5", date: "2021-01-05", content: "文章内容5" }, { title: "文章标题6", date: "2021-01-06", content: "文章内容6" } ]; // 在页面加载完成后执行以下代码 window.onload = function() { // 获取最新文章和热门文章列表元素 var latestPostsList = document.getElementById("latest-posts"); var popularPostsList = document.getElementById("popular-posts"); // 在最新文章列表中添加文章 for (var i = 0; i < latestPosts.length; i++) { var post = latestPosts[i]; var li = document.createElement("li"); li.innerHTML = "<h3>" + post.title + "</h3><p>" + post.date + "</p><p>" + post.content + "</p>"; latestPostsList.appendChild(li); } // 在热门文章列表中添加文章 for (var i = 0; i < popularPosts.length; i++) { var post = popularPosts[i]; var li = document.createElement("li"); li.innerHTML = "<h3>" + post.title + "</h3><p>" + post.date + "</p><p>" + post.content + "</p>"; popularPostsList.appendChild(li); } }; ``` 这个示例代码只是一个简单的个人博客系统,它只包含了最新文章和热门文章列表。你可以根据自己的需要添加更多功能和页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值