Hiding content until user scrolls - Will Google penalize me?
-
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
-
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.
-
Interesting, far enough I suppose. Would certainly hold me back from making webpages a lot less visually appealing.
-
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
-
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.
-
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.
-
True, but won't tell me easily if it's given less weighting.
-
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.
-
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.
-
This is my understanding too, Laura. It has proven frustratingly difficult to find a definitive answer to this question!
-
Google will probably index it, but it won't be given the same weight as content that's immediately visible.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
What website changes (technical) SEOs can ignore confidently? Google's perspective!
Hi community members, I am looking after SEO at our company and there are lots of changes happening about our website; especially technical changes. It's hard for me to look after every deployment of the website like change of server location, etc. We generally agree that every change related to website must be notified by SEO to understand the ranking fluctuation and how search engines welcome them. I just wonder what technical deployments of a website I could confidently ignore to save time and give a go ahead to technical team without interrupting or waiting for my approval. Thanks
Web Design | | vtmoz1 -
Will HTTPS Effect SERPS Depending on Different Page Content?
I know that HTTPS can have a positive influence on SERPS. Does anyone have any thoughts or evidence of this effect being different depending on the page content? For example, I would think that for e-commerce sites HTPS is a must, and I guess the change in rankings would be more significant. But what about other situations, AMP pages for example? Of if you run Adsense, or Affiliate links? Or if your page contains a form?
Web Design | | GrouchyKids1 -
Google text-only vs rendered (index and ranking)
Hello, can someone please help answer a question about missing elements from Google's text-only cached version.
Web Design | | cpawsgo
When using JavaScript to display an element which is initially styled with display:none, does Google index (and most importantly properly rank) the elements contents? Using Google's "cache:" prefix followed by our pages url we can see the rendered cached page. The contents of the element in question are viewable and you can read the information inside. However, if you click the "Text-only version" link on the top-right of Google’s cached page, the element is missing and cannot be seen. The reason for this is because the element is initially styled with display:none and then JavaScript is used to display the text once some logic is applied. Doing a long-tail Google search for a few sentences from inside the element does find the page in the results, but I am not certain that is it being cached and ranked optimally... would updating the logic so that all the contents are not made visible by JavaScript improve our ranking or can we assume that since Google does return the page in its results that everything is proper? Thank you!0 -
New Google SERPS design - What's Changed?
Has anyone noticed any fall out from the recent redesign of SERP pages by Google? I noticed that there appears to be one less organic result "above the fold" now, so if you were possibly in third or fourth position maybe slight dip in traffic? Any noticeable shift in click through rate with the new bigger font? Also, has anyone noticed if the new design has caused any shift in best practices for on-page meta data like Title tag and description tag counts? I know the Title tag was previously driven by the pixel width of the title in Google SERPS, just curious if that has changed with this redesign.
Web Design | | IrvCo_Interactive0 -
Why is Google Webmaster suddenly started showing hundreds of HTML Improvements
Why is Google Webmaster suddenly started showing hundreds of HTML Improvements I mean to ask, my hundreds pages are been shown as duplicate - despite canonical marked correctly Below are sample url - which are been crawled in own way. I have rechecked canonical tag - which is correct as URL - 1, in all 3 url Do i need to worry about anything or shall i presume its a flaw from search engine to report this as an issue (This only pertain to Forum section) http://www.mycarhelpline.com/index.php?option=com_easydiscuss&view=post&id=1683&Itemid=78 http://www.mycarhelpline.com/?id=1683&Itemid=78&option=com_easydiscuss&view=post http://www.mycarhelpline.com/index.php?option=com_easydiscuss&view=post&id=1683 ps - i know these are dynamic url and not sef friendly url, but its been 3 yrs and , due to our ignorance and site builder took advantage of this. now - nothing can be done much to make them sef friendly as site has several thousand pages and touchwood - these dynamic url are not impacting much
Web Design | | Modi0 -
Joomla! Site Returning 12000+ Duplicate Content Errors! W Image
(I do award "Good Answer" and "thumbs up" to responses as earned) I have tried to ask this question previously (maybe not correctly). I have a client that I am doing the on and offsite optimization and the MOZ report is kicking back major errors. I have examples below. They all seem to relate directly to rokecwid and ECWID. Is there ANY solution to fix this? Is this hurting the rankings Since I didn't build the site, I am having to tell the website company what to do when I need changes made to code, etc... I am also not very proficient with Joomla! and my web engineer is one of those closet coders (the best kind to have) and doesn't communicate in a way that a "layman" could understand. He pointed out several issues with the HTML but I don't think that is related to this below. Can anyone tell me what to tell the web company that built this site to get rid of these errors? A very small sample of the urls w errors:
Web Design | | Atlanta-SMO
http://www.metroboltmi.com/shop-spareparts?
Itemid=218&option=com_rokecwid&view=ecwid&ecwid_category_id=3560097
1 14 1 http://www.metroboltmi.com/shop-spareparts?
Itemid=218&option=com_rokecwid&view=ecwid&ecwid_category_id=3560098
1 1 0 http://www.metroboltmi.com/shop-spareparts?
Itemid=218&option=com_rokecwid&view=ecwid&ecwid_category_id=3560099
1 14 1 http://www.metroboltmi.com/shop-spareparts?
Itemid=218&option=com_rokecwid&view=ecwid&ecwid_category_id=3560100
1 14 1 SEOMOZErrors_zps3a1ce2a2.png0 -
Hey, So I know wordpress is built with a user capability, but what about databasing custom user data?
Hi everyone, so I am working on a project with a friend of mine, without getting into too much detail, here's the problem. We need users to sign in, then for instance, click a button, and then have that action record a value of 1 in a database on our server (preferably accessible through the wordpress admin interface, and in .csv format so that we can make it easy to work with) Any help with databasing, or if wordpress is already built with SOME database technology, etc, etc For instance, SEOmoz's "mozpoint" system.. Wordpress comes built with the ability for users to log in and have profiles with special access, etc, but does it have the ability to log points and values to a specific user as well? Where should I look? What should I google to figure out options? Who could I call / hire?
Web Design | | TylerAbernethy0 -
Content Stacking - CSS positioning
I was curious to know what everyone thinks about CSS positioning so that the spiders will read a optimal bulk of content first - before it reads the others. Say I have some Tab's set up for navigational purposes, where the content in the last tab is actually what I want the bots to see first. What would be the best practices for accomplishing something like this?
Web Design | | imageworks-2612900