Hiding content until user scrolls - Will Google penalize me?

[Sam.at.Moz]

I've used: "opacity:0;" to hide sections of my content, which are triggered to show (using Javascript) once the user scrolls over these sections.

I remember reading a while back that Google essentially ignores content which is hidden from your page (it mentioned they don't index it, so it's close to impossible to rank for it).

Is this still the case?

Thanks,

Sam

[LauraSultan]

Google will probably index it, but it won't be given the same weight as content that's immediately visible.

[ChrisAshton]

This is my understanding too, Laura. It has proven frustratingly difficult to find a definitive answer to this question!

[Sam.at.Moz]

Is Google really that cleaver to look into my scripts folder and see that the content is actually shown on scroll, probably not, so I'm guessing as you've both suggested it may not be worth it.

I wonder if there's a better way of doing this other than using opacity.

[EGOL]

Grab a few unique phrases in what is not shown immediately to the visitor, then search for it in quotes.

Should answer the question fast.

[Sam.at.Moz]

True, but won't tell me easily if it's given less weighting.

[LauraSultan]

John Mueller addressed a similar question in a recent Google Webmaster Central office-hours hangout, and he was pretty definitive. The question was about text that's hidden behind tabs. He states that they see the hidden content but won't give it as much weight.

Here's the link - https://www.youtube.com/watch?v=zZAY-BwL6rU.  The question starts at 6:45.

Google does read JavaScript and CSS, and that's why they send warnings to webmasters if such files are blocked from googlebot.

[KaneJamison]

Hey Sam.

Is this for a visual feature, like making the content "appear" as the user scrolls? While Google is doing a great job of reading JS, my concern would be that this looks like cloaking or hidden text if the purpose is misinterpreted.

There may be safer ways to do this depending on what your goal is. Let me know and I can go from there.

[Sam.at.Moz]

Thanks Kane,

Yes, this is a visual feature to appear as the user scrolls.

Would love to hear if there is a better way.

Sam

[Sam.at.Moz]

Interesting, far enough I suppose. Would certainly hold me back from making webpages a lot less visually appealing.

[KendallHershey]

Hi,

An alternative approach would be to use http://michalsnik.github.io/aos/ library. It does not set the visibility: hidden or hide the content, but uses the concept of as the element is within the viewport it will apply the animation. Make sure to test AOS library though because it does set the opacity to 0 so feel free to test in a development environment and fetch as google using Webmaster Tools.

If you don't want to use the AOSjs library you can write your own Javascript (JS) library to detect if the element is within the viewport and add the CSS class from the https://daneden.github.io/animate.css/ library as needed.