Google明确CSS生成内容可能不被索引：企业网站如何排查

Google在2026年9月22日更新开发者SEO指南，明确说明：通过CSS content属性添加的内容不属于DOM，目前可能不会被Google Search索引。这个细节看似只影响前端开发，却可能直接造成服务卖点、联系电话、按钮说明、面包屑分隔文字甚至产品参数在浏览器里看得见，在搜索引擎理解页面时却不存在。

什么是CSS生成内容

前端经常使用::before、::after伪元素配合content添加装饰符号、编号或标签。例如在链接后面显示箭头、标题前增加圆点、菜单项之间增加分隔线。这些视觉内容由CSS绘制，并不是真实的HTML文本节点。

.service-title::before {
  content: "网站建设";
}

用户在屏幕上可能看到“网站建设”，但查看DOM时只有一个空元素。Google本次说明强调，这类内容目前会被忽略，因此核心业务词不应依赖这种方式输出。

哪些使用方式没有问题

CSS生成内容适合纯装饰信息，例如引号、箭头、圆点、背景图标和不会影响理解的分隔符。这类内容即使没有被搜索引擎读取，也不会改变页面主题，读屏软件忽略它们通常反而更合理。

需要警惕的是把真实业务信息写进CSS，包括产品名称、价格、促销条件、联系方式、表单标签、错误提示、栏目标题和重要按钮文字。这些信息既关系搜索收录，也关系无障碍和页面维护。

企业网站常见风险位置

• 首页服务卡片：卡片只有图标，服务名称由伪元素输出；
• 产品参数：规格单位、库存状态或价格前缀写在CSS里；
• 移动导航：菜单展开后的文字依赖主题样式生成；
• 咨询按钮：HTML只有空链接，“在线咨询”由content显示；
• 面包屑：分隔符可以使用CSS，但每一级栏目名称必须是正常链接文字；
• 打印样式：网址和免责声明仅在打印CSS里生成，网页正文没有对应内容。

如何快速排查

1. 关闭页面CSS，检查核心标题、服务名称和按钮说明是否仍然存在；
2. 在代码中搜索content:、::before和::after；
3. 使用浏览器开发者工具查看文字是否是DOM文本节点；
4. 用Search Console URL检查查看Google渲染后的HTML；
5. 检查读屏软件或浏览器无障碍树中是否能识别交互控件名称。

正确的整改方式

重要文字应直接写进语义化HTML，例如标题使用h1-h3，导航使用带href的a，按钮使用button，输入框使用可关联的label。CSS负责颜色、位置和装饰，不负责提供页面唯一的信息来源。

如果为了视觉效果必须隐藏一段辅助文字，也应采用经过验证的visually-hidden样式保留在DOM和无障碍树中，而不是把文字转移到CSS。图标按钮则应提供清晰的可访问名称，例如可见文字或准确的aria-label。

不要把问题扩大为“Google不看CSS”

Google仍会抓取CSS以理解页面布局和渲染效果，本次说明针对的是CSS content生成的文字不在DOM中。也不要因此把所有装饰符号写回HTML；正确原则是：影响用户理解、搜索主题和操作结果的内容进入HTML，纯装饰留给CSS。

在企业网站建设与技术SEO验收时，应同时检查浏览器视觉效果、HTML源码、渲染后DOM和无障碍树，避免出现“页面看起来正常，搜索与辅助技术却读不到”的隐性问题。

参考资料：Google开发者SEO指南、Google搜索文档更新记录。