您好,匿名用户
随意问技术百科期待您的加入

如果网页上的文字既是标题h1又是一个链接a,是h1包含a还是a包含h1?

0 投票

如题,从SEO角度来说,哪种方式比较合适?

<h1><a href="index.php" title="home">home<a></h1>

or

<a href="index.php" title="home"><h1>home</h1><a>

早期html是不能包含block元素的,于是从标准上来说只能按第一种方式来写。但html5已经允许a包含任何html标记。而且第二种方式看起来似乎更迎合SEO。虽然一直按照第一种方式来写,但总是有疑惑。

用户头像 提问 2012年 12月1日 @ Anivia 上等兵 (276 威望)
分享到:

1个回答

0 投票
 
最佳答案

HTML5 确实允许 a 包裹任何 div、p 之类到水平 block 标签了。前提是包裹到内容里不能包含任何交互的元素,比如其它链接或按钮。

从开发和可用性角度

在 XHTML 的时代,如果你要创建大块的点击区域,代码可能是这样:

<div class="story">
    <h3><a href="story1.html">Big Brother is Watching You</a></h3>
    <p><a href="story1.html"><img src="v.jpg" alt="full story. " />People should not be afraid of their governments. Governments should be afraid of their people.</a></p>
    <p><a href="story1.html">Read more</a></p>
</div>

到了 HTML5,你可以写成这样:

<article>
    <a href="story1.html">
        <h3>Big Brother is Watching You</h3>
        <p><img src="v.jpg" alt="V for Vendetta">People should not be afraid of their governments. Governments should be afraid of their people.</p>
        <p>Read more</p>
    </a>
</article>

从代码结构上看,减少了重复的链接,对前后台代码维护来说都很方便,而且也更语义化(单纯的<a href="story1.html">Read more</a>没有任何意义)。看img标签的alt属性,前者是个链接,所以alt描述链接目标,后者是正文的一张补充图片,因此直接描述图片本身。

从用户使用角度,键盘用户选择链接也可以少按几次 tab。但也同样带来了困扰,比如不好复制链接里的部分内容。

所以,当需要创建大区域点击时(比如文本广告),且对文字复制无要求时,使用后者更好。当链接单一时,两者差别不是很大,比如只有:<h3><a href="story2.html">Link Title</a></h3>)。

从 SEO 角度

如果单纯从 SEO 角度看,你的两段代码在 DOM 的树状结构是这样的:

- h1
  - a
- a
  - h1

搜索引擎机器人在爬行的时候先宽遍历再深遍历,放在相同的页面,仅看第一级节点,显然 h1 的权重比 a 高。所以,针对你的代码,前者对 SEO 更有利。

用户头像 回复 2012年 12月1日 @ Nero 上等兵 (377 威望)
选中 2012年 12月1日 @Anivia
提一个问题:

相关问题

0 投票
1 回复 24 阅读
用户头像 提问 2014年 2月24日 @ Ryze 上等兵 (293 威望)
0 投票
0 回复 14 阅读
0 投票
1 回复 32 阅读
用户头像 提问 2014年 1月11日 @ Archer 上等兵 (494 威望)
0 投票
1 回复 78 阅读
+1 投票
1 回复 45 阅读
用户头像 提问 2012年 12月1日 @ Gemini 上等兵 (319 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...