谷歌是否索引 CSS 伪元素中的文本内容？
微wx笑
2021-08-06【SEO技术】
3
0关键字：
谷歌 索引 CSS 伪元素
作者进行了一个测试，看看来自 CSS 伪元素的内容是否会在 Google 中编入索引，你认为答案是什么呢？
传统上，当 Google（或其他搜索引擎）寻找基于文本的内容进行索引时 - 他们希望直接在提供给他们的网页的 HTML 中找到这些内容。
随着使用 JavaScript 提供从小块内容到整个网站的任何地方的网站的兴起，这种情况有所改变。
Google 被迫投入资源，试图尽可能有效地呈现和索引基于 JavaScript 的内容。
CSS 伪元素
但是纯粹来自 CSS 的文本内容呢？可以使用CSS 伪元素（例如::before和::after）与 CSS content属性结合向页面添加内容。
请参阅下面的简单示例：
<p>99 bottles of beer on the wall, 99 bottles of beer.</p>代码语言： HTML、XML
p::after {content:' Take one down and pass it around, 98 bottles of beer on the wall.'}代码语言： CSS将显示为：
墙上99瓶啤酒，99瓶啤酒。拿下一个然后传过去，墙上有 98 瓶啤酒。
年复一年，随着 CSS 变得更加先进并引入其他功能，例如仅使用 CSS进行数学计算或计算元素的能力，开发人员和设计师采用这些功能的可能性变得更高。
但是谷歌能够呈现和索引这些内容吗？在 CSS 中找到的文本会出现并可以在 Google 中搜索到吗？
使用 CSS 进行文本最佳实践吗？
在我们开始之前，重要的是要注意，在大多数情况下，使用 CSS 伪元素和“内容”属性（而不是 HTML）在网站上显示任何大量基于文本的内容，由于各种原因绝对不是最佳实践， 包含：
用户无法选择文本，这意味着它无法突出显示或复制/粘贴
屏幕阅读器将忽略文本 - 使内容无法访问并违反可访问性指南。
F87：由于使用 :before 和 :after 伪元素以及 CSS 中的“内容”属性插入非装饰性内容，导致成功标准 1.3.1 失败
W3.org
CSS 伪元素一般来说应该只用于对页面内容的消费不重要的装饰元素。
搜索引擎优化民意调查
在撰写本文之前 - 我无法找到关于此主题的任何其他以 SEO 为重点的文章，因此我认为深入研究可能会很有趣，因此进行一些研究。
我在 Twitter 民意调查中询问了 SEO 社区他们的想法，结果如下：
谷歌是否可以索引网页上显示在伪元素中的 CSS 文本内容，例如:before、:after？
— 科林·麦克德莫特 (@ColinMcDermott) 2021 年 6 月 30 日
剔除只想查看结果的用户，“否”和“我不知道”获得相同数量的选票 (12) 和“是”落后的三个选项之间存在相当平均的分配只有几票（9）。
测试
为了进行测试，我创建了一个包含零标准 HTML 内容的页面，并使用附加到标题、段落、div 和链接标签的 CSS 伪元素添加了文本内容 - 来自外部文件 CSS 文件。
为了给 URL 一点提升以帮助它更快地（或实际上根本没有）被索引，我从站点的页脚临时链接到它。
渲染
为了进行测试，我还通过 Search Console 中的 Fetch 工具和 Mobile Friendly 测试工具运行了该页面。
两者都表明 Google 能够完全呈现页面上普通用户看到的 CSS 内容。
结果
最终（有点出乎我的意料）该页面确实在 Google 中被编入索引，尽管完全缺乏内容。
然而，在谷歌中检查结果列表，并在从页面搜索文本字符串后 - 很明显没有实际内容被编入索引。
所以我们可以从这个测试中确认：否- 尽管 Google 可以呈现它，但基于 CSS 的内容目前不会在 Google 中编入索引。
如果您使用 CSS 伪元素和 CSS 'content' 属性在您的网站上包含文本内容，Google 目前无法为文本内容编制索引。
更新 (14/7/2021)
出色的 Jess Peck 提醒我注意她之前针对同一主题进行的测试，您可以在此处查看，以及 Mathias Bynens 的另一篇文章/实验，它根本不使用任何 HTML。
转自：https://www.searchcandy.uk/seo/technical-seo/css-pseudo-elements/
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/opr-pro/seo/2021-08-06/714.html
上一篇：从百度快照看网页存在的问题
