<h1>-语义影响与SEO影响

关于html5中的标题结构的架构，存在很多争论。阅读各种文章之后，我得出了对我来说合乎逻辑的三种可能的体系结构，但是我不确定哪种方法是实际的正确方法。我将在下面用代码示例列出它们，并希望有人可以阐明适当的平衡，或更糟/更好的平衡，说出可怕的“您做错了”并伸出援手。

方法1：版本A

单个`<h1>`：仅将标题用于页面特定的内容。

在内容区域内按需<h1>流动时<h2-6>，这将保留页面特定标题的顶级导航。虽然离开<header>，<nav>和<footer>作为“无题”的元素。

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

方法1：版本2

多个`<h1>`：仅将标题用于特定于页面的内容。

与1A相同，但增加了多个同等重要的页面内容主题。（例如，可能适用于博客或主题拆分页面）

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

方法1概述： 对SEO最合乎逻辑（根据我的研究得出的意见）

无标题的身体

无标题资产净值

主要标题

节标题

小节标题

无标题的部分

方法二：

多个`<h1>`：强调大纲结构和内容层次结构

这适用于标题站点范围元素<header>，<nav>和<footer>使用多个<h1>的非面向内容的元素。

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

方法2大纲： 对语义大纲最合乎逻辑（再次，我认为）

标头标题

导航标题

主要标题

节标题

小节标题

页脚标题

节标题

方法3

单`<h1>`：内容层次结构焦点；`<h1-6>`站点级元素的较低级别

这会将标题应用于整个站点范围的元素<header>，<nav>而对于面向非内容的元素，<footer>则不使用多个<h1>。

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

方法3概述： 两种方法的混合

标头标题

导航标题

主要标题

节标题

小节标题

页脚标题

节标题

因此，我如何理解所有这些？有没有一种方法比另一种方法具有更多的语义价值？在SEO方面是否更有意义？是否有可以实现的幸福平衡？

资料来源： 还有更多，这些是我目前记得的

— 亲爱的
source

我只是自己看过兽医的传记，谢谢您的服务！（我也碰巧是个烟斗烟民……但是那是另一天。）

— closetnoc

如果您这么想，那么您列出的所有示例都可以使用，而Google和其他搜索引擎却很少追求完美。

— 西蒙·海特

@closetnoc，哈哈也感谢您的服务。

— darcher

我发现大多数站点的调优效果很差，以至于任何在调优语言和仅使用标题标记，描述元标记和各种标头标记方面都做得很好的站点通常会在竞争中胜出。具有讽刺意味的是，由于如今语义已成为搜索性能的较大部分，因此SEO似乎更多地与语言使用有关，而与关键词（暴力）无关，而与内容中关键位置自然使用的关键词的使用更为精细。中下标头标签的微小简单更改可以更改整个格局。

— closetnoc

那很有道理。不幸的是，我们的竞争对手似乎拥有非常优秀的撰稿人和开发人员（我们有点像打篮球的小孩子，是与垂直天赋，或在这种情况下是金钱天赋的对手对抗）。因此，在修改内容时，我们处于开发停滞状态，在此期间，我对文档结构的各个方面进行了微调，并在整个过程中实施了可访问性改进，以帮助我在任何情况下都能获得帮助，无论改进有多小。那和我有着天生的（或者也许是强迫症）的驱动力，甚至可以掌握我实现的最细微的细节和概念。

— darcher

Answers:

首先，您的示例均与语义无关。您的问题完全基于解析器模型，在该模型中以传统方式从上到下阅读页面。

因此，您的第一个示例是正确的。以下示例将无法为您提供可预测的结果，并可能导致严重的烧心。

请理解，您的网页将以多种方式在概念上进行浏览：一种是遵循传统的DOM模型，其中HTML等是从用户角度评估的；二，仅带有简单标记的文本，以指示标题，副标题，内容等；第三，使用语义视图，根据它在h1-6层次结构中的位置，实际上只将很小的权重应用于索引中的标头标签。从DOM模型中，您将获得诸如title标签，description meta标签之类的东西，而这在其他两个视图中将丢失。但是，DOM视图对加权内容几乎没有作用。它的主要功能是了解您的页面，导航位置，页眉和页脚，内容的开始和结束等。

您真正需要注意的是仅文本和语义视图。语义视图主要从纯文本视图派生而来，但是它带有各种语言学，心理语义学，语义学以及对内容的其他分析。

我不会再描述语义，但是我会向您指出我前一段时间写的一个答案，该答案是关于该主题的微型教程：为什么在没有Google搜索结果的情况下，带有关键字填充的网站的排名会高于一个？

由于Web基于早期的印刷页面和解析器，因此遵循了这些传统并且基本上没有变化，因此无法逃避它们。这是一个解释标题阅读顺序的答案，该顺序仍然是基于解析器模型的最佳策略：提高Google常规关键字与特定关键字的排名

尽管我会承认可能会有一些影响来移动标头标签的效果，但我问：这样做明智吗？一定不行！今天事情如何加权可能不是明天事情如何加权。遵循传统格式可确保获得可预见的结果，因为权重的简单变化会使您的网站陷入混乱。

以下是有关其工作原理的一个观点：SEO中的域名受益忽略标题，跳过答案的最顶部，进入程序员的角度。

如果阅读了这三个答案，则可以轻松理解header标记的作用。如何安排这些页面很容易破坏页面/站点的性能。即使遵循传统，您也可以通过过度优化一些较低的标头标签来非常快速地撤消title标签和h1标签。谨慎的平衡是关键。

最后，我会警告您非工程师提供的所有在线SEO建议。这是一种赚钱和争夺您注意力的球拍。搜索引擎如何工作并不是秘密。如果您知道要看哪里，就在那儿。大多数SEO专家根本不是专家，因为他们无法告诉您搜索技术如何组合在一起的内部信息。没有成为Google或Bing的工程师，我们永远无法真正知道这些搜索引擎的工作原理。幸运的是，Google已经告诉了我们足够多的信息（实际上，他们已经告诉了我们我们所需要知道的几乎所有信息，而且不是来自Matt的家伙），如果您了解科学和技术，则可以进行一系列相当合理的假设被制造。从我的角度来看，大多数SEO错误多于正确，而少数SEO命中率则高于平均水平。

— 壁橱
source

好答案！很少有答案能真正解决问题的每一个问题，您的问题超出了所有。有时我会模糊语义和您所说的“解析器模型”以及各种视图之间的界线，您的解释肯定会在将来弥补这一模糊界线。而且大多数SEO文章本质上都是自以为是，有太多理论假设。这就是为什么我把这个特殊的人带到这里的原因，并且如果您的回答与您的见解一样深刻，那么这个SEO难题可能会变得更加有意义。

— darcher

以下是从HTML5规范的角度出发，基于以下假设：消费者（如搜索引擎）将期望并使用HTML标准中指定的内容。在当前的实践中，这样的标记细节对于SEO可能无关紧要，但对其他消费者和可访问性而言可能很重要。

我将使用适当级别的标题，因为这是HTML5鼓励的，但是也可以在h1任何地方使用（如果您始终在适当的地方使用section内容元素）。

您不能将标题“应用”到header或footer元素，因为它们不是分节内容（它们只能包含标题，但是此标题将不限于header/ 的范围footer）。

每个切片内容元素（section，article，nav，aside），并且每个切片根元素（body，blockquote等）可以具有施加的标题。

这些节内容/根元素和标题元素h1- h6是与文档大纲相关的唯一元素。

尽管每个部分都“渴望”一个标题，但不需要提供一个（在这种情况下，它会得到一个“隐含的”无标题）。虽然提供一个通常很有用，但在某些情况下并没有必要。例如，如果您只有一个导航，则nav没有标题就足够了。但是，如果您的站点将具有多个导航，则使用解释不同目的的标题可能会有意义。

在方法1中，body标题部分是如此（但只有这种情况，因为您nav出现在第一个标题元素之前；否则h1将是整个文档的标题）。
我认为没有标题的body部分不是一个好选择。这是大纲中的第一个条目，理想情况下（但不一定），其后的所有内容均在此条目的范围内。

对于具有全局导航的典型网站，将站点名称用作本节的标题是很有意义的（较长的说明）body，因为全局导航属于整个站点，而不仅是当前文档：

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

该文档的主要内容也应该在网站标题的范围内，因为该网站是该文档的主要内容的上下文，即它是您网站的一部分：

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

如果您有多个主要内容部分，例如博客文章列表，那么通常最好使用section包含所有这些内容的article，而不要使用articleas作为直接子元素body：

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

如果您的站点范围内的页脚过于复杂以至于需要section元素，则该页脚应再次处于nav和主内容相同的级别（因为它属于该站点，而不是主内容）：

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

（在所有这些示例中，导航都位于主要内容之前，但通常首先具有主要内容是有意义的。可以交换这些内容。您仅应确保h1带有站点名称的和位于其他任何节/标题之前。）

— Unor
source

2.4.6 标题和标签以及2.4.10 部分标题是我认为在可访问性方面所指的内容，并且由于@closetnoc响应，我们一直在寻找替代方法来辅助技术。当前正在使用aria-roles / labeling为非内容导向的部分指定标题。似乎没有影响文档大纲。我写了一个简单的例子：在这里 ...

— darcher

...但是现在进行测试还为时过早，很少进行测试就无法知道这是否可行。在更好地了解它的影响之后，我可能会发布另一个问题，在标题方面比较SEO与Accessibilty。

— darcher

<h1>-语义影响与SEO影响

单个<h1>：仅将标题用于页面特定的内容。

多个<h1>：仅将标题用于特定于页面的内容。

多个<h1>：强调大纲结构和内容层次结构

单<h1>：内容层次结构焦点；<h1-6>站点级元素的较低级别

单个`<h1>`：仅将标题用于页面特定的内容。

多个`<h1>`：仅将标题用于特定于页面的内容。

多个`<h1>`：强调大纲结构和内容层次结构

单`<h1>`：内容层次结构焦点；`<h1-6>`站点级元素的较低级别