How does CSS affect SEO?

0:09Hello and welcome to a new episode of Surge of the record, a podcast coming to you from the Google search team, where we talk all about search and maybe have some fun along the way. My name is Martin and I am a search relations engineer. I don't even know what my job title is anymore, but I'm part of the search relations team. And with me is John Mueller. Hello, John. Hello, Martin. So great to join you here. What a surprise. Right? It's always surprising when we see each other. Oh, man. So many conferences, so many travels. but here we are universe brought us back together what would you like to talk about today what have you brought for us I would like to talk about CSS wait does CSS have anything to do with SEO doesn't everything have to do with SEO well I mean like my cat's sleep cycle probably does not have anything to do with SEO, does it?

1:17Well, unless it wakes you at 5 AM. Which it does, but that's fine. But no, seriously, I mean, CSS is just styles. So how does my website look? What fonts to use? What colors? Does how does that? What? How does that have? No. What? Does it have impact? Well, I mean, Google's guidelines say you should make your CSS files crawlable. So there must be some kind of magic in there, right? Okay, I'll bite. But I haven't seen many people talk about it. Like, I don't think it's a topic in the SEO world, is it? Well, we could make it one. What do you think? Okay, let's explore this topic. That sounds like an interesting route to go.

2:06So why is no one talking about CSS with regards to SEO? Where should they be looking? What should they be a starting point? Like why would they matter? How does it work? Like how do people use? Let's start with how do people use CSS these days? JOHN MUELLER - How do people use CSS? They link to a CSS file from their HTML pages. and links are the basis of everything around SEO, right? Okay. Okay. But what do they put in their style sheets? Do we have any insights to that? I looked at a few places where people talk about CSS, kind of the status of the world of CSS, because I know a little bit about CSS, Yes, but basically my knowledge is based on kind of, I don't know, how I made my webpages way back in the day when you made HTML pages in an editor and wrote your own CSS.

3:14So I have no idea what has happened with CSS since then. And I know there are some people who are really active in the world of CSS and kind of bringing new things out. So my assumption is things have changed a little bit. And with regards to SEO, it feels like every now and then we get SEO questions that kind of map to CSS. So I thought, like all of the front-end developers who are kind of doing CSS on the side, like maybe it would be good to have an episode just to talk about SEO for CSS. Fair. That makes sense. I think it's a little bit like JavaScript. It's usually fine to use CSS. I mean, everyone's using CSS.

4:00It's fine. It's perfectly fine to use CSS. But it provides a lot of flexibility and power. And sometimes you can accidentally build things that are not going the way that you anticipate them to go. So, yeah, I think that makes sense. I guess there might actually be implications. I remember a few really weird cases and questions that we got that turned out to involve CSS. Yeah, that's a good point. Yeah. And I think CSS has changed. The way that it has been used has changed a lot over the years. So it makes sense to talk about it now. Cool. Yeah. I mean, I doubt there are things in CSS that break the way that JavaScript can break things for search.

4:43But like maybe, I mean, maybe. I'm sure there are very creative CSS developers who can make things that search engines don't really understand. Yep. Oh, yeah. Well, they understand it. It's just backfiring in interesting ways sometimes. Yeah. Okay, we'll get to those. We'll get to those. Let's start at the beginning. Websites have grown. Has CSS grown over the time as well? I guess so. Yeah. In preparation for this, I looked at the HTTP Archive Web Almanac, which they do every year or so. And they did one or they did a report on CSS in 2022. I don't know if there's a newer one. I checked there isn't.

5:31No. Okay. Well, I don't know what that means. CSS dead.

5:40Hope that. I hope that. I don't think so. I don't think so. FRANCESC CAMPOY, Cool. So I looked there, and I thought we could kind of walk through some of the things that are in there. And the first one that they kind of start off with is the size of CSS that is included in HTML pages. I don't know about you, but when I write my CSS files, they're usually a lot smaller than my HTML pages. How do you do it? FRANCESC CAMPOY, Yeah. OK, so that depends a little bit on if you're handwriting or your CSS, which of course you can still do, and that's perfectly fine. But you don't necessarily do that, especially if you just design things for multiple clients, or if you just want to quickly build a landing page or something.

6:26You might use a framework, because there are pre-built CSS or style sheets that you can just use and then style your content with, and these are sometimes quite large, I believe. OK. So it's like the old school people who are writing their own HTML and writing their own CSS, they have small and sleek pages. And those that use a framework have the full bloat. No, I mean, you can remove the unused rules, and you can split the files and these kind of things. So you have ways to do it, but maybe not everyone does. Like some people just like plug it in and then just forget about it. I don't know. Yeah.

7:13So the Web Almanac says every year we see CSS grow in size. And in 2022, the medium style sheet size was 68 kilobytes or 72 kilobytes. I think like one is desktop, one is mobile. First is mobile, second is desktop. So it's interesting that there's not that much difference between the two, but it's quite large. Yeah, those are large files. I don't know. If I had to write that manually, I would spend way too much time on it. So I guess these are frameworks in that case. I think so. Okay. They also mentioned the largest one that they found was 78 megabytes, which is crazy. What? These are text files.

8:01I don't know. Well, maybe I just don't understand modern CSS, but I don't know how you can fit 78 megabytes into one. I guess if you have lots and lots of images as data URLs in your CSS, maybe? But that's a really weird choice. No, I don't know. That's such a bad idea. Oh, God. I mean, I've heard of people who have audio files in their text files, so who am I to judge? That's a really nice insider joke. For the people who have seen that file and have laughed and enjoyed it, it has been great. For those who haven't, look around the internet a little closer. That's kind of mean. I think, like, look around the internet to find one text file.

8:50Okay, look. We'll keep people busy. That's true. But look at someone's website's text files. Let's put it that way. And you will be surprised. Okay. Some of our websites. We'll see who actually takes a look. It's not for humans. It's more for robots, but whatever. We'll see. OK. OK. Moving on to more serious topics. One question I still regularly get is whether CSS class names have any SEO effect. Yeah, I hear that question as well. 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.

9:43And that's it. That's all. You could name them all Blurb. It would not make a difference from an SEO perspective. It would just be really, really hard for developers and designers to identify what this is supposed to be. But these are words in the HTML page, no? Oh, yeah, but they're not part of the text content. Oh, so it's not because it's not visible. It wouldn't have any effect on SEO. No, it's like making up HTML elements that don't exist. Like, I don't know, put the keyword in a tag name or something and then hope that that's what is included. No, it's not. It's just a random HTML element then.

10:23Okay. What about simpler crawlers? Like, I don't know, if you were manually parsing the HTML file and feeding it to an AI model, would it have an effect there? I mean, that depends on how you implement that. But normally what you do is, as you say, you parse the HTML. So you say, like, so give me all the elements and then give me all the text content from the elements. And that would strip out all the attributes, including class names. Okay, cool. Well, that's one thing. So basically, no need to put keywords into your CSS file or at least into your class names, right? No, yeah, no. Okay. Then I saw that there is this exclamation mark important CSS thing.

11:13Oh, boy. I never understood that. It's like, on the one hand, why is exclamation mark in the beginning and important? It's like, could you put something in here? That is important? I don't understand. FRANCESC CAMPOY, So OK, that's a workaround, I would call it. CSS has something called specificity. And that's a beautiful word. And I'm really excited that I can actually pronounce it properly, specificity. So how specific is a rule? So you can say all elements, do a little asterisk, all elements on the page should have green text. and then a few other things. And then you might at some point be like, well, no, links should be blue historically.

12:01So I go A and then address all the A elements, all the links on a page and say like, you have a color of blue. And then sometimes you have like certain rules that are less specific than other rules because you can play this game more and more. So like if you say like all elements, that's very unspecific. If you say all anchor elements or link elements, that is a little more specific. You say every link element that has a different side, every link element that has a different side and has like a specific class attached. So you can make it more and more specific. And normally the more specific rules override the less specific rules.

12:37But then sometimes you're left off with like a one link that you want to be read. And now you can create either a class and say like read link. So you do like a.read link or something like that, or which makes it more specific than the other links. or you can, if you for some reason can't do that, because something more specific sets the color, and you have to have it in a less specific rule, which I don't think you ever do, you can override it by saying important. So this is important. I really, really, really want this color to be red. I'm not even sure what happens if you have multiple conflicting important rules.

13:14I'm not sure how that gets parsed. I would have to read that up in the specification. but it's an override for specificity. So you can say like, it doesn't matter what else comes after this. Like it doesn't matter how specific that rule is. This should be the declaration. And it doesn't have to be color. It can be anything like font size, display dimensions, these kinds of things. With important, you overrule the specificity system. Oh my God, you said that so many times. I can't say it once. Specificity. specificity almost almost you got moving on to a different topic it's unfortunate it's such a lovely topic i once said the wonderful poetically sentence or the wonderful poetic sentence specificity as specified by the specification that was wow okay that is crazy so many words so little meaning okay so it was like lots of apostrophes mean, no, not apostrophes, exclamation mark.

14:17Exclamation mark. Lots of exclamation marks mean it's very, very important. Followed by the word important, yes. I'm sure there's some SEO equivalent to this. I don't know. Okay, another topic that I know I've run into because the folks in the indexing side contacted me about this once is pseudo classes like before and after. Yes. Can you explain lightly what that is? Oh, God. OK. Are they pseudo-classes or pseudo-elements? I always confuse the two. It doesn't matter. The idea is, so in CSS, the way that, let's explain CSS really quick for those who have never encountered it or have seen it from up close.

15:01CSS is a text file that styles the HTML document that you created. So it gives us a possibility to separate the styling, the way that things look, from the content. Back in the days, you had to basically build tables into your HTML files to move things into columns and rows and position them next to each other. That is nasty because it is technically not tabular data. You just abuse a table to do some sort of grid layout. CSS allows you to separate out the style information completely from the HTML document. and that hypothetically has the nice benefits that you could switch CSS files based on user preference, for instance.

15:41If I want something very flashy and very colorful, I could have one style sheet and then someone else wants a black and white version of it. They can have a second style sheet, hypothetically. I think practically that also exists. I think there's like extensions for the browsers. In these files, in these style sheets, you say this kind of element, and that can be one specific element, a bunch of elements, elements inside other elements, or classes of elements, or specific IDs of elements. So you can say like all headlines, or you can say like all headlines that have breaking news as a class name or something like that.

16:17And then you can give them properties and you can say like the color should be this, the font size should be this, the size should be this, they should break the text around them, They should not break the text around them, yada, yada, yada. With pseudo elements or pseudo classes, you can also add content around things. So let's say you want a little unicorn pile of poop in front of every headline for some reason. Or maybe a light bulb. Like you want a little light bulb in front. Light bulb is probably nicer than a little pile of poop. So you want a little light bulb in front of every headline.

16:53then you can say like you can either ask everyone who's editing the HTML to add a little light bulb Unicode character in front of their actual headline or you can use CSS in one place and say like okay so before every h2 element h1 element whatever you've got add this little piece of content here this little light bulb and then you would have a little light bulb in front of every every headline without having to actually put it in the html document okay which for decoration i think is fine okay i think you can do that yeah i guess you can also do certain other things with before and after but i'm not sure what else you can do with it so could you put like the whole headline in there see that's the problem yes you can you can do that i don't think you should is this like an opinion no this is based on on technical merit in this case um it is an opinion but it is it has technical merit the the reason why i say you shouldn't do that is again if you look at a we we just discussed like oh but what about other crawlers and and and search engines and whatnot that might not like see it this way pretty much anyone who programmatically consumes html and that's like crawlers search engines bots in general and also accessibility tools sometimes they go through this html document and they parse it and they understand like okay so here's a headline element here's a link here's some text inside the headline element here's some text inside the link and so on and so forth they go through the html for that the html not the CSS.

18:37The CSS for them doesn't matter as much because 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 would still be fine it would not look as funky and fresh but it would be perfectly fine if you put actual content in the css that violates this fundamental principle oh okay so it's kind of like you're breaking something more like a philosophical rule kind of yeah yeah a fundamental principle of the web parsers could implement something to then also parse the css and get the before and after content but you really shouldn't have to do that because it should be in the html the content that you care about.

19:50JOHN MUELLER, more of a technical side note, do you know if this before and after stuff is included in the DOM? Ah. I'm not 100 % sure. It's not a trick question that I'm trying to. Not a trick question. I'm just kind of curious because my mental model is when we do rendering, we look at the DOM, right? Mm-hmm. That is a good question that I don't have the answer to, actually, because I haven't tried this. But I think it's easy to test this. So if I created a div with some content and then have some text in it, and then we have some CSS that has a div before kind of situation with some content, I wonder if that shows up in the DOM.

20:39Yeah, interesting. I think the browser shows it in the DOM so that you can more easily do something with it. But I don't think it actually is part of the DOM. I think it just shows the way. Okay. So one of the reasons I remember this before and after stuff is that 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. Because they were using the before pseudo class or pseudo element or whatever. I'm not sure what it is either. I would have to double check. Oh my god. Anyway, they were using the before to add a number sign to everything that they considered hashtags.

21:30And our indexing system was like, it would be so nice if we could recognize these hashtags on the the page because maybe they're useful for something. But because they were using CSS to add the hashtag symbol, we were like, these are just words on a page. I don't know what came out of it because usually, we also have the notion of we should be able to process the web however it comes. So maybe in rendering in the meantime, that is used in a DOM? I don't actually know. MARK MANDELSKI - It's a tricky. So I just tested it real quick because that's who I am. I just quickly coded something. It's not in the DOM.

22:12Oh, okay. So it doesn't get picked up by rendering. Okay, so definitely don't use before and after CSS pseudo classes if you want to add something that adds context, content to your pages. Design elements, probably fine. Yeah. Okay, cool. We should document this somewhere. Oh, God, yeah. So this is interesting because I think we never documented it, but I think we had it in the presentation somewhere at some point. Yeah, let me get on that. Okay. So you heard it here first. We don't have to do it live. Then another thing that I noticed in the Web Almanac is they talk about values and units, And that reminded me of this weird quirk that we had with, I think, hero images, which used, what is it?

23:10100 VH, which is VH is, what is it? Vertical height? Yeah. Viewport? Viewport height, I think. Viewport height? Okay. So 100 VH would mean the whole viewport, I guess? Yes, correct. That's what it's supposed to mean. Okay. It's like percent of the viewport. So it's like 100 VH is 100 % of the viewport height. Okay. So the weird thing that is kind of related to this is people complained that the, what is it? the inspect URL tool that does this rendering preview would show this gigantic image and none of the content when you had a hero image like this. Does that make sense? Yeah, it does. Oh, god, yeah, because we do something funky in rendering when it comes to viewports.

24:07And this is exactly why I keep telling people, do not look at the screenshot. Always look at the rendered HTML, because what we do is it's called viewport expansion. It's something that we do in rendering. It doesn't really matter how that works, but fundamentally, we try to catch a reasonable amount of things that are only happening if they are in viewport. So we are progressively resizing the viewport. And more specifically, we do that for height. So if you have something that says 100 % of the viewport height, then the problem is that this keeps growing until we either say, okay, this is unreasonably long or until it actually is done.

24:48And the problem with 100 % of the viewport height is when we keep growing the viewport to kind of go like, okay, now we are not covering the entire height, then that will never happen. And eventually we'll just give up and stop the expansion. That's not necessarily a problem, but it looks really weird on the screenshot. Okay. So if your textual content is not visible in that screenshot because you have this giant image in its place, is that a problem? Would we consider that to be hidden content or less useful content? I don't know how we are processing things, because I know there has been a change.

25:28I would have to look up that specific question. But I believe it's not necessarily a problem, because it's still in the DOM. It's still accessible to the crawlers. So I believe that we will process it just like normal stuff. OK. Yeah, I think that makes sense. If it's in a DOM, if it's rendered on the page, it's not visible in that screenshot. but it's like it's still on the page. Is this something that you think sites should fix? Like if they check their image or the URL in one of these tools, should they tweak the CSS to be like full viewport except maximum so much? I don't know if you can even do that in CSS.

26:12You can give it a maximum height and maximum width. so you can restrict the growth a little bit. And I believe, in this case, if it's a header image, I'm not sure why it has to cover the entire height of the viewport. And then also, if you want to cover the entire height of the viewport, what happens if people have to scroll? Because it only covers the viewport, and the viewport is just what you see on a screen. So it doesn't really scale up to how big the content is. So I'm not sure what people are trying to accomplish there. I might want to think about that and maybe find another way to get the effect that I want.

26:53Max width or max height in this case is probably a good way to do that. So it's almost like it's also an accessibility issue. So you wouldn't necessarily fix it for SEO, but it's like, what are you actually trying to do here? And maybe there is a smarter way to do that. Yeah, I would say so. Okay. Cool. Then in the report, they also talk about colors very briefly, which I know in the early, early days, people would use font color and font size and things like that to hide text on a page. it feels like that's a lot less common now. I don't have any data, but it's like anecdotally from your browsing the web, do you see people hiding things with same foreground, same background color?

27:47No, not that much anymore. I mean, they use display none, so they don't show it, but they are having it in the DOM. That has happened. Oh, okay. Oh, so it's almost like if you want to hide something, you might as well just hide it properly. Yeah, instead of in plain sight. Yeah. OK. Yeah. Then the other topic that comes up fairly regularly is CSS images. Oh. I had someone ping me, I think, last week or a week before on social media. It's like, my developer has decided to use CSS for all of the images because they believe it's better. Does this work? Is there anything to watch out for there? There is a bunch of things that you need to keep in mind when you do that.

28:39So number one, again, there is ideally a separation between the way the site looks and what the content is. Now, an image can be one of both or both. Like it can be decorative or it can convey content. And if I have, I don't know, like a really nice kind of wallpaper pattern in the background, then that doesn't really constitute content. It just makes it look nifty, I guess. I don't know if I have like a... Like the 90s, yeah. Yeah, exactly. Like if I have, I don't know, a GIF of like something bubbling, then I have or like stars twinkling, then I can put that as a background and it doesn't really add to the content.

29:25it just makes it look a certain way fine if i have like a landscape that i really like and i kind of want to make that the background of all my my content then fine put it in the background as well but if i if i have a blog post about this specific landscape and i want to like tell people like look at this amazing panoramic view of the landscape here and then it's a background image even if it's not like a whole page background image but like a div container that is empty and and then has the image there, or even if it has text and then the image is there, you can style random HTML elements in a way that it looks like.

30:04The browser shows an image with a border and a caption and something like that. And it looks like an image, but it is, from a content perspective, not an image, because it is just like an empty or maybe like a textual block of stuff with a background image that has been loaded for decorative purposes. The problem is the content specifically references this image, but it doesn't have the image as part of the content, which is confusing because for a user looking at the browser, what are you talking about, Martin? The image is right there. But if you look at the DOM, it absolutely isn't there. It is just a CSS thing that has been loaded to style the page.

30:45So if you have a content image, 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, it is part of the content, and then Image Search can pick it up, and then we can understand the connection between the content and the image and these kind of things. That's the huge difference. So if you use CSS for all images, as long as they're entirely decorative and the content would work just as well without them, cool.

31:29If they are an integral part of the content, like a news story, look at how the market is responding to the news of blah, blah, blah. And then like an image of stocks going up or down. That's part of the content. That's not decoration. Okay. Okay. So I don't know. like this just came to mind like what about what do you think about something like stock photos that are added to a page to just decorate it could you consider those to be decorative or you could them to be indexed i i mean you're probably not going to get them indexed because probably the stock website has them indexed first and we understand that you're using a stock photo which is just a copy of this other photo i guess am i right yeah right that's what is probably going to happen yeah um so you're not going to get as much benefits from it but then again from a semantic point of view like the meaning is still like this is this image is not mine it's a stock image that we bought or licensed but it is still part of the content i i personally think okay now that makes sense like okay so i i think fundamentally stepping back a bit it's almost like that philosophical divide of CSS should be for the styling, and anything content related should be in HTML.