jQuery Spiderable Select Field

There is always a lovely balance to be had between the worlds of design and code, especially when it comes to balancing the wants and desires of the product owner, especially when factoring in search engine optimisation (SEO).

A recent project had a large SEO requirement which included the (mostly automated) optimisation of many thousands of pages across a vast number of brands and products. One of the key entry places for these optimised pages was however designed as a select field. Since search engine spiders don’t traverse forms this was obviously an issue so I devised a jQuery plugin to work round this issue.

• Get Source
• View Demo

Presenting jQuery Spider Select

Since the main requirement was a huge traversible list of brands I decided to start with just that (in the following examples I have used individual websites, but the original one was a list of web pages on one particular website).

Without JavaScript enabled (and what the search engine should see)

• BBC website
• Rick Huby
• Slashdot
• Amazon UK

What the regular user will see

The jQuery plugin simply runs through the ul and generates a list of URLs and link texts, then rebuilds these as a select field. Depending on the parameters passed the user will either just select a page and be taken there, or will click a button to navigate to the selected page.

• Get Source
• View Demo

How to use jQuery Spider Select

HTML

<ul id="whateverId">
	<li><a href="http://www.bbc.co.uk/">BBC website</a></li>
	<li><a href="http://www.rickhuby.com/">Rick Huby</a></li>
	<li><a href="http://slashdot.org/">Slashdot</a></li>
	<li><a href="http://www.amazon.co.uk/">Amazon UK</a></li>			
</ul>

JavaScript

jQuery(document).ready(function(){

	$('#whateverId').spiderSelect();

});

Options