Google's John Mueller and Martin Splitt spoke for just under 40 minutes on the topic of CSS and SEO. They covered why CSS files matter for SEO, how modern CSS frameworks impact pages, and the SEO implications of CSS class names and pseudo elements.
It is a good listen to for most technical or even non-technical SEOs to listen to, here is the embed:
Here is how Gemini summarized the conversation:
- CSS and SEO Connection: While not as commonly discussed as JavaScript, CSS does have implications for SEO, primarily concerning how Google's crawlers interpret and index content. Google's guidelines recommend making CSS files crawlable.
- Size of CSS Files:
- CSS files have been growing in size over the years. In 2022, the median stylesheet size was around 68-72kB.
- Frameworks often lead to larger CSS files, though unused rules can be removed and files split to optimize size.
- An extreme example of a 78MB CSS file was mentioned, which is highly unusual and problematic.
- CSS Class Names and SEO:
- CSS class names have no direct impact on SEO.** They are purely for styling and are not considered part of the visible text content that search engines analyze for keywords or ranking.
- Crawlers typically parse HTML for text content, stripping out attributes like class names.
- !important` Rule in CSS:
- The `!important` declaration overrides CSS **specificity** rules, forcing a particular style to apply regardless of other conflicting rules.
- It's a workaround for complex styling scenarios but doesn't have SEO implications.
- Pseudo-Elements (`::before` and `::after`):
- These CSS pseudo-elements allow developers to add decorative content (like icons or small symbols) before or after an element without adding it directly to the HTML.
- Crucially, content added via `::before` or `::after` pseudo-elements is NOT included in the Document Object Model (DOM) and therefore NOT picked up by Google's rendering and indexing systems.
- Recommendation: Use pseudo-elements only for **decorative purposes**. Do **not** use them for content that needs to be indexed or provides meaningful context (e.g., adding a hashtag symbol to words). Content that is vital for meaning or context should always be directly in the HTML.
- Viewport Units (e.g., `100vh`):
- Using units like `100vh` (100% of viewport height) for elements like hero images can cause issues with how Google's rendering preview tools display the page. Due to "viewport expansion" during rendering, these elements might appear disproportionately large in screenshots, pushing actual content out of view.
- While unlikely to directly affect indexing if the content is still in the DOM, it can make debugging harder and might indicate an accessibility issue. Limiting growth with `max-height` is a suggested solution.
- Hiding Content with CSS:
- While in the past, some attempted to hide text by matching font color to background color, this is less common now.
- Modern hiding techniques often involve `display: none;`, which effectively removes the element from the visual layout and typically from the rendered DOM for search engines as well.
- CSS Images vs. HTML `img` Tags:
- CSS images (background-image property) are primarily for **decorative elements** that don't convey essential content. They are not indexed as images by search engines.
- HTML `img` or `picture` tags** should be used for **content images** that are integral to the page's meaning (e.g., product photos, images in a news article, graphs). These images are part of the DOM, can be indexed by image search, and their context can be understood by crawlers.
- Philosophical Divide: The overarching principle is that CSS is for styling, while HTML is for content. Mixing these roles, especially by putting crucial content in CSS, can hinder search engine understanding and accessibility.
- Using CSS to create table-like layouts for tabular data is generally a misuse.
- For actual tabular data, using HTML `table` elements is preferred as it allows search engines (and screen readers) to recognize rows and columns, facilitating better understanding and indexing of structured information.
Forum discussion at X.
