可以在同一页面上使用多个 h1 标签，但样式不同吗？答案

【问题标题】：Is it alright to use multiple h1 tags on the same page, but style them differently?可以在同一页面上使用多个 h1 标签，但样式不同吗？
【发布时间】：2010-10-04 23:20:25
【问题描述】：

我有一个网页，我在各种 DIV 中多次使用 h1 标签，并且我将每个 div 的 h1 样式设置为适当的大小。

例如...

#content h1 {
  font-size:22px;
}

#left-nav h1 {
  font-size:14px;
}

#content .recent-news h1 {
  font-size:16px;
}

这样好吗？我担心 SEO。

解决此问题的最佳方法是什么？还是我什么都不担心？

【问题讨论】：

我很好奇你为什么担心 SEO。我不知道搜索引擎甚至会查看 css 的任何情况，但那是我的直觉，而不是基于任何东西。我不确定为什么会这样 - 搜索引擎应该只关注内容，对吗？
受影响的不是 SEO，而是寻找页眉的屏幕阅读器。 H1 是页面的顶部标题，应该使用一次。 H2-6 是副标题，可以重复使用。至少我是这么看的。
这个问题在 2021 年确实需要不同的答案。

标签： html css seo

【解决方案1】：

一般来说，每个页面应该只有一个 h1，并且 h1 应该简洁地代表该页面上的内容。只要您愿意使用 CSS 设置样式，请找出哪个级别的标题（h2、h3、h4 等）可以正确表示您要使用的标题，然后改用样式。

【讨论】：

【解决方案2】：

在语义上，我更喜欢在页面上使用一个 h1，主要用于页面的标题。对 SEO 来说这可能并不重要，而且随着 html 与 HTML5 一起使用，通用的header 标签将使它更简单，并且这个参数已经过时了。

【讨论】：

【解决方案3】：

请记住，您的 h1 用于指示上下文，而不是布局。因此，在一个页面上放置多个本质上并没有错。

在这个特定示例中，您需要确定左侧导航 h1 是否与内容 h1 和最近新闻 h1 具有相同的上下文重要性。如果您的脑海中存在清晰的层次结构，请使用您的标题标签来展示它。

【讨论】：

【解决方案4】：

在我看来，你不必担心，这样做是可以的。

H1 将您的部分内容指定为一级标题。因此，如果您的导航 div 中有一级标题（例如 <H1>Navigation Menu</H1>），那当然应该是 #nav h1。

您的内容中是否应该有多个 H1 取决于：如果您有一个博客并且每个条目都有自己的标题，那么这些将是 H1。但是，如果您的博客本身有标题（例如<H1>My Blog!</H1>），则博客条目标题应该是 H2。

但这只是理论。寻找可读的语义标记。你最好通过查看你的 html 并问自己：'它可读吗？如果我用另一种方式做，可读性会提高吗？答案因项目而异。

【讨论】：

w3.org/2003/12/semantic-extractor.html 确保从大纲的角度来看它对您来说是正确的。

【解决方案5】：

在尝试回答同一个问题时，我发布了这个问题，其中可能包含一些有用的信息。我担心在不同的地方使用相同的 H1、H2、H3 是，除非您总是像在示例中那样指定“父”样式* - 那么您可能会遇到问题。

Dilemma in deciding how to create CSS for H1, H2, H3 etc.

* 也就是说你永远不会自己定义“h1”

【讨论】：

【解决方案6】：

我不喜欢多个H1s 的想法。 H1 是顶级，最重要的标题，页面基本上是关于该主题的。如果你有一个同样重要的第二个主题，不要把它放在另一个H1 标签中，把它放在另一个页面中。这是应得的，对吧？

【讨论】：

【解决方案7】：

我尝试在页面上只包含一个 H1，并且几乎但稍微从标题标签的内容重新排列/H1 是单个页面的主要思想，其他所有内容都应该是一个 h2 标签和更低....

【讨论】：

【解决方案8】：

如果是关于 seo 最好使用 h1 标签如果你只想将它用于样式目的，请使用 css 样式表。

最重要的是：如果网页中使用了多个 h1 标签，则 google 可能会将该页面视为垃圾邮件。可以多次使用 h1 以外的其他标题标签，例如 h2 h3 h4 h5 h6。

【讨论】：

【解决方案9】：

来自 Google 的 Matt Cutts 回复 More than one H1 on a page: good or bad?（2009 年 3 月 5 日）：

好吧，如果有一个合乎逻辑的理由有多个部分，那就不是太糟糕了，你知道多个h1s。我会注意过头了。如果你的整个页面是h1，那看起来很克里蒂，正确的？所以不要做所有h1 然后你用CSS让它看起来像常规文本，因为我们看到竞争对手抱怨的人如果用户关闭 CSS 或 CSS 没有加载，它看起来特别糟糕。所以，你知道，在这里有一点h1 是可以的然后也许一个页面上有两个部分，所以也许有一个一点点h1 在这里。

但是您确实应该将它用于标题或标题，这就是意图是。不要只是在页面上的任何地方抛出h1。因为我可以告诉你，如果你只是在页面上到处乱扔h1，人们试图滥用它，所以我们的算法试图采取它考虑到所以它对你并没有那么好。所以我会在有意义且更谨慎的地方使用它，但你可以拥有它多次。

【讨论】：

谢谢，不错的链接 - 该频道的其他视频也不错:)

【解决方案10】：

这完全取决于您的doctype 是什么。对于html5，每个部分可以使用多个h1 标签。（不要阅读，根据<section></section>！）在示例中使用XHTML 1.0 Transitionaldoctype 时，我会避免在单个页面上使用多个h1 标签。

当在示例中使用XHTML 1.0 Transitional doctype 时，我经常会选择这样的东西：

h1：最大。每页一次
h2：最大。每页两次
等

另外@joel，即使你的回答还不错，请不要试图混淆任何人......我可以说我是谷歌软件工程师，因为我只是在谷歌工作（不是公司，而是产品）并且我是一名工程师...请在声明此类内容时列出您的公司名称和任何认证。

【讨论】：

Joel 并不是说自己是 Google 工程师，他指的是他链接到的 youtube 视频中的那个人（尽管他说的方式不是很清楚）。该视频由 Google 网络垃圾邮件负责人 (en.wikipedia.org/wiki/Matt_Cutts) 的 Matt Cutts 制作，可能是此类主题的最可靠来源。
比原始发布日期晚了一年，但看起来你已经看过视频了......所以，我不能说它是那垃圾邮件。跨度>
为什么 XHTML 和 HTML5 在标题标签方面会有所不同？语义应该还是一样的吧？

【解决方案11】：

我认为在我的页面上的每个块元素的顶部放置一个 H1 标签是一种很好的 SEO 做法，但这只是我。当然，这个 H1 标签应该包含与您定位的关键字/主题相关的信息。

这是我发现的一种非常有效的 SEO 方法，所以告诉你不要这样做的人试图阻止你加入我们的奖金。

【讨论】：

【解决方案12】：

随着HTML5的采用，如果合理的话，几个H1是完全可以的。很好，IIRC，也在 HTML4 中，但除非页面非常垃圾，否则我从未见过它使用过。

一个适用多个 H1 的示例是包含标题、摘录和链接到完整内容的文章列表：

<header>
    <h1>Articles</h1>
    <h2>About fish</h2>
    <p>Some intro text</p>
</header>

<section id="articles">
    <article>
        <h1>Title</h1>
        <blockquote class="excerpt">
            Excerpt here
        </blockquote>
        <a href="/whatevs">Read more</a>
    </article>
    
    <article>
        <h1>Title</h1>
        <blockquote class="excerpt">
            Excerpt here
        </blockquote>
        <a href="/whatevs">Read more</a>
    </article>

</section>

这在语义上是应该的，因此在 SEO 方面也很好。事实上，我认为这比文章的 H2 更好，因为文章本身不是“关于鱼的文章”的子标题，但我想这也可以反对。

【讨论】：