How Does Google Handle CSS + Javascript "Hidden" Text?

Does Google treat text kept behind "read more" links with the same importance as non-hidden text? The short answer is "no," but there's more nuance to it than that. In today's Whiteboard Friday, Rand explains just how the search engine giant weighs text hidden from view using CSS and JavaScript.

Click on the whiteboard image above to open a high-resolution version in a new tab!

Video Transcription

Howdy, Moz fans, and welcome to another edition of Whiteboard Friday. This week we're going to chat a little bit about hidden text, hidden text of several kinds. I really don't mean the spammy, black on a black background, white on a white background-like, hidden text type of keyword stuffing from the '90s and early 2000s. I'm talking about what we do with CSS and JavaScript with overlays and with folders inside a page, that kind of hidden text.

It's become very popular in modern web design to basically use CSS or to use JavaScript to load text after a user has taken some action on a page. So perhaps they've clicked on a separate section of your e-commerce page about your product to see other information, or maybe they've clicked a "read more" link in an article to read the rest of the article. This actually creates problems with Google and with SEO, and they're not obvious problems, because when you use something like Google's fetch and render tool or when you look at Google's cache, Google appears to be able to crawl and parse all of that text. But they're not treating all of it equally.

So here's an example. I've got this text about coconut marble furnishings, which is just a ridiculous test phrase that I'm going to use for this purpose. But let's say I've got page A, which essentially shows the first paragraph of this text, and then I have page B, which only shows part of the first sentence and then a "read more" link, which is very common in lots of articles.

Many folks do this, by the way, because they want to get engagement data about how many people actually read the rest of the piece. Others are using it for serving advertising, or they're using it to track something, and some people are using it just because of the user experience it provides. Maybe the page is crowded with other types of content. They want to make sure that if someone wants to display this particular piece or that particular piece, that it's available to them in as convenient a format as possible for design purposes or what have you.

What's true in these instances is that Google is not going to treat what happens after this "read more" link is clicked, which is that the rest of this text would become visible here, they're not going to treat that with the same weight that they otherwise would.

All other things being equal

So they're on similar domains, they have similar link profiles, all that other kind of stuff.

• A is going to outrank B for "coconut marble furnishings" even though this is in the title here. Because this text is relevant to that keyword and is serving to create greater relevance, Google is going to weight this one higher.
• It's also true that the content that's hidden behind this "read more" here, it doesn't matter. If it's CSS-based, JavaScript-based, post load or loaded when the HTML is, it doesn't matter, it's going to be weighted less by Google. It will be treated as though that text were not as important.
• Interestingly, fascinatingly, perhaps, Bing and Yahoo do not appear to discern between these. So they'll treat these more equally. Google is the only one who seems to be, at least right now, from some test data — I'll talk about that in a sec — who is treating these differently, who is basically weighting this hidden content less.

Best practices for SEO and "hidden" text

So what can we discern from this? What should SEOs do when we're working with our web design teams and with our content teams around these types of issues?

I. We have to expect that any time we hide text with CSS, with JavaScript, what have you, that it will have less ranking influence. It's not that it won't be counted at all. If I were to search for "hardwood-like material creates beautiful shine," like that exact phrase in Google with quotes, both of these pages would come up, this one almost certainly first, but both of these pages would come up.

So Google knows the text is there. It just isn't counting it as highly. It's like content that isn't carrying the same weight as it would if it were visible by default. So, given that we know that, we have to decide in the tradeoff situation whether it's worth it to lose the ranking value and the potential visitors in exchange for whatever we're gaining by having this element.

II. We've got to consider some creative alternatives. It is possible to make text visible by default and to instead have something like an overlay element. We could have a brief overlay here that's easily close-able with a message. Maybe that could give us the same types of engagement statistics, because 95% of people are going to close that before they scroll down, or they're going to receive a popover message or those kinds of things. Granted, as we've discussed previously on Whiteboard Friday, overlays have their own issues that we need to be aware of, but these are possible. We can also measure scroll depth by doing some JavaScript tracking. There's lots of software that does that by default and plenty of GitHub repositories, that are open source, that we could use to track that. So there might be other ways to get the same goals.

III. If it is the case that you have to use the "read more" or any other text hiding elements, I would urge you to go ahead and place the crucial information, including the keyword phrases and the most related terms and phrases that you know are going to be very important to rankings, up in that most visible top portion of the page so that you maximize the ranking weight of the most important pieces rather than losing those below or behind whatever sorts of post-loading situation you've got. Make those the default visible portions of text.

I do want to give special thanks. One of the reasons that we know this, certainly Google has mentioned it on occasion, but over the course of the last few years there's been a lot of skepticism, especially from folks in the web design community who have sort of said, "Look, it seems like Google can see this. It doesn't seem to be a problem. When I search in quotes for this text, Google is bringing it back." That has been correct.

But thanks to Shai — I'm sorry if I mispronounce your name — Aharony from Reboot Online, RebootOnline.com, and I'll link to the specific test that they performed, but they performed some wonderful, large-scale, long-term tests of CSS, of text area, of visible text, and of JavaScript hiding across many domains over a long period and basically proved to us that what Google says is in fact true, that they are treating this text behind here with less weight. So we really appreciate the efforts of folks like that, who go through intense effort to give us the truth about how Google works.

That said, we will hopefully see you again next week for another edition of Whiteboard Friday. Take care.

Video transcription by Speechpad.com