This is part of a test series that tested if hidden content with Javascript tabs are read by Google and are considered when ranking a page. For this particular test, hidden content with Javascript tabs - Internal OnClick JSON are tested.
Test Downloads
Transcription below:
So this next test, I'm gonna actually fly through them pretty fast. But they had to be on individual things because they were in it's different code.
Now, when I asked Hunter to set these tests up, I wanted to make sure that you had the code so you can go in there and duplicate it. And if you wanted to implement this stuff on your own, on your websites, so what we're looking at is using JavaScript and to create tabs. And these tabs are, if you remember back in the past, we talked about hidden content doesn't work and stuff when we tested tabs, carousels and all that stuff.
Well in this case, where it says JavaScript in and I found someone else who did it. And the tests that they wrote up, it was interesting, it gave us good inspiration. But it didn't give us the how. And the Hunter is really good programmer and really good web developer.
He came up with how they did it, figured it all out the technical side. And he provided all the code for you for each one of these tabs that he created. And essentially, it all looks like this, right here. Let me open that in a new window.
There you go. So they all look like here. And if you look at it, it'll move around. And we're trying to figure out are these index, right and for the longest shortest, these are all essentially hidden content, right?
We want to know if Google's going to read all this hidden content that's not split on a page, and it's going to improve your rankings. And so he created all those different types and all the code is in here for you, if you want to mess around with it. If you don't know what you're doing, just get to where it's called code bucket. Let me open this up. And where is it called? specs. Go over here, there's navigation, click this. Code pins, alright.
You can go in and you can copy the CSS and the JavaScript offer the tests. And you can get this and actually duplicate it and do it all and check it out yourself if you want to and code pen is free. The code is here for you. It's not hard. And you can just play around with it.
If you want to find some just some interesting ways to get some extra stuff on there without bloating your page up with a whole bunch of stuff, right? So with that, we want to see which one of these models are indexable and which ones are not.
So in this case, the static means that the words stay the same, and then overrides if you push a button that changes the text that's in there in the thing, and that is indexed. So static was didn't get indexed in this particular test and the overrides which was kind of interesting. The next one is external JSON static didn't get indexed and the override did. So the text remained the same.
Google didn't rank it for the page based off the test keyword until the JSON actually changed it. And then Google saw that there was something different. And then it ranked the page. which is again, that's really interesting and almost consistent.
Here's another one, this is unclick JSON static, state index, but the overrides didn't, which was just missing. I think it's because of the on click versus this. So this one would always be in there. And I don't know that the algorithm or the Googlebot would actually click it and change.
So if it doesn't click it, it doesn't see this other version. So Aereo, it's not indexed. This one is static did not but the override did. This one iframe with robots love mean, follow. I think he set it up here. It's in the head of the descriptions, there it is robots index, do follow the iframe set up in this way did not index. And then the iframe with the robots hate, follow, No index, no follow. It didn't index either.
If you're thinking about the iframes with JavaScript and CSS, probably a bad idea to do that is the takeaway out of there. So again, the idea behind this is to learn about these different models, things that you can do. And these are essentially buttons away, we have them set up. And you can create these on your page.
You can even do small ones, if you wanted to and set up a little section just like this, with all this information that will pop a button or whenever it's not on the page doesn't take away from your conversions and stuff. But it does provide you with some good SEO food to increase the rankings of the page.
From an e commerce perspective, having 3 or 4 of these or having something like set up like that, underneath, and then this little thing here, under your product descriptions is a good way to increase the value and get your page ranking for related terms that may or may help you address the product uses or you can even leverage this to put individual FAQs.
In here, the FAQ schema does help rankings when you put when you write that out. And so there are some practical uses for this. In particular, if you're not violating Google's terms, by doing this, this is a blackhat by any means of the imagination. This is a function of the internet. And now you know which ones are being read by Google and which ones are not.