Question

在文章页面上，通常会列出相关内容及其标题作为链接。我发现人们通常使用较低级别的标题标记，例如h3，h4来标记它们。类似的东西：

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

从语义上讲，我不确定这是标记它们的最佳方式。对我来说，标题标签用于标记文章的不同部分，相关文章实际上不是“当前”标题的一部分。文章。它们只是相关的。

这些链接可能位于无序列表的li内，但在li，普通p，div，span标记内觉得有点不重视。

因此，在语义上（以及出于搜索引擎优化的目的，逻辑上应该在一起），什么是适用于相关文章标题的标签？

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作为博客文章的标题和/或作者姓名。）

Answer 2

从语义上讲，出于搜索引擎优化的目的，你不应该在你的旁边使用<h3>标签。

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

你最好只设置<a>的样式看起来像标题。这是最具语义正确性和专业搜索引擎优化方法。

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

2 个答案: