Shimon Sandler

Making jQuery SEO Friendly

Ajax on Rails For web developers and other programmers, needing to adapt to the latest methods and search engine friendly techniques, jQuery requires careful study and evaluation. Since its release in 2006, jQuery, an open source, cross-browser JavaScript library, has steadily grown in acceptance and popularity to the point that it’s now the most popular JavaScript library available. In fact, BuiltWith Trends, in posting its usage statistics on various web technologies, identifies jQuery as the hottest web development tool, both in usage and growth rate. Found in some of the most visited sites on the entire world wide web and growing in popularity and acceptance, jQuery has clearly emerged as a technology to reckon with now, and going forward.

Most attribute its growth to jQuery’s success in achieving its overall goals. Born from a desire to simplify programming and especially web development, jQuery has won champions and adherents by delivering on its promise to streamline HTML document traversing, event handling, animations and AJAX interactions while remaining lightweight and compliant with industry standards, such as CSS3. In addition to the above characteristics, jQuery also enables the creation of Plug-ins: facilities that allow developers to create concepts for low-level interface and simulation, high-level theme-able widgets, and advanced effects. This deepens and heightens the dynamism and power of web sites.

But as with so many things, there’s a down side. For all of the flashy tricks and easy effects jQuery helps you incorporate into your designs, it can also render your creation virtually invisible. Because it automates and streamlines much of the coding and content handling that goes into making a web page viewable, jQuery holds much of the data that search engines use in retrieving pages out of the view of spiders. Spiders are little agents that the search engines use to locate and point to the content markers they need to return meaningful responses to users. When spiders can’t find those content markers in your web page, then your creation won’t be included in the data returned in that search. This makes your web site very hard to find.

Consequently, programmers need to know techniques and tricks to keep important markers in view of the spiders and search engines while still availing themselves of the advantages of automating coding with jQuery. There are a wide variety of ways to alter your coding to accommodate the needs of SEO, and several will be presented below; but these are far from definitive or exhaustive. Web development, and programming in general, consists of so many variables that there will always be multiple answers to any programming question.

Remember that the overall point is to bring content important to SEO to the forefront, by unlocking it from inside the JavaScript, or jQuery. One way to accomplish this is by embedding multiple hard links and anchor tags with the href. But for this technique to work you have to place the links in the HTML source, not called by jQuery. In the example, there is a link to the author (John Raasch, a freelance web designer who blogs on web development topics) who describes some of the tradeoffs in play with AJAX and jQuery, as he works to maintain usability and SEO in his web site development portfolio. Briefly, he recommends using jQuery and multiplying the anchor tags. Then, to accelerate page loads, he uses hidden divs; a technique that works, but jeopardizes his page metrics reporting.

Tim Nash, a writer and consultant in various areas of web development, wrote a post on the use of jQuery and tricks for keeping content indexable for the search engines. In his post, he presents several jQuery plug-ins that can aid in making jQuery SEO friendly . Nash starts by describing methods of web development and comparing them. In general, he espouses what he calls progressive enhancement, in which the programmer builds the pages to the lowest common denominator and then adds enhancements. This will keep all of the relevant data accessible to search engines and therefore make the page easier to find on the web. The alternative, that he suggests is likely to result in burying your design, he calls graceful degradation.

Multiple posts point to additional means of preventing content in jQuery calls from remaining invisible to SEO spiders. Here’s another one from David Pirek, a designer/programmer in the New York metro area. His blog presents an overall approach to using jQuery, which he refers to as his favorite web development environment, and maintaining SEO techniques. He advises embedding the page you need to request in href. The spider will see the link as another page and index it, which makes it visible to search engines. He goes on to describe an enhancement to the technique: have your jQuery click and attach another parameter to the query string. This lets the page know when the call is coming with JavaScript enabled and when it’s not, which in turn allows the designer to add page properties (title, Meta tags, styles and even further HTML if you prefer).

Here are a few other useful resources from around the web. First from Noupe – a site founded by Noura Yehia, and now belonging to Smashing Media – are 50 examples of designs aided by jQuery. Noupe’s mission involved bringing its readers information on new communication methods and technologies from around the web. To that end, they wanted to make their readers aware of the high quality work currently rendered by jQuery. Second: from the same source is a sampling of 45 jQuery plug-ins . Finally, here’s a roundup of tutorials on jQuery.

There are many techniques, resources and opinions regarding jQuery, but the general point remains the same: make your jQuery content crawlable and search engine friendly.

Photo credit: chrisglass

Be Sociable, Share!

Comments

  1. Interesting article. I will test my jQuery code

  2. So, in this year (2013) are they still using Jquery to develop the home page or landing page and as in SEO aspect ?

    I dont have Idea to use them anymore but after all I hope the HTML5 can do more for SEO.

Trackbacks

  1. [...] One might wonder if the collapsible DIV is search engine friendly since it is in Javascript. However, it can still be crawled by making jQuery SEO friendly. [...]

Speak Your Mind

*

*