Menu
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:-
395
It won't effect it. I have personally tested google bots readings via microdata due to an identical concern. Google now actually has visibility into javascript interactions to some degree, and even swf files. So you should be in the clear.
85
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>
I think you should register to Google Webmasters Tools. Then find a function called "Fetch as googlebot" now let google go and fetch your desired page and see if it finds any error or unusual behavior or it is not showing what you have anticipated for. If that is the case you can be sure that there is something wrong with your page and google will tell you what problem it faced while crawling your page. Then it's a matter of rectifying your problem.
Edit: The main issue of search engines with javascript is that js create barriers in getting and reading content from pages. To be specific, this problem arises mostly when there is no content on the actual page and you use js to fetch content from somewhere else (hence ajax seo problems). So one should be concerned about putting content on pages instead of fetching from somewhere else.
So one should also test their pages with js and css turned off and see how their pages look like when google and other search engines see your pages. So after all that fancy animation, fetching and other stuff if google is still able to read, crawl and index your pages than I will not worry for a second and neither should you. After all if google is fine, we are more than fine.
33
I'll suggest that you take a look to :
http://searchengineland.com/google-io-new-advances-in-the-searchability-of-javascript-and-flash-but-is-it-enough-19881
33
As far as I am aware, Google only recognizes the initial state of the page. This includes CSS rendering, for example, if you add display:none; or visibility:hidden;, I don't think Google will index it.
To be safe, I'd hide the content on load, and then fade it in. I have not really tested it, but I have never seen Google's bots interact too well with JavaScript. An exception seems to be while using the hashbang method.
Another bonus to this method, will be that users with javascript deactivated (I know, duh), will still be able to see your content, as it won't be hidden in the first place.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
