Jump to content
Search Community

SEO and GSAP

MindGamer test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
Share on other sites

  • 11 months later...

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 comment
Share on other sites

  • 5 months later...

"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 comment
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 comment
Share on other sites

  • 3 years later...
  • 6 months later...

Great question! Utilizing GSAP for fading in elements on a page is a common practice to enhance user experience and engagement. Let's break down the implications for SEO. When using GSAP to fade in elements that start with a default CSS opacity set to 0, you're essentially making those elements hidden initially. However, this isn't generally considered "hidden content" in the negative sense from an SEO perspective. Googlebot does execute JavaScript and can interpret content that's revealed through interactions like fading in. Google has stated that they are capable of rendering and understanding modern JavaScript frameworks, including content loaded dynamically or through user interactions. So, the content you're fading in using GSAP should be visible to Googlebot and won't typically be penalized as hidden content. However, it's important to keep in mind that for the best SEO practices, crucial content that's vital for SEO rankings and indexing should be readily available in the initial HTML load. Fading in non-critical content, like visual elements or images, using GSAP after the initial load is generally safe and won't negatively impact SEO. In summary, while using GSAP to fade in elements won't typically harm SEO, it's always good to prioritize essential content in the initial HTML load to ensure it's easily accessible for search engine crawlers and users. Balancing SEO requirements with enhanced user experiences is the key to effective web development.

GetProspect's email verifier tool stands as a valuable resource https://getprospect.com/email-verifier , empowering businesses to maintain a clean, accurate, and up-to-date email list, contributing to the success of email marketing initiatives.

Link to comment
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.
×
×
  • Create New...