如題，從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已經(jīng)允許a包含任何html標記。而且第二種方式看起來似乎更迎合SEO。雖然一直按照第一種方式來寫，但總是有疑惑。
1 回答
牛魔王的故事
TA貢獻1830條經(jīng)驗 獲得超3個贊
HTML5 確實允許 a 包裹任何 div、p 之類到水平 block 標簽了。前提是包裹到內(nèi)容里不能包含任何交互的元素，比如其它鏈接或按鈕。
從開發(fā)和可用性角度
在 XHTML 的時代，如果你要創(chuàng)建大塊的點擊區(qū)域，代碼可能是這樣：
<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>
從代碼結(jié)構(gòu)上看，減少了重復的鏈接，對前后臺代碼維護來說都很方便，而且也更語義化（單純的<a href="story1.html">Read more</a>沒有任何意義）。看img標簽的alt屬性，前者是個鏈接，所以alt描述鏈接目標，后者是正文的一張補充圖片，因此直接描述圖片本身。
從用戶使用角度，鍵盤用戶選擇鏈接也可以少按幾次 tab。但也同樣帶來了困擾，比如不好復制鏈接里的部分內(nèi)容。
所以，當需要創(chuàng)建大區(qū)域點擊時（比如文本廣告），且對文字復制無要求時，使用后者更好。當鏈接單一時，兩者差別不是很大，比如只有：<h3><a href="story2.html">Link Title</a></h3>）。
從 SEO 角度
如果單純從 SEO 角度看，你的兩段代碼在 DOM 的樹狀結(jié)構(gòu)是這樣的：
- h1 - a
- a - h1
搜索引擎機器人在爬行的時候先寬遍歷再深遍歷，放在相同的頁面，僅看第一級節(jié)點，顯然 h1 的權(quán)重比 a 高。所以，針對你的代碼，前者對 SEO 更有利。
添加回答
舉報
0/150
提交
取消