html - h1:before{ } 是否适用于 seo？

Question

会<h1></h1>和h1:before{ content: "title";}工作一样<h1>title</h1>吗？

我正在创建一个响应式页面，顶部有我的名字作为 h1 标签之间的标题，例如“John Smith”，但它不适合在移动浏览器上的导航，所以我希望它只说“John ”手机浏览器。我可以通过在我的 css 中使用:before基于视口大小设置内容的媒体查询来实现这一点。

我只需要知道它是否会出于 SEO 原因在 h1 标签之间验证为“John Smith”？

Answer 1

我不确定:after和:before对 SEO 的影响。但是，当您使用此方法时，您将内容放在样式表中，我认为这应该被视为不好的做法。我会解决更多这样的问题：

HTML：

<h1>John <span class='hide-mobile'>Smith</span></h1>

CSS：

@media (max-width: 768px) {
  .hide-mobile {
     display: none !important;
  }
}

Answer 2

对于移动mediaqueries端，您可以设置一个 hudge word-spacing，white:space:nowrap;然后overflow:hidden打开<h1>屏幕发送那些困扰您的额外单词 :)。

Answer 3

选择一个应该在页面大纲中使用的标题，最好是大的。然后添加移动噱头。

<h1 class="suppressed-on-mobile">John Smith</h1>
<div class="mobile-heading">John</div>

CSS：

.mobile-heading {
  display: none;
}

@media screen and (max-width: 400px) {
  .suppressed-on-mobile {
    display: none;
  }

  .mobile-heading {
    display: block;
    font-size: 150%;
    /* etc... */
  }
}

这样，文本浏览器、搜索引擎、屏幕阅读器等就知道要显示什么。

搜索引擎不解析该content属性，因此您不应在 CSS 规则中包含实际内容。