从视觉和概念权重中分离标题标记顺序？

Question

这两张图片说明了我的标记+视觉重量，它清楚地强调了页面最重要的标题。有时大标题上面有一点pre-headline ..或.. subheadline？

那就是设计;我的工作是在网络浏览器中实现这一目标。 该网站是现场直播。现在来了SEO的家伙，拍了拍我的脸说：

  

你使用h3，然后是h1，然后是h3。那是不对的，那就是   降低我们的谷歌排名。

（我非常质疑，我的感觉有点被证实正在阅读这篇文章：Do HTML header tags need to go in order）

但是，让我们假设她在一秒钟内完全正确。 您如何在标记和CSS 中解决此问题？

我在第二张照片中用橙色做了什么......感觉不对......

您可以在此访问该网站： www.natursteinwerk-villmar.de /

Answer 1

我认为这是语义和风格之间差异的一个很好的例证。基本上：很容易理解h1应该很大，h2应该更小，h6应该更小。

这些标记中的任何一个都可以包含您想要的任何字体大小。它们之间的区别在于它们引入的内容的目的。

在设计博客网页时，我可能会这样做：

nav h1{
    font-size:18px;
}

main h1{
    font-size:32px;
    color:black;
}

main h2,
main h1 + p{
    font-size:24px;
    color:grey;
}

我有两个不同大小的h1。你可以说main h1实际上应该是h2。但我喜欢h1，因为nav和main实际上是独立的内容区域。

我还有一个h2和一个p，结果大小相同。您可以说p应该只是h2。但我喜欢在它自己引入某些内容时使用h2，而不是总是让它h1，这就像浪费HTML标签一样。

在一天结束时，我会说，在编写HTML时，我会非常努力地完全忘记外观的方式。

当我教授网页设计时，我非常喜欢的是给我的学生一个“重置”样式表，删除所有默认浏览器样式，并要求他们仅使用HTML设计和编写网页CSS。它迫使他们真正考虑他们的HTML标签意味着什么，而不会挂在诸如“哦，如果某些东西是粗体的，它必须在strong标签中。”< / p>

认为这种方式非常非常困难，但却能实现直观的设计和直观的代码。

特别针对您的情况（请记住我不会说德语）：

• 我认为有几个“Seitüber35Jahren”页面。因此，即使字体较小，也应该是h1：它会在多个页面中引入内容。
• “Naturstein - Leidenscha”专门介绍此页面上的内容，因此应该是h2。
• “Das Unternehmen”似乎在此页面上引入了一个特定部分，因此应该是h3。我希望在这个页面上有其他部分以同样的方式介绍。

另外，拥有.weight3和.weight2的东西都会变得疯狂。你怎么记得他们之间有什么区别？这就是我们不再使用<big>或<center>标签的原因 - 说一段文字是“大”或“中心”不会给你任何关于该文字的线索确实

Answer 2

你注意到的橙色解决方案从SEO的角度来看肯定更糟糕。在实际主标题上设置单个h1非常重要。如果搜索引擎优化人员坚持认为，最好使用<span class="h3">Seit...</span>之类的东西，而不是使用标题标签。

Google本身也忽略了标题的顺序for example here：

<div class="col-6 section-intro-content">
  <h4 class="section-sub-heading border-blue">
    Advertise
  </h4>
  <h2>
    Advertise with Google.
  </h2>
</div>

如果您不确定，请向SEO人员询问他/她的最佳做法。

Answer 3

让我们考虑一下对访问者有用的内容（特别是那些依赖于标题/大纲的内容，例如屏幕阅读器用户），并忘记“SEO规则”。

您是否要遵循HTML5的大纲算法（see tools），或者如果您只是依赖于标题元素（不考虑将分段内容元素考虑在内），那么将其视为ToC是有意义的。< / p>

您的主页目前有此大纲：

1. Document
  1.1 Navigation
2. "Seit über 35 Jahren"
3. "Naturstein – unsere Leidenschaft."
  3.1 "Das Unternehmen"
  3.2 "So arbeiten wir"
  3.3 "Referenzen"
  3.4 "Weitere Objekte"

这有用吗？我会说“Seitüber35Jahren”部分不应该在那里。如果用户导航到此标题，则没有任何内容 - 没有内容，没有子标题。它应该是内容的一部分;它不应该是一个标题。可能会将其添加到以下标题，但似乎更适合make it a subtitle/tagline，例如：

<header>
  <p>Seit über 35 Jahren</p>
  <h1>Naturstein – unsere Leidenschaft.</h1>
</header>

那就是“Naturstein - unsere Leidenschaft”。真的有用的标题？它似乎是一个口号或一个介绍，但将实际名称（“Natursteinwerk Villmar”）作为标题不是更有用吗？如果我要标记这个网站，我会在主页上找到其中一个大纲：

如果使用网站名称（也可能是带有alt的徽标）作为文档标题（for every page; see also）：

1. "Natursteinwerk Villmar"
  1.1 Navigation
  1.2 "Das Unternehmen"
  1.3 "So arbeiten wir"
  1.4 "Referenzen"
  1.5 "Weitere Objekte"

（最后四个部分可能是main元素的一部分。视觉设计可以保持不变，因此“Naturstein - unsere Leidenschaft。”仍然可以保持那么大的字体大小;唯一的区别是它现在是p。）

如果没有使用文档标题：

1. Document
  1.1 Navigation
2. "Natursteinwerk Villmar"
  2.1 "Das Unternehmen"
  2.2 "So arbeiten wir"
  2.3 "Referenzen"
  2.4 "Weitere Objekte"

如果您知道自己想要哪个大纲，请选择要使用的标题元素（h1 - h6）很简单：第一个级别获取h1，第二个级别获取h2 {1}}，... - 标题represent rank, not importance。