如何在语义上标记页面中的相关内容链接？

Question

在文章页面上，通常会以链接的形式列出相关内容。我发现人们通常使用较低级别的标题标签，例如 h3、h4 来标记他们。类似于：

<h3><a href="related-article.html">The Related Article</a></h3>

从语义上讲，我不确定这是标记它们的最佳方式。对我来说，标题标签用于标记文章的不同部分，相关文章并不是 'current' 文章的真正部分。他们只是相关的。

链接可能在无序列表的 li 中，但在 li 内，普通的 p、div、span 标签感觉有点低估了。

因此，从语义上（以及出于 SEO 目的，逻辑上应该放在一起），什么是用于相关文章标题的合适标签？

Answer 1

如果只是链接文章标题的列表，则不应使用标题元素；文档大纲没有用，而且可能会造成混淆，因为跳转到这样的标题不会导致任何内容（除了标题内容本身）。

链接列表应该是 aside element 的一部分，可能会有一个标题，例如：

<aside>
  <h1>Related articles</h1>
  <ul>
    <li><a href="/related-article-1">Related article 1</a></li>
    <li><a href="/related-article-2">Related article 2</a></li>
  </ul>
</aside>

但是，如果您为每篇相关文章显示更多内容（例如，摘要、作者、出版日期等），则可以为每篇相关文章使用 article element，并且那么每个 article 都可以有一个标题：

<aside>
  <h1>Related articles</h1>

  <article>
    <h2><a href="/related-article-1" rel="bookmark">Related article 1</a></h2>
    <p>Dolor sit amet …</p>
    <footer>Written by <a href="/authors/alice" rel="author">Alice</a></footer>
  </article>

  <article>
    <h2><a href="/related-article-2" rel="bookmark">Related article 2</a></h2>
    <p>Lorem ipsum …</p>
    <footer>Written by <a href="/authors/bob" rel="author">Bob</a></footer>
  </article>

</aside>

（您也可以使用 cite element 作为博客标题 post and/or 作者姓名。）

Answer 2

从语义上讲，出于 SEO 目的，您不应在旁边使用 <h3> 标签。

抓取工具会将标题标记中的任何内容视为对当前页面的总结。 headers 越多，就抓取工具而言，页面的主要内容就越稀薄。出于这个原因，为了让抓取工具清楚地了解您的页面目的，您应该非常小心您在 headers 中输入的内容。无论用户看起来如何，您的链接都会被抓取。所以在你的链接中使用 headers 没有任何优势，事实上有一个缺点（如上所述）。

您最好将 <a> 的样式设置为看起来像 headers。这是语义上最正确且 pro-SEO 的方法。

如何在语义上标记页面中的相关内容链接？

How to tag related content links in a page semantically?

html

semantic-markup