首页 > 业界 > 关键词  > 谷歌最新资讯  > 正文

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

2021-08-06 14:49 · 稿源:站长之家

站长之家(ChinaZ.com):传统上,当谷歌(或其他搜索引擎)寻找基于文本的内容来索引时,他们希望能直接在所提供网页的HTML中找到这些内容。

随着越来越多的网站开始使用JavaScript来服务局部内容,并逐渐应用到整个网站,这种情况有所改变。

谷歌被迫投入资源,试图尽可能有效地呈现和索引基于JavaScript的内容。

CSS 伪元素

那么纯粹使用CSS的文本内容是怎样的呢?(站长之家注:CSS伪元素是用来添加一些选择器的特殊效果,例如可用于:设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容等情景。

比如使用CSS伪元素(如::before和::after)结合CSS content属性向页面添加内容。下面是一个简单的例子,在一段文字分别采用了HTML和CSS样式。

前半句采用HTML语言:

<p>99bottlesofbeeronthewall,99bottlesofbeer.</p>

后半句采用CSS语言:

p::after{content:'Takeonedownandpassitaround,98bottlesofbeeronthewall.'}

最终展示效果为:

99bottles of beer on the wall,99bottles of beer. Take one down and pass it around,98bottles of beer on the wall.

随着CSS变得越来越先进,并且引入了其他功能,例如只使用CSS进行数学计算或计算元素的能力,开发人员和设计人员采用这些功能的可能性变得更高。

文本中使用CSS是最佳做法吗?

但是谷歌能够呈现和索引这些内容吗?在CSS中找到的文本会出现并在谷歌中搜索到吗?在文本中使用CSS是最佳做法吗?

需要注意的是,在大多数情况下,使用CSS伪元素和'content'属性(而不是HTML)来显示网站上的大量文本内容绝对不是最佳做法,原因有很多,包括:

  • 用户不能选中文本,这意味着它不能被突出显示或复制/粘贴

  • 文本将被屏幕阅读器忽略,使内容难以访问,并违反可访问性准则。

一般来说,CSS伪元素一般只应用于装饰元素,这些元素对页面上的内容的使用是不必要的。

测试

为了能明确知道CSS伪元素在谷歌呈现和索引效果,国外程序员(Colin McDermott)执行一个测试。

Colin 通过创建了一个包含零标准 HTML 内容的页面,并使用CSS 伪元素添加了文本内容——包含标题、段落、div和链接标签的部分。

image.png

如果你想了解完整代码和结果页面,可以点击这里查看

谷歌呈现的效果

为了进行测试,Colin 还通过谷歌站长工具Search Console 中的 Fetch 工具和 Mobile Friendly测试工具运行了该页面。

两者都表明 谷歌能够完全呈现页面上普通用户看到的 CSS 内容。

CSS伪元素索引结果

最终,尽管完全缺乏内容,该页面还是在谷歌上建立了索引。

然而,查看谷歌结果列表,并从页面中搜索文本字符串后,很明显没有实际的内容被索引。

image.png

总结:

因此,我们可以从这个测试中确认:虽然谷歌可以呈现CSS伪元素效果,但基于CSS的内容目前不会被谷歌索引。

也就是,如果你在的网站上使用CSS伪元素和CSS“content”属性上包含文本内容,谷歌目前不可能对这部分文本内容进行索引。

站长之家注:Colin McDermott完整的测试过程可点击这里查看他分享的原文内容

  • 相关推荐
  • 大家在看
  • 腾讯云服务器12.12限时秒杀-1核2G首年50元

    腾讯云服务器12.12多种机型限时抢购,1核2G服务器4.17元/月,2核4G服务器6.17元/月,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

    广告
  • 微软宣布IndexNow协议升级 帮助搜索引擎更快获得内容索引

    几个月前,微软与Yandex一起推出了IndexNow协议,允许网站在其网站内容被创建、更新或删除时轻松通知搜索引擎...除了为内容发布者节省时间和精力外,这还有助于搜索引擎的内容发现工作,这使网络在整体上更有效率...在一份公告中,微软Bing网站管理员工具团队表示:「IndexNow协议可以帮助整个搜索行业更快获得他们的内容索引,同时使用更少的资源...

  • 索引擎 DuckDuckGo 宣布将推出 Mac 和 Windows 版桌面浏览器

    在博客文章中,DuckDuckGo表示开发中的电脑浏览器会「重新定义用户有关日常网上隐私的期望」,强调他们的浏览器会一改个人隐私设置的做法,并采用预设的隐私保护方式,让用户在搜索、浏览和使用电子邮件服务时,隐私获得尊重,同时防止企业监视用户的搜索和浏览历史。

  • Chrome 99 Canary恢复了可移除预置搜索引擎选项的功能

    作为搜索引擎设置页面改造的一部分,新版竟然不允许用户删除默认的搜索引擎提供商选项...我的搜索引擎总是不断被改成 Yahoo!,即便尝试移除 Chrome 设置页面中的默认选项,‘竖排三点’菜单键也看不到删除的选项...在另一则相关的 Chrome Bug 报告中,还有提到“移除预置的搜索引擎太过容易”...如果你已经在使用最新的 Chrome 99 Canary,可尝试在多功能地址栏里输入 chrome://settings/searchEngines 并直接跳转,然后就会看到如上图所示的“删除选项”......

  • 未删违规内容 俄罗斯法院对谷歌和Meta处高额罚款

    据国外媒体报道,莫斯科一家法院表示,将对 Alphabet旗下谷歌处以72亿卢布(约合人民币6.23亿元),对Meta罚款20亿卢布(约合人民币1.73亿元)的罚款,法院表示其未多次未能删除非法内容。

  • 荷兰数据保护机构称Google Analytics可能很快被禁止使用

    继昨天有报道称奥地利的数据保护机构发现Google Analytics违反了GDPR之后,荷兰数据保护组织AutoriteitPersoonsgegevens发布了一份新文件,警告称在对该服务进行调查之后,GoogleAnalytics可能很快被禁止。数据保护机构对该服务的主要问题是,它收集了没有必要的Cookies并将它们送回美国。这份题为"设置隐私友好型Google Analytics指南"的文件在前面有一个说明,信息大致翻译如下:"注意:Google Analytics的使用可能很快就不被允?

  • 隐私搜索引擎DuckDuckGo在2021年迎来46%增长

    以隐私为主打的搜索引擎 DuckDuckGo,在 2021 年继续保持着快速的增长 —— 日均检索次数超 1 亿,较去年同期高出近 47% 。与其它搜索服务提供商相比,DuckDuckGo 宣称不会追踪用户在第一方和第三方网站上的行为,且广告内容仅与用户检索关键字的上下文有关,而非基于兴趣而呈现的用户配置文件。举个例子,当你在 DuckDuckGo 上检索“电视”关键词的时候,它并不会将这部分信息用于在其它网站上显示相关广告。此外 DuckDuckGo 构建

  • Microsoft Edge中的网页截取工具现在也适用于PDF文件

    Microsoft Edge允许使用Web Capture工具捕捉网页内容的自定义屏幕截图,但它从未被允许PDF文件中工作过,这种情况直到今天成为历史。微软Edge的最新"Canary"版本允许使用网络捕捉按钮,即使标签打开的是一个PDF文件。在微软Edge网络浏览器的最新稳定版本中,当一个标签显示一个PDF文件时,网络捕捉按钮和省略号菜单中的选项是灰色的。然而,这种行为在最新的Canary或基于Chromium的网络浏览器的实验性构建中已经改变。虽然该工具暂

  • Horizon Aeronautics公司正打造eVTOL悬浮摩托车原型

    Horizon Aeronautics公司正在制作一个eVTOL悬浮摩托车概念的原型机,它采用了复杂而有趣的分体式 "Blainjett "变距转子系统,每个风扇只露出一半,但非常高效。要了解这个Blainjett推进系统是如何工作,你首先需要了解斜盘和循环控制是如何在直升机顶部旋翼的旋转中分配推力。每个叶片都可以独立改变其间距,斜盘的高度决定了间距。在斜盘平放的情况下,上下推动整个斜盘将同时改变所有叶片的间距。但通过循环控制,直升机飞行员能

  • Snapchat推出“阿凡达” AR滤镜 让用户知道他们在元宇宙中的样子

    据TechCrunch报道,Snapchat周四发布了一个Avatar lens(“阿凡达镜头”) AR滤镜,它让你看起来像一个Sims角色。或者,它让用户知道他们在元宇宙中的样子。要使用这个滤镜,用户需要在Snapchat应用程序中打开相机,扫描Snapchat网站上的二维码,然后看看他们的皮肤在元宇宙中是多么的光滑,那里显然不存在雀斑和痤疮。一个新的Snapchat AR滤镜本身并不引人注目,尤其是在该公司全面进入增强现实领域的时候--但这是一个持续多年的?

  • 宇瞻发布基于112层BiCS5 3D TLC闪存的工业存储解决方案

    Mordor Intelligence 研究报告指出:2020 年的面容识别市场价值达到了 37.2 亿美元,预计 2026 年将继续增长到 116.2 亿美元 —— 复合年增长率约为 21.71% 。据悉,AI 驱动的相关技术,正在智能零售、金融、交通、甚至医疗保健等领域蓬勃发展。与此同时,市场也需要更多可在严酷环境中运行的设备。本文要为大家介绍的,就是来自宇瞻(Apacer)的工业存储器新品,特点是采用了最新的 112 层 BiCS5 3D TLC NAND 闪存。官方承诺为旗?

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天