Html 在重复内容上显示无会影响SEO/语义吗？

显示：重复内容无影响SEO/语义吗

假设您正在构建一个移动优先、响应迅速的站点。在较小的断点处，您选择在主英雄横幅中显示页面的标题标语（

）。但是，稍后，您希望在同一位置显示公司徽标，并在子横幅中显示您的标语。例如：

<!-- Assuming following markup -->
<header class="hero-banner">
    <h1 class="hide-on-lg">Company Tagline</h1>
    <img src="..." class="show-on-lg" />
</header>
<div class="subhead-banner">
    <h1 class="show-on-lg">Company Tagline</h1>
</div>

语义规则是一个页面上的

h1

，因此我的问题是：

---

如果只有一个变体实际可见，那么重复内容是否会影响SEO或违反语义？

谷歌会抓取CSS的“显示：无”内容，因此它是重复内容。 更多信息请点击这里

---

是的，显然这会对搜索引擎优化产生负面影响；谷歌确实考虑了用于呈现页面的CSS（黑色背景上的黑色文本等）。此外，还指出每页只能有一个H1标签，等等。。。在您的情况下，保持相对“动态”功能的更好方法可能是使用媒体查询（bootstrap？）和jquery的组合，动态地更改它的样式和位置，而不必将它们都称为H1

.hide-on-lg {
    display: block;
}
.show-on-lg {
    display: none;
}
@media (min-width: 1200px) {
    .show-on-lg {
        display: block;
    }
    .hide-on-lg {
        display: none;
    }
}