I put a bit of jQuery on my site, animating the links in my art portfolio section. Check it out. I really like jQuery actually, it looks nice, and its a great way to liven up a site’s visuals without using Flash and losing all that SEO.
The problem is that jQuery, which is essentially JavaScript, is also not very SEO friendly. You can use it pretty much the same way as Flash, in limited quantities where you don’t care about searchability. However, when you want to make it SEO friendly, it operates pretty similarly to AJAX. Basically, you don’t want jQuery to be the only way you access any content. Any content that is accessed with jQuery also needs to have hard links, anchor tags with the href to make the search engines happy. These anchor tags need to be in the HTML source, again not called by JavaScript.
In my site, I made a way to search through my portfolio using jQuery. It’s really nice and quick. Pages load in a flash because I decided not to use AJAX to load the content of each page on the fly, because of the screen flicker this causes. Rather I preload all the pages into hidden divs. Since I don’t actually want these hidden divs to be spidered, I ended up using AJAX, although this is called on page load. Also the AJAX is processed serially, meaning each xmlhttp object in turn processes the next call (I did this in a pretty nice way with an increasing variable in a single function).
The user ends up having to load all the content in my portfolio (images and HTML). However, since most of the content is hidden, this process is relatively behind the scenes, unless the user is looking at the progress bar. But regardless of how surreptitiously the page loads, there is still the bandwidth issue of them downloading all these pictures. Also it ruins my reporting software, I’ll have to put in mini reporting AJAX calls with each JavaScript click if I want this reporting back.
On the upside, when the AJAX loads the content into the hidden divs, it turns out it was pretty easy to link up with the content management system I programmed. I made a new PHP page that spits variables to the CMS, and this page is what the AJAX calls hit. It’s a good way to do it, since I can put the cache control stuff on this one PHP page, but leave it off of the permalink pages.
I really like working with jQuery. It works in the same way I think, in a node based structure. Since I am well versed in CSS and JavaScript, jQuery is second nature to me, and I really can’t get enough of all the methods to select HTML objects. For this reason alone, jQuery is here to stay in my development skill set.
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Dear Jon,
I followed a tutorial from http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ to build an accordion with jquiery. However the accordion does not work on IE6, which is a real shame. I went back to the webdesignwall.com to read the blog in hope to find a solution and spotted your reply where you suggested the following:
To answer Miami Web Design's question, you can attach the hover stuff in jQuery with .hover(). This would be called in the same way as .click(), for example:
$("label").hover(function() {
$(this).addClass("hoverClass")
});
This works just fine in IE 6.
in order to make it work for IE6.
Please can you help me here as I am not very familiar with javascript and jquery in particular Where would you add this bit of script?
Your help will be greatly appreciated.
Many thanks
Nevena
Hi Nevena,
Sorry you’re having IE 6 problems.
The jQuery script I referenced in that posting is used to attach a CSS class to an element on mouseover. The purpose is to avoid using the :hover pseudo-class, which often breaks in IE 6.
To attach it, put this in between script tags anywhere on the document:
$(document).ready(function(){ });This jQuery script waits for the document to fully load (or become ‘ready’) and then attach the hover property. In my example the hover property will be attached to any label elements, but if you wanted, for example, to attach the hover to anything with a CSS class of “example” you would use:
$(document).ready(function(){ $(".example").hover(function() { }); });Good luck jQuery’ing. I think it’s a really awesome library, and hope you will too.
-jr
I must agree that JQuery animation is in fact not very friendly because as soon as you start animating, hiding div’s etc it becomes difficult for a spider to pick up the content and because code is always different, spiders have to crawl the standard DOM which may be hidden with css and various effects. Flash is still the most effective literal animation tool and JQuery is fun yet not as simple.Google is not strong when is comes to crawling JQuery actions based on events.
Just wanted to put in my two cents on this issue – a client of mine quoted this blog post as concern that some jQuery we’re using might not be “SEO Friendly”, and I find this post to be slightly misleading.
jQuery animations do not affect SEO. Search engine spiders DO NOT use javascript – anything hidden or animated by jQuery and CSS is still clear as day in the code, which is the only thing a search engine spider sees. The only thing a spider will not pick up on is content loaded after the initial page load using AJAX. An easy way to determine what a search engine spider can see is to View->Source and look at the raw HTML code.
Please don’t place javascript on the same level as flash. jQuery is a much better alternative and it is very SEO friendly. Hope this helps anyone out there who is concerned about it!