隐藏的标题标签是否具有语义价值？

Question

我正在使用多个具有相同内容的 DIV 标签来创建一个可见的标题标签。

所以在我使用 H1 的地方，它实际上是多个 div 标签的样式，以创建所需的效果。

现在我想知道，因为我仍然希望我的页面具有逻辑语义值，如果我要在 div 集合上方添加 <h1>text here</h1> 并将其设置为 display:none; 是否仍会为页面创建逻辑顺序?还是 google 等网络爬虫会忽略隐藏的 h1 并因 div 标签中的重复内容而惩罚我？

为了更清楚地理解我的意思，这是一个粗略的模型：

<h1 style="display:none">my header text</h1>

<div>
    <div>my header text</div>
    <div>my header text</div>
    <div>my header text</div>
</div>

在浏览器中查看时，div中的my header text只显示一次，但需要3次才能创建我需要的效果。

对不起，如果这个问题看起来令人困惑和有点含糊，但我真的不知道如何问这个特定的问题，但我希望我已经解释得足够清楚了。

Answer 1

语义价值和 SEO 价值略有不同。人们总是会争论做你所建议的事情的语义价值，尽管我会说它几乎没有（因为有更好的选择）。

我相信 google 会忽略以这种方式隐藏的任何内容，以避免出现关键字填充等问题。他们曾多次表示，他们只想阅读网站上实际对用户可见的内容，因此他们应该忽略人们看不到的内容。然而，有一些技术可以为使用横幅图像的网站做你想做的事情（我最后一次检查）谷歌确实注意到了。

在您的情况下，您可以轻松避免这种情况。你可以替换你的第一个

<div>my header text</div> 

与

<h1>my header text</h1>

并围绕它调整你的代码。

通过设置 height: 100% 来重置 h1 标签的所有浏览器默认值；边距：0px；填充：0px；字体粗细：正常； display: block; 并将其视为 div。之后，应用您对 div 所做的任何样式。 结果是语义正确的结果（您的标题位于内容顶部的 h1 标记中），并且 google 更有可能阅读。