SEO技术您现在的位置是:首页 > 运营推广 > SEO技术

谷歌是否索引 CSS 伪元素中的文本内容?

<a href='mailto:'>微wx笑</a>的头像微wx笑 2021-08-06SEO技术 1 0关键字: 谷歌  索引  CSS  伪元素  

作者进行了一个测试,看看来自 CSS 伪元素的内容是否会在 Google 中编入索引,你认为答案是什么呢?

环尾狐猴h7R无知人生

传统上,当 Google(或其他搜索引擎)寻找基于文本的内容进行索引时 - 他们希望直接在提供给他们的网页的 HTML 中找到这些内容。h7R无知人生

随着使用 JavaScript 提供从小块内容到整个网站的任何地方的网站的兴起,这种情况有所改变。h7R无知人生

Google 被迫投入资源,试图尽可能有效地呈现和索引基于 JavaScript 的内容。h7R无知人生

CSS 伪元素

但是纯粹来自 CSS 的文本内容呢?可以使用CSS 伪元素(例如::before::after)与 CSS content属性结合向页面添加内容h7R无知人生

请参阅下面的简单示例:h7R无知人生

<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

将显示为:h7R无知人生

墙上99瓶啤酒,99瓶啤酒。拿下一个然后传过去,墙上有 98 瓶啤酒。

年复一年,随着 CSS 变得更加先进并引入其他功能,例如仅使用 CSS进行数学计算计算元素的能力,开发人员和设计师采用这些功能的可能性变得更高。h7R无知人生

但是谷歌能够呈现和索引这些内容吗?在 CSS 中找到的文本会出现并可以在 Google 中搜索到吗?h7R无知人生

使用 CSS 进行文本最佳实践吗?

在我们开始之前,重要的是要注意,在大多数情况下,使用 CSS 伪元素和“内容”属性(而不是 HTML)在网站上显示任何大量基于文本的内容,由于各种原因绝对不是最佳实践, 包含:h7R无知人生

  1. 用户无法选择文本,这意味着它无法突出显示或复制/粘贴h7R无知人生

  2. 屏幕阅读器将忽略文本 - 使内容无法访问并违反可访问性指南。h7R无知人生

F87:由于使用 :before 和 :after 伪元素以及 CSS 中的“内容”属性插入非装饰性内容,导致成功标准 1.3.1 失败h7R无知人生

W3.org

CSS 伪元素一般来说应该只用于对页面内容的消费不重要的装饰元素。h7R无知人生

搜索引擎优化民意调查

在撰写本文之前 - 我无法找到关于此主题的任何其他以 SEO 为重点的文章,因此我认为深入研究可能会很有趣,因此进行一些研究。h7R无知人生

我在 Twitter 民意调查中询问了 SEO 社区他们的想法,结果如下:h7R无知人生

谷歌是否可以索引网页上显示在伪元素中的 CSS 文本内容,例如:before、:after?h7R无知人生

— 科林·麦克德莫特 (@ColinMcDermott) 2021 年 6 月 30 日

剔除只想查看结果的用户,“否”“我不知道”获得相同数量的选票 (12) 和“是”落后的三个选项之间存在相当平均的分配只有几票(9)。h7R无知人生

测试

为了进行测试,我创建了一个包含零标准 HTML 内容的页面,并使用附加到标题、段落、div 和链接标签的 CSS 伪元素添加了文本内容 - 来自外部文件 CSS 文件。h7R无知人生

您还可以在此处查看CodePen 上的代码和结果页面h7R无知人生

为了给 URL 一点提升以帮助它更快地(或实际上根本没有)被索引,我从站点的页脚临时链接到它。h7R无知人生

渲染

为了进行测试,我还通过 Search Console 中的 Fetch 工具和 Mobile Friendly 测试工具运行了该页面。h7R无知人生

两者都表明 Google 能够完全呈现页面上普通用户看到的 CSS 内容。h7R无知人生

结果

最终(有点出乎我的意料)该页面确实在 Google 中被编入索引,尽管完全缺乏内容。h7R无知人生

然而,在谷歌中检查结果列表,并在从页面搜索文本字符串后 - 很明显没有实际内容被编入索引。h7R无知人生

h7R无知人生

所以我们可以从这个测试中确认:- 尽管 Google 可以呈现它,但基于 CSS 的内容目前不会在 Google 中编入索引。h7R无知人生

如果您使用 CSS 伪元素和 CSS 'content' 属性在您的网站上包含文本内容,Google 目前无法为文本内容编制索引。h7R无知人生

更新 (14/7/2021)h7R无知人生

出色的 Jess Peck 提醒我注意她之前针对同一主题进行的测试,您可以在此处查看,以及 Mathias Bynens 的另一篇文章/实验,它根本不使用任何 HTMLh7R无知人生

转自:https://www.searchcandy.uk/seo/technical-seo/css-pseudo-elements/ h7R无知人生


h7R无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()