Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MindGamer

SEO and GSAP

Recommended Posts

General question about SEO and GSAP

 

I frequently use GSAP to fade-in elements on a page. The elements will typically start with a default CSS opacity set to 0.  I'll fade the elements in by tweening the opacity to 1 using GSAP once the DOM has loaded (by using jQuery .ready() or whatever framework I'm working with).

 

I'm just starting to wonder if I'm taking a hit to SEO when I do this?

 

Does anyone know if this technique constitutes "hidden content"?

 

I know that Google supposedly spiders with Chrome and executes Javascript along the way, but what I'm not clear about is whether or not Googlebot takes the requisite time-delay / fade-in into account. 

 

Does anyone have any experience with Google penalizing a page for hidden content if the content is faded into view after the page-load has completed?

 

Thanks

 

Link to post
Share on other sites

I've never heard of someone getting penalized for that, but I'm really not sure. I'm not an SEO expert by any means. Maybe someone else can chime in who has more experience. 

Link to post
Share on other sites

I will just suggest you to search how google treats hidden text and content, some articles say they devalue the hidden content but from personal experience completely hidden links still get indexed. Personally, I hide everything using CSS and then I use another CSS file inside noscript tag to keep content accessible which should have some positive effect on SEO.

  • Like 5
Link to post
Share on other sites
58 minutes ago, Sahil said:

I use another CSS file inside noscript tag to keep content accessible which should have some positive effect on SEO.

 

CSS inside noscript... Good idea. I never thought of that. Thanks.

 

 

 

  • Like 1
Link to post
Share on other sites

One of the sites I am working on has fade in animations and uses css .animin{visibility:hidden} and then TweenMax.set(".animin", { visibility:"visible" }); to stop flash of content before the javascript is loaded. 

I can confirm that this text is currently NOT being indexed by Google. (The other non-animated pages are fine)

 

I will try adding a <noscript> style to see if that helps! Will post the results

 

Anyone else had experience with this issue?

 

Update:

test1: I added the <noscript> style and now googling text from the page in quotes returns the correct page. The only thing is that there is no bold highlighted copy in the SERP preview, it just shows the meta description. Not sure of the implications of this?

test2: Removing the .animin class from the text returns the correct page when searched, no SERP bold preview text

 

I'll wait and see if test1 results change

 

Update2:

I can confirm that text that has been 'splittexted' is not being indexed. I have used this, I assume that will help :)

onComplete: function(){$splitTxt.revert()}

 

Update 3: 

Any SplitText text is still not indexed in Google, even after an onComplete:revert(). Anyone else come across this issue before? 

 

Edited by vektor
add more test results
Link to post
Share on other sites

Anyone found a way around this splittext indexing issue? About to start a new project & don't want to not use splittext...! :)

Link to post
Share on other sites

@vektor I had concerns and this is the satisfying answer I got 

 

  • Like 1
Link to post
Share on other sites

"But, you could choose to execute/not execute certain scripts based on the reported user agent. User a server side script to put a class on <html> And then use the presence (or not) of that class as a hook in your script."

 

Interesting, I will have to test this

Link to post
Share on other sites

SEO would be affected if your using the CSS property display: none, visibility: hidden or even high negative or positive text-indent on your H1 or main content.

 

But having elements use opacity will only hurt your SEO with a very important exception. As long as your not using display: none, visibility: hidden, or a high text-indent value on your main content, then I wouldn't worry about it. 

 

Just be careful when using opacity, display: none, or visibility: hidden... to hide the important main content with your main search keywords and H1 tag.

 

So be mindful that you could get lower ranking when its your main keyword content! Since first Google will parse the HTML, and then will parse the rendering of it with the CSS and JS.

 

But you can always use Google PageSpeed Insights if you really need to test your webpage to see if Google reports that it doesn't like a specific thing your doing as far as hiding content.

 

https://developers.google.com/speed/pagespeed/insights/

 

Happy Tweening! :)

 

 

  • Like 5
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×