One SEO professional asked John Mueller about content hidden with JavaScript.
Their main question was: they have let’s say – they have an HTML page. Some parts of that page are hidden by the CSS Display: none property.
When a user first lands on the page that is hidden, for some reason – perhaps to simplify the user interface.
The hidden content can only be seen when a user clicks the button and the JavaScript runs just JavaScript Quick Events, and the JavaScript will change the status of the CSS, and then the user finally sees the content.
So their question is: this looks a bit of like a gray area for them because Google can never run any JavaScript event.
They wonder if the content that is hidden by the CSS, when a user first lands on a page, can be the target for Google evaluating the site or not?
John explained that this content can still be indexed. So long as the content is in the HTML itself and the DOM (document object model) when the page is loaded, then Google can use that for indexing.
If this is something that needs a JavaScript event to then fetch something from the server, then display that, then this is not something that they would recognize.
But, so long as it is in the DOM, and if it is in the HTML, then it just goes from being hidden to visible, and this is perfectly fine.
This happens at approximately the 49:16 mark in the video.
John Mueller Hangout Transcript
SEO Professional 8 49:12
Hi, John. I have a question that will be a little bit similar to the one you answered earlier. But it’s regarding HTML and JavaScript, the classic one. And I have let’s say I have an HTML with- there are some parts of that which is hidden by CSS display none. And when a user first land on a page that is hidden, for some reason, [INAUDIBLE] to simplify the UI. And that hidden contents can be only seen when a user clicks the button and then the JavaScript runs just JavaScript QuickEvents runs and JavaScript, changes the status of the CSS and then the user sees the contents. So my question is it looks a little bit of a gray zone for me because Google can never run any JavaScript event. So I wonder if the contents which are hidden by CSS, when a user first lands on a page, can be the target to the Google evaluation or not?
John 50:16
It can still be indexed. So that’s something if it’s in the HTML itself in the DOM, when the page is loaded, then we can use that for indexing. If it’s something that needs a JavaScript event to then fetch something from the server, and then display that, then that’s not something that we would recognize. But if it’s in the DOM, if it’s in the HTML, and it just goes from being hidden to visible, that’s, that’s perfectly fine.
SEO Professional 8 50:48
Okay, so is is a variation would be the same as the one that is not hidden, or…
John 50:53
Probably. I mean, it’s always hard to compare, like how things will rank in, kind of in the end, but my assumption is that it would be pretty much the same. I think it’s also something from a user point of view, you might want to watch out for, and that’s more kind of like when someone goes to your webpage, and after, after it’s been shown in search. And that is essentially that if you’re promising the user something, it’s a good idea to show the user that when they go to your webpage. So we apply that when it comes to things like intrusive interstitials, or kind of like too many ads on a page. If they go to your page, they should be able to find what they were looking for. And if this is additional content that you’re providing, which is not the primary reason why they’re going to your page, then that’s fine. That’s kind of like a usability way to give more functionality to a page. However, if the primary content is blocked like this, then that’s something where I would expect the users to be a little bit unhappy if they go there and they don’t realize, oh, this is how I get that piece of information.
SEO Professional 8 52:10
Okay, so what would be the case when we see the contents to the user from the PC and never can see the contents from the smartphone? With–actually the element itself is embedded on HTML, but hidden, and the user can never have the chance to undo the hidden?
John 52:33
I don’t think we would separate that out. Because sometimes that’s also just the usability mechanism that sites use where you have essentially a responsive design and within the responsive design setup, for certain screen sizes, you hide something like the sidebar, and from our point of view, that’s fine.
