在最近一期的 Google Search Off the Record 播客节目中，Martin Splitt 和 John Mueller 阐明了 CSS 对 SEO 的影响。[[k]]
虽然 CSS 的一些方面对 SEO 没有影响，但其他方面可能会直接影响搜索引擎对内容的解读和排名。 [[k]]
类名对排名没有影响
本集最明确的结论之一是，CSS 类名对 Google 搜索没有影响。[[k]]
“I don’t think it does. I don’t think we care because the CSS class names are just that. They’re just assigning a specific somewhat identifiable bit of stylesheet rules to elements and that’s it. That’s all. You could name them all “blurb.” It would not make a difference from an SEO perspective.”[[k]]
他们解释说，类名仅用于应用视觉样式。它们不被视为页面内容的一部分。因此，在提取有意义的信息时，Googlebot和其他HTML解析器会忽略它们。 [[k]]
即使你将HTML输入到语言模型或基本爬虫中，类名也不会被考虑在内，除非你的系统专门设计用于读取这些属性。[[k]]
为什么伪元素中的内容会成为问题
虽然类名本身无害，但团队警告不要在 CSS 伪元素（如：:before 和 :after）中放置有意义的内容。[[k]]
Splitt 说：[[k]]
“The idea again—the original idea—is to separate presentation from content. So content is in the HTML, and how it is presented is in the CSS. So with and , if you add decorative elements like a little triangle or a little dot or a little light bulb or like a little unicorn—whatever—I think that is fine because it’s decorative. It doesn’t have meaning in the sense of the content. Without it, it would still be fine.”[[k]]beforeafter
添加视觉效果是可以接受的，但将标题、段落或任何面向用户的內容插入伪元素会违反网页开发的核心原则。 [[k]]
此类内容将对搜索引擎、屏幕阅读器及其他依赖直接解析 HTML 的工具不可见。 [[k]]
Mueller 分享了一个现实案例，说明此类操作可能导致的问题：[[k]]
“There was once an escalation from the indexing team that said we should contact the site and tell them to stop using and … They were using the pseudo class to add a number sign to everything that they considered hashtags. And our indexing system was like, it would be so nice if we could recognize these hashtags on the page because maybe they’re useful for something.”[[k]]beforeafterbefore
由于这些标签符号是通过 CSS 添加的，因此从未被谷歌的系统检测到。 [[k]]
Splitt 在录制过程中进行了实时测试并确认：[[k]]
“It’s not in the DOM… so it doesn’t get picked up by rendering.”[[k]]
CSS 过大会影响性能
该集还提到了与臃肿的样式表相关的性能问题。 [[k]]
根据 HTTP Archive 的 2022 年网络年鉴数据，CSS 文件的中位数大小已增至移动端约 68 KB，桌面端约 72 KB。[[k]]
“The Web Almanac says every year we see CSS grow in size, and in 2022 the median stylesheet size was 68 kilobytes or 72 kilobytes. … They also mentioned the largest one that they found was 78 megabytes. … These are text files.”[[k]]
此类冗余代码会对核心网络指标（Core Web Vitals）和整体用户体验产生负面影响，而这两者确实会影响搜索排名。框架和预构建库通常是导致此类问题的根源。 [[k]]
虽然开发者可以通过代码压缩和移除未使用规则来缓解此问题，但并非所有人都这样做。因此，CSS 优化是技术 SEO 检查清单中值得关注的项目。[[k]]
确保 CSS 可爬取
尽管 CSS 在排名中的作用有限，谷歌仍建议使 CSS 文件可被爬取。[[k]]
“Google’s guidelines say you should make your CSS files crawlable. So there must be some kind of magic in there, right?”[[k]]
真正的原因更具技术性而非魔法性。Googlebot 会使用 CSS 文件来渲染页面，使其呈现给用户的方式与实际浏览时一致。 [[k]]
阻止 CSS 文件可能会影响页面被解析的方式，尤其是在布局、移动设备适配性或隐藏内容等元素方面。[[k]]
SEO 专业人士的实用技巧
-
停止优化类名：CSS 类中的关键词不会提升您的排名。
[[k]]
-
检查伪元素：任何真实内容（如供阅读的文本）都应放在 HTML 中，而非 :before或 :after 中。
[[k]]
-
审核样式表大小：过大的 CSS 文件会影响页面速度和核心网络指标。尽可能精简内容。
[[k]]
-
确保 CSS 可被爬取：阻塞样式表可能干扰渲染并影响 Google 对页面的理解。
[[k]]
团队还强调了使用适当 HTML 标签为有意义的图片进行标记的重要性：[[k]]
“If the image is part of the content and you’re like, ‘Look at this house that I just bought,’ then you want an , an image tag or a tag that actually has the actual image as part of the DOM because you want us to see like, ah, so this page has this image that is not just decoration.”[[k]]imgpicture
使用 CSS 进行样式设置，使用 HTML 表达内容。这种分离有助于用户和搜索引擎。[[k]]
