Question

我有一张图片，下面是标题和副标题。列表中有许多这些。点击它们就可以看到一篇文章了。

<li>
    <div class="img-container"><img src="test.jpg"></div>
    <h2>The Title</h2>
    <p>The sub title</p>
</li>

我需要链接上面的内容。我希望用户能够点击图片，标题或副标题来访问文章页面。

我应该包装每个元素并创建3个x链接：

<li>
    <div class="img-container"><a href="/whatever"><img src="test.jpg"></a></div>
    <h2><a href="/whatever">The Title</a></h2>
    <p><a href="/whatever">The sub title</a></p>
</li>

或者我应该包裹整个块：

<li>
    <a href="/whatever">
        <div class="img-container"><img src="test.jpg"></div>
        <h2>The Title</h2>
        <p>The sub title</p>
    </a>
</li>

这两种方法都会对SEO产生影响吗？可用性？

Answer 1

Google used to have a limit关于网页上的链接数量;减少链接数量（特别是指向同一地点的链接）被认为是有利的。因此，我建议您使用<li>标记包含<a>内容的第二个选项。

Answer 2

将整个内容包装在锚中更好，因为它更具语义性并提供更好的代码可读性。对谷歌搜索引擎优化没有任何影响，因为谷歌算法会考虑所有这些因素（因为HTML 5规范允许在锚点内包含多个块级元素）。

更重要的是，在此代码中，请确保锚点上有 title 属性，img上有 alt 属性，并使用更好的包含元素。在这种情况下，你有一个事物列表，所以更像<article>标签的语义可能提供更好的搜索引擎优化。

链接多个元素？

2 个答案: