我应该使用多个 h1 还是没有 h1 的多个 h2？答案

【问题标题】：Should I use multiple h1 or multiple h2 without h1?我应该使用多个 h1 还是没有 h1 的多个 h2？
【发布时间】：2012-01-04 05:01:41
【问题描述】：

在显示导师列表的网页中，当前的 HTML 代码：

<div id="tutors">

 <h1>Tutors</h1>
 <div class="tutor">
  <h2>John</h2>
  <p>...</p>
 </div>

 <div class="tutor">
  <h2>Mary</h2>
  <p>...</p>
 </div>

 <div class="tutor">
  <h2>David</h2>
  <p>...</p>
 </div>

</div>

现在，由于某些原因，需要在页面中删除当前由 h1 包裹的 Tutors 一词。我能想到 3 个选择：

使用 css 隐藏它。
只需删除它，页面就会有 h2 没有 h1。
删除它，并将所有 h2 更改为 h1。

哪个更合适？

【问题讨论】：

标签： html seo html-heading

【解决方案1】：

#3：将其删除，并将所有 h2 更改为 h1。

对于 SEO，隐藏文本是不受欢迎的，因为它可以被视为黑帽 SEO。除非您要用带有文本“Tutors”的图像替换标题。
- Should I include my logo text using 'alt' or CSS?
- Hiding Text with CSS for SEO
- 如果你坚持隐藏文字，Accessibility/SEO Friendly CSS Hiding
您不能拥有<h2>，除非事先有<h1>。
- Headings, heading hierarchy, and document outlines

【讨论】：

我不知道
标签必须在
标签之前？这是 xhtml strict 还是 html5 的新功能？
To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.). - w3.org/TR/WCAG20-TECHS/G141.html

【解决方案2】：

这些选项都不是好的 SEO。

这是有风险的，也是一种不好的做法。搜索引擎已经变得非常擅长找出文本何时被隐藏，如果他们发现像 <h1> 这样的权重很大的标签被隐藏了，那将损害您的排名。
您不应该跳过标题层次结构中的一个步骤（没有<h3> 没有<h2> 等）。此外，它们应始终按重要性降序排列。
每个页面都应该有一个<h1>，它应该是第一个标题标签。就 SEO 权重而言，它们的顺序为 <title>。

为什么首先需要隐藏这个标题？这似乎是对页面内容的良好描述。

【讨论】：

第 3 点不一定正确。反正没有了。这是heavily debated topic。
好点，尤其是在 HTML5 中。然而，在这个特定的例子中，我认为给每个导师的名字一个<h1> 在语义上是没有意义的。我更喜欢@Aaron 的<dl> 解决方案，但是该页面仍然应该有一个<h1>，而且我认为除了导师之外没有任何意义

【解决方案3】：

根据页面的用例，其中任何三个听起来都是有效的选项。也就是说，在考虑这个问题时，我想到了以下几点：

SEO：似乎有一些观点认为标签内容的选择可能会影响搜索引擎排名。
无样式渲染：如果由于某种原因可能会在没有随附的 CSS 表单的情况下渲染页面，请注意默认渲染对页面的影响以及您可能希望它如何执行
请注意，HTML 5 中有新的常用标签，例如“section”，它可能适合您的页面，并且在语义上比 H 标签更清晰

【讨论】：

【解决方案4】：

这是一个偏好。您应该始终将演示文稿和结构分开，所以我会说只是将其注释掉，然后让它一直存在。如果你隐藏它，这真的不是演示，因为它从未见过。所以 3 是最合适的。

【讨论】：

【解决方案5】：

没关系。

如果您使用 jQuery 来显示和隐藏内容，它与 SEO 无关。当您从所有实际意义上查看源代码时，搜索引擎会看到您所看到的内容。反正你没有做任何偷偷摸摸的事情。

在此处参考我关于堆栈溢出的帖子If I do everything on my page with Ajax, how can I do Search Engine Optimization?

因为您所做的是在搜索引擎出于所有实际目的查看它之后。

【讨论】：

【解决方案6】：

也许您应该考虑将这些项目格式化为定义列表，例如：

<div id="tutors">
    <h1>Tutors</h1>
    <div class="tutor">
        <h2>John</h2>
        <p>...</p>
    </div>
    <div class="tutor">
        <h2>Mary</h2>
        <p>...</p>
    </div>
    <div class="tutor">
        <h2>David</h2>
        <p>...</p>
    </div>
</div>

变成：

<dl title="Tutors">
    <dt>John</dt>
        <dd>...Description here...</dd>
    <dt>Mary</dt>
        <dd>...Description here...</dd>
    <dt>David</dt>
        <dd>...Description here...</dd>
</dl>

然后将 CSS 类和样式应用于元素，为有视力的用户美化它。只是一个想法。

【讨论】：

标签必须在

标签之前？这是 xhtml strict 还是 html5 的新功能？