css - 隐藏的标题标签是否具有语义值(value)？

Question

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

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

现在我想知道，因为我仍然希望我的页面具有逻辑语义值，如果我要添加 <h1>text here</h1>在 div 集合上方并将其设置为 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>

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

如果这个问题看起来令人困惑并且有点含糊，我很抱歉，但我真的不知道如何提出这个特定问题，但我希望我已经解释得足够好。

Answer 1

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

我相信谷歌会忽略任何以这种方式隐藏的内容，以避免诸如关键字堆砌之类的事情。他们已经多次声明他们只想阅读网站上用户实际可见的内容，因此他们应该忽略人们看不到的内容。然而，对于使用横幅图像的网站(我上次检查时)谷歌确实注意到了一些网站，有一些技术可以做你想做的事情。

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

<div>my header text</div> 

与

<h1>my header text</h1>

并围绕它调整您的代码。

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