我应该使用多个h1标签还是多个h2标签但没有h1？

Question

在一个显示导师列表的网页中，当前的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种选择：

1. 使用CSS将其隐藏。
2. 直接删除它，页面上将只有h2而没有h1。
3. 删除它，并将所有的h2更改为h1。

哪个选项更合适呢？

- bobo

Answer 1

#3: 移除它，并将所有的h2标签改为h1标签。

1. 出于SEO考虑，隐藏文本是不被赞同的，因为它可能被视为黑帽SEO。除非你打算用包含文本“Tutors”的图像替换标题。
   • 我应该使用“alt”还是CSS来包含我的标志文本？
   • 使用CSS隐藏文本以进行SEO
   • 如果你坚持要隐藏文本，可以使用无障碍/SEO友好的CSS隐藏
2. 在没有<h1>标签之前，不能有<h2>标签。
   • 标题、标题层次和文档大纲

- Ayman Safadi

---

我不知道<h1>标签必须在<h2>标签之前吗？这是xhtml strict或html5的新规定吗？ - Andy

为了方便导航和理解整个文档结构，作者应使用正确嵌套的标题（例如，h1后跟h2，h2后跟h2或h3，h3后跟h3或h4等）。 - http://www.w3.org/TR/WCAG20-TECHS/G141.html - Ayman Safadi

Answer 2

根据页面的用途，这三个选项中的任意一个都可以作为有效选项。话虽如此，在考虑这个问题时，我想到了一些事情：

• SEO：似乎有人认为标签内容的选择可能会影响搜索引擎排名。
• 无样式渲染：如果由于某种原因页面可能在不附带css样式表的情况下呈现，请注意默认渲染对页面的影响以及您希望它执行的方式
• 请注意，HTML 5中有像“section”这样的新常见标签，可能比H标签更具语义清晰性，并适合您的页面。

- Josh Diehl

Answer 3

没关系。

如果你正在使用jQuery来显示和隐藏东西，它与SEO无关。在所有实际意义上，搜索引擎看到的是你在查看源代码时看到的内容。你也没有做任何花哨的事情。

参考我的stack overflow帖子 如果我在我的页面上使用Ajax做所有事情，那么我如何进行搜索引擎优化？

因为你所做的一切都是在搜索引擎已经审查过它之后才进行的，对SEO影响不大。

- King Friday

Answer 4

这些选项都不是好的SEO做法。

1. 这是一种冒险和不良实践。搜索引擎已经非常擅长判断文本是否被隐藏，如果它们发现像 <h1> 这样的高权重标签被隐藏了，那么会损害您的排名。
2. 您永远不应该跳过标题层次结构中的任何一个步骤（例如不要有没有 <h2> 的 <h3>）。此外，它们应该按重要性逐渐减少的顺序出现。
3. 每个页面应该有且仅有一个 <h1>，并且它应该是第一个标题标签。它们在SEO权重方面与 <title> 相当。

为什么需要将这个标题隐藏起来呢？它似乎是页面内容的一个很好的描述。

- Ansel Santosa

---

第三点不一定是真的。无论如何，这是一个备受争议的话题，有很多讨论。 (注：方括号中为英文原文中的超链接) - Ayman Safadi

好观点，特别是在HTML5中。然而，在这个具体的例子中，我认为给每个导师的名字加上<h1>在语义上并没有意义。我更喜欢@Aaron的<dl>解决方案，但页面仍应该有一个<h1>，我认为它除了“导师”之外没有其他意义。 - Ansel Santosa

Answer 5

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

<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类和样式，以美化它，使其更适合有视力的用户。这只是一个想法。

- Aaron

Answer 6

这是一种偏好。您应该始终分离演示和结构，因此我建议只需将其注释掉，并指出它曾经存在过。如果隐藏它，则这实际上并不是演示，因为它永远不会被看到。因此，3是最合适的。

- Andy