In a recent episode of Google’s Search Off the Record podcast, Martin Splitt and John Mueller clarified how CSS affects SEO.
While some aspects of CSS have no bearing on SEO, others can directly influence how search engines interpret and rank content.
Here’s what matters and what doesn’t.
Class Names Don’t Matter For Rankings
One of the clearest takeaways from the episode is that CSS class names have no impact on Google Search.
Splitt stated:
“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.”
Class names, they explained, are used only for applying visual styling. They’re not considered part of the page’s content. So they’re ignored by Googlebot and other HTML parsers when extracting meaningful information.
Even if you’re feeding HTML into a language model or a basic crawler, class names won’t factor in unless your system is explicitly designed to read those attributes.
Why Content In Pseudo Elements Is A Problem
While class names are harmless, the team warned about placing meaningful content in CSS pseudo elements like :before and :after.
Splitt stated:
“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 before and after, 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.”
Adding visual flourishes is acceptable, but inserting headlines, paragraphs, or any user-facing content into pseudo elements breaks the core principle of web development.
That content becomes invisible to search engines, screen readers, and any other tools that rely on parsing the HTML directly.
Mueller shared a real-world example of how this can go wrong:
“There was once an escalation from the indexing team that said we should contact the site and tell them to stop using before and after… They were using the before 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.”
Because the hashtag symbols were added via CSS, they were never seen by Google’s systems.
Splitt tested it live during the recording and confirmed:
“It’s not in the DOM… so it doesn’t get picked up by rendering.”
Oversized CSS Can Hurt Performance
The episode also touched on performance issues related to bloated stylesheets.
According to data from the HTTP Archive’s 2022 Web Almanac, the median size of a CSS file had grown to around 68 KB for mobile and 72 KB for desktop.
Mueller stated:
“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.”
That kind of bloat can negatively impact Core Web Vitals and overall user experience, which are two areas that do influence rankings. Frameworks and prebuilt libraries are often the cause.
While developers can mitigate this with minification and unused rule pruning, not everyone does. This makes CSS optimization a worthwhile item on your technical SEO checklist.
Keep CSS Crawlable
Despite CSS’s limited role in ranking, Google still recommends making CSS files crawlable.
Mueller joked:
“Google’s guidelines say you should make your CSS files crawlable. So there must be some kind of magic in there, right?”
The real reason is more technical than magical. Googlebot uses CSS files to render pages the way users would see them.
Blocking CSS can affect how your pages are interpreted, especially for layout, mobile-friendliness, or elements like hidden content.
Practical Tips For SEO Pros
Here’s what this episode means for your SEO practices:
- Stop optimizing class names: Keywords in CSS classes won’t help your rankings.
- Check pseudo elements: Any real content, like text meant to be read, should live in HTML, not in
:before or :after.
- Audit stylesheet size: Large CSS files can hurt page speed and Core Web Vitals. Trim what you can.
- Ensure CSS is crawlable: Blocking stylesheets may disrupt rendering and impact how Google understands your page.
The team also emphasized the importance of using proper HTML tags for meaningful images:
“If the image is part of the content and you’re like, ‘Look at this house that I just bought,’ then you want an img, an image tag or a picture 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.”
Use CSS for styling and HTML for meaning. This separation helps both users and search engines.
Listen to the full podcast episode below:
