5 tips for making your jQuery User Interface SEO Friendly

post image


jQuery is a JavaScript library that has seen a massive growth in usage other the last couple of years as it allows developers to code functionality into their webpages to turn their static HTML into a much more dynamic User Interface. However there are a few pitfalls in using jQuery (or any javascript for that matter) that can have a detrimental effect on the Search Engine Optimisation of your page, in this post I will look to outline a few tips that should help you avoid these so that your page not only has a great User Interface but your search engine rankings stay high aswell. Not only should these tips help with SEO but can also have good accessibility benefits too, something that is making a resurgence with users accessing the web from an increasing variety of devices.

1. Streamline your (x)HTML

Many jQuery based features I have come accross involve a lot of extra HTML tags used for the UI that is not irrelevant as far as the search engine spiders are concerned. There are two main ways to ensure your HTML is slimmed down:

a) Dynamically add elements after the page load.

The principle of this is that the HTML served up to javascript free users and arguably more importantly the search engine spiders contains just the basic content, code required for the workings of your UI are then added in dynamically after the page is loaded (or better yet only when it is needed).

Below is an example to add a callback form to the page after the page has loaded.

[sourcecode language=”javascript”]

var contactForm = ‘








In this example the HTML code is atually written within the JavaScript which isn’t exactly best practice, we can get away with it in this instance as there are only a few lines of code, however for longer chunks of code you should consider using an AJAX call to load the content.

b) Optimise the structure to remove unnecessary code.

Even better than adding code dynamically its removing it all together if it is not needed, one of the main cause of excess code is divitis , so have a look through your code and see if you really need that wrapper div or with a bit of clever CSS can you target the content in a different way?

2. Avoid blank/useless links

All too often the button/trigger used for a jQuery event is an anchor tag with a href that points nowhere, or worse still contains the javascript call, for example:

[sourcecode language=”html”]

My button

My Button


A better method is to use some other element such as a span as the trigger then dynamically add an on click listener.


[sourcecode language=”html”]

My Button



[sourcecode language=”javascript”]

$(“#myButton”).click(function(){ myfunction(); });


Of course there are times when using an anchor tag is fine as the trigger, such as if the jQuery script is providing an alternative on page option to the page at which the link is pointed. An example of which would be launching a pop up contact form when clicking on a link pointing to the contact form page. This way non-JavaScript users go through to the contact page and fill out the form on there, while javascript users get the alternative pop up form saving a page load. In such instances though it may be worth considering if such links should be nofollow.

3. Always offer a non-JavaScript version of any relevant content

This may seem slightly contradiction of the previous points, however if any SEO relevant content is not available when your script is disabled then it is likely the search engine spiders cannot find it. For example if you are loading relevant content via AJAX then from an SEO point of view it is useful to have a link to a static version of this content on the page too.

4. Code your javacript to fit your HTML and not the other way round.

When coding a page I always try to code a static version of the page then from this foundation code any javascript based around this markup and only add in any extra html tags etc if and when absolutely necessary (and where possible adding such markup dynamically as per point 1).  Developing your page this way is one of the fundamental principles of progressive enhancement which has not only accessibility benefits but also SEO benefits.

For example if you want to have tabbed content on the page it is best that the basic page just has the content of all the tabs one after the other then use jQuery to assign CSS classes and eventHandlers on page load to change collapse the content you want hidden to start with, this way if the page is loaded without javascript then all the content is still visible.

5. Keep your script to external files

It is an age old one but is still relevant as ever, keep your javscript out of your HTML page and in an external javascript file refernced in the head.

[sourcecode language=”html”]


It may have been a case in the past that you needed to drop blocks of JavaScript in the mark-up elsewhere in the code as to ensure it is only executed once an element had been written into the DOM. However using the ready() function of jQuery you can keep the code in external files and will only execute once the required element has loaded.

about the author: ""
  • Ben

    Really helpful post, im increasingly using jquery myself so its always good to know what some of the best practices are.

  • Acceso mayores 25

    Very useful information. Especially the useles links part for SEO proposals. Thanks.

  • nitGreen

    Indeed very good points, and the arrival of jQuery which can replace javascript code many places and will result more search engine friendly.

  • Web Hosting Nuggets

    I really like your five tips which are the most important rules in my opinion to be respected especially in regards to search engine optimization. If you don’t respect these rules google (or any other search engine) might not like you much…

  • Great tutorial. JQuery is becoming more and more important. The possibilities are almost endless and Google start to accept JS more and more. Its just a matter of time and JS will be just as important for a site as HTML and CSS.