Home/ Questions/Q 8653709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:36:32+00:00

Let’s suppose I use some onload animation for my pages, for example: $(document).ready(function() {

  • 0

Let’s suppose I use some onload animation for my pages, for example:

$(document).ready(function() {
    $('html.myhtml').css('overflow', 'auto').fadeTo(0, 0, function() {
        $(this).css('visibility', 'visible').animate({
            opacity: 1
        }, 200);
    });
})​

and start with an inline style to make it hidden in the first place:

<html class="myhtml" style="visibility:hidden; overflow:hidden">

Initially the page would be served as blank, and then animated with fadein. I want to know:-

  • Does this affect the SEO in any way?
  • Is this practice fine or are there some weighty arguments not to do so?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Does it effect SEO?

    If I had to answer this with a yes or no answer then I’d say: NO

    Is this practice fine or are there some weighty arguments not to do so?

    We could argue about the animation all day and still not have for sure answer. What purpose does an animation fade have for a search engine? None. So hence its supposedly for the user’s enjoyment? What purpose does an animation fade have for a user? None. So if we go with the ‘Design for users not for search engines’ model I would probably remove the animation. This is my opinion.

    Back to the SEO question, does it effect SEO? Not really no but that depends on the search engine and your audience. If I am a person who uses a screen reader I may not benefit from your page as my screen reader will fail. If I have javascript disabled it will hurt my user experience (I personally browse with FF NoScript plugin).

    I know you said users without javascript have no business on your site but nonetheless you should take this into account and handle it somehow. Also Googlebot does not have javascript or session cookies enabled while it crawls. Secondly if one of your js fails you may want it to gracefully fall back to something useable for the user or at least some instructions letting them know like ‘Welcome! We have fancypants animations going on here that your browser doesn’t support! Please enable javascript’.

    Forced animations in general are annoying to a user, especially when they are repeating every page load. Adding page load is bad for Google SEO since speed is now a factor in ranking.

    Like I mentioned the main Googlebot does not crawl with javascript enabled or session cookies. They have different crawlers for different purposes, like some just for mobile and some for js and some for flash. It is worth noting that having an animation/popup/or anything on load will be captured by ‘Google Instant Previews’ and shown to the user in the results (in your case it might look like a blank page). And like WDever mentioned, in general it is safer to use text-indents or negative margins as your initial state rather then visibility/display/overflow for this sort of thing.

    This is how I would do it (here’s a live preview with 4 second animation delay to test with and without js enabled): 

    <html>
<head>
<style>
.myhtml {visibility:hidden; overflow:hidden;}
</style>
<script>document.documentElement.className='myhtml'</script>
</head>
<body>

 1. html is not hidden initially and no class
 2. css styles register .myhtml class with the hidden stuff you want
 3. the script tag just before the BODY tag will fire and add the class to html thus hiding things for those with javascript enabled. Everyone else who has JS disabled sees the page properly.
 4. at the bottom of the page your jquery fires animating the page

<script>
$(document).ready(function() {
    $('html.myhtml').css('overflow', 'auto').fadeTo(0, 0, function() {
        $(this).css('visibility', 'visible').animate({
            opacity: 1
        }, 200);
    });
})​
</script>
</body>
</html>
    • 0