感觉第二种方式看起来似乎更迎合SEO，你们说呢？

Question

如题，从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。虽然一直按照第一种方式来写，但总是有疑惑。

Answer 1

HTML5 确实允许 a 包裹任何 div、p 之类到水平 block 标签了。前提是包裹到内容里不能包含任何交互的元素，比如其它链接或按钮。从开发和可用性角度在 XHTML 的时代，如果你要创建大块的点击区域，代码可能是这样：<div&nbsp;class="story"> &nbsp;&nbsp;&nbsp;&nbsp;<h3><a&nbsp;href="story1.html">Big&nbsp;Brother&nbsp;is&nbsp;Watching&nbsp;You</a></h3> &nbsp;&nbsp;&nbsp;&nbsp;<p><a&nbsp;href="story1.html"><img&nbsp;src="v.jpg"&nbsp;alt="full&nbsp;story.&nbsp;"&nbsp;/>People&nbsp;should&nbsp;not&nbsp;be&nbsp;afraid&nbsp;of&nbsp;their&nbsp;governments.&nbsp;Governments&nbsp;should&nbsp;be&nbsp;afraid&nbsp;of&nbsp;their&nbsp;people.</a></p> &nbsp;&nbsp;&nbsp;&nbsp;<p><a&nbsp;href="story1.html">Read&nbsp;more</a></p></div>到了 HTML5，你可以写成这样：<article> &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="story1.html"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h3>Big&nbsp;Brother&nbsp;is&nbsp;Watching&nbsp;You</h3> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p><img&nbsp;src="v.jpg"&nbsp;alt="V&nbsp;for&nbsp;Vendetta">People&nbsp;should&nbsp;not&nbsp;be&nbsp;afraid&nbsp;of&nbsp;their&nbsp;governments.&nbsp;Governments&nbsp;should&nbsp;be&nbsp;afraid&nbsp;of&nbsp;their&nbsp;people.</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Read&nbsp;more</p> &nbsp;&nbsp;&nbsp;&nbsp;</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 的树状结构是这样的：-&nbsp;h1 &nbsp;&nbsp;-&nbsp;a-&nbsp;a &nbsp;&nbsp;-&nbsp;h1搜索引擎机器人在爬行的时候先宽遍历再深遍历，放在相同的页面，仅看第一级节点，显然 h1 的权重比 a 高。所以，针对你的代码，前者对 SEO 更有利。