Does onclick animation affect SEO?

Question

We want to build the website with mind-blowing animations, but SEO is also important for us and I am wondering about the SEO effects in the case of CSS and JS animations.

Let's say we want to build the page with Gatsby.js or Next.js and add animations in Three.js. We know that the page needs to be loaded very fast, so we don't want to use animations on init. But let's say we want to have a switch button on the top of the website that will trigger the Three.js and CSS animations. Does it affect SEO?

Another example we will have a static website with no animations and a second website with the same content but with a lot of animations and no index tag (flexing purpose). So when the user will visit our website he will be able to see the link (no-follow) to the website on the subdomain with animations.

Any ideas on how to figure it out?

Answer 1

Googlebot doesn't click on anything or otherwise simulate user interaction (such as scrolling, hovering, or moving the mouse.) Anything you put in an onclick event will be effectively invisible to Googlebot and won't effect SEO directly.

Google is using a performance metric suite for SEO called web vitals. One metric in that suite is Cumulative Layout Shift (CLS) which measures how much content on the page shifts visually after it has been loaded. In some cases, animations could be mistaken for layout shift. Google uses "field data," that is data from the browsers of real users, to measure CLS for SEO. Even if Googlebot can't see your animations, a poor CLS score from actual users because of the animations could. You should measure CLS on pages with animations and make sure they don't hurt that metric.

On the plus side, if users like these animations, that could be good for SEO. Google likely uses some forms of user satisfaction metrics (such as bounce back rate) for rankings. In addition, users are more likely to share mind blowing content. When users create links to your site, that directly helps SEO. Animations that make your site more attractive and more usable are likely to help SEO in the long run.

A second website with the same content plus animations comes with its own set of SEO problem caused by duplicate content. Using nofollow on links to duplicate content isn't a great way to handle it. Instead of using nofollow I would recommend using rel=canonical tags to tell Google which version to index.