GSAP and Google indexing (SEO)

[deVitae]

Hi all,

I fully understand that my question is way beyond what these public free forums can answer. However, I'm hoping that someone ran into these dilemmas before (or perhaps even ran some tests or found some case studies) or simply has better technical understanding of how it all works and could share their wisdom.

I also think that this topic is important for GSAP marketing as well. Not knowing how animations will affect the SEO is the main reason I haven't upgraded yet - and if I had to guess, I'm probably not the only one with such concerns. Most likely, I'll pull the trigger anyway, if only for animating ad oriented landing pages. But I would greatly appreciate any advice and thoughts on this matter, as I'm sure many others would too.


For example, if I want to animate H1 title, I have the following options:

• Set visibility/display to none and use gsap to toggle it.
• Set opacity to 0 and use gsap to change that.
• Set the initial position somewhere off screen and move it into view. The parent container could have overflow hidden, thus making the text invisible OR you could move the text by 100vh units down, ensuring that it's still on page and visible, just out of immediate view.
• Set the H1 color to transparent and use background-image property and gsap to create a linear gradient transition.

Is either one of these methods better than the others? Why?
 

Using Split text plugin that splits every letter/word into <span> elements deserves a separate mention. I found a thread from 2019 asking the same question and the answer from @Jonathan there seems to suggest that google bot reads the html BEFORE gsap kicks in and splits the text into spans/animates it. However, a few weeks after that thread was posted, Google introduced their new googlebot that is able to render javascript.

Original thread:

With this in mind, would google crawler ignore the fact that the content is hidden initially (opacity/visibility/offscreen - any difference to these methods?) and only see the content after the animation transforms the text (movement/opacity etc)? Or, because GSAP kicks in only after the content has been loaded, google bot won't be able to render its animations and instead see the content the way it was presented in html and css?

 

What I found so far on these forums, reddit and google seem to be quite old (5-10 years) and not really extensive. One suggested option was to use dynamic rendering for crawlers (https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering) but my assumption is that this would heavily impact the speed metric, doubling the webpage size as perceived by Google? Plus, this method seems very prone to errors?

 

 

Visible text VS hidden text - why it's important
Some case studies I found, suggest that Google values visible text more strongly than hidden (either via css or js - think accordions/tabs). Now, in terms of accordions, they are a necessity for UX and the negative effects can be somewhat lessened by using FAQ schema and <summary> & <details> semantic html tags.

My question, with animations, is whether the text/animated content is still treated as hidden if it comes into view (through opacity/transform/visibility or other methods) on scroll?

https://www.rebootonline.com/blog/hidden-text-experiment/ - case study showing that Google prefers visible text over hidden text.
https://www.searchpilot.com/resources/case-studies/seo-split-test-lessons-bringing-content-out-of-tabs - a case study showing that Google values shown content more strongly than that placed in tabs.

 

 

Content generated by interactive JS
Google stated that their crawler might not be able to render javascript that requires user interactions (such as click or hover). How would scrolltrigger animations be treated then, provided that Google's bot is able to render GSAP tweens? Let's say, I have a <H2> somewhere in the middle of the body, set to opacity: 0 and a tween that changes that opacity to 1 when it comes into viewport. Would Google see it in its initial state only (invisible)?


Would greatly appreciate any advice, insight, case studies, personal experiences or just thoughts!

 

[mvaneijgen]

I've not done extensive studies, but my philosophy is don't animate important content. I see a lot of designers new with tools go mad with power and animate everything on the page and this may look cool, but is a horrible UX for the visitor and  search engines might have some thing to say about content that is not visible on page load. 

 

I also know of the "google might use javascript", but as far as I know this was because of the rise of all the SPA sites (loading content with javascript) and google just wait and executes that javascript until there is content on the page. Don't quote me on this, but this seems logical to me. 

 

So how I design sites everything should be visible on page load (or it needs to be not important for the working of the site) and then progressively enhance the site with Javascript and mainly GSAP for the visitor mainly, but this will also apply to search engines. 

 

Hope it helps and happy tweening! 

[deVitae]

Thank you @mvaneijgen!

I completely agree.

 

However, I still think that it's vital to understand how animated content affects SEO. And, more specifically, how GSAP's animations are perceived - does Google bot generally ignore all GSAP's animations and see the content only as it is displayed initially in html and css?

There are always exceptions and certain content/pages can be more heavily animated to control all aspects of users' journey and perception  - think product presentations or specific About pages. For example: https://www.apple.com/airpods-3rd-generation/ or https://i2-camera.polaroid.com/

How to make the call which elements are safe to animate (and how), if one has no idea how each choice will affect the SEO strategy? This becomes even more important when dealing with clients who rely on search traffic to get users on their pages and then use design (including animations) to convert them.

For now, I'll be playing around with GSAP for my personal projects only and testing as much as possible but any large scale experimentation is outside my budget. And without having any idea how GSAP's animations are perceived by Google, I'm unable to recommend it to anyone (well, besides saying that "stuff will look pretty but there's a chance that no one will see it").


Essentially, I'm hoping that someone else ran into these same questions as I have and would be generous enough to share their experience and best practices discovered.

Will keep this thread "unsolved" if that's ok - perhaps someone else will have something to share or my experiments will yield at least some concrete results that I could share.

For now, all I could find was a video from 2017, where John Mueller "suggested" that partly visible content or content starting invisible and becoming visible when the rendering is finished, is treated as visible: 

So, with this in mind, it could be said the it's best practice to have content start at 0.5/0.7 opacity and animate to 1? Or have content sliding in from position only partly offscreen? Or have elements fully visible further down on page load and then use GSAP to do whatever you want with them as user scrolls down (for example: 

See the Pen gOqQGXP by vitaeludus (@vitaeludus) on CodePen

)?



 

[Cassie]

Hey! I missed this one, sorry.

You can see how google indexes a site here. Both as a visual screenshot of your page and also a text breakdown, that would give you a conclusive answer.

https://support.google.com/webmasters/answer/9012289?hl=en

I've never had any issues with animation - as long as the content is in the DOM on page load. But I haven't tested in a while. Would be interested to see your results.

 

[deVitae]

Thanks @Cassie!

Updating an old (and fairly stable rankings-wise) proof of concept website with GSAP animations right now. It's not going to be an extensive case study but the next time there's a core algorithm update, I'll come back to this thread to share any changes in the rankings (and potential reasons).

But would imagine that you're absolutely right, so long as the initial content on page load is fully visible, there shouldn't be any penalties.

Thanks again!

And just a personal suggestion, if I may: you might want to emphasise or at least mention this somewhere in the GSAP's sales pitch. I'm sure there are plenty of people who, just like me, have been conditioned that all animations are bad for SEO.