jQuery and SEO Question

Scenario:
We are developing an interactive application in jQuery and WordPress in which the data is assembled in an array and passed to the application’s initializer function (of course a javascript function) and based on that array the entire UI of the application is generated.

Question:
Will our application be SEO friendly if we generate the entire UI with jQuery?

We can go the other way that is to generate the UI with php but if SEO is not going to be a problem with jQuery generated UI then we will go with jQuery for now because of time limitations.

The ideal design is to have a UI that works without js, then make it more fancy by adding js/jQuery on top.

If it’s an application and not a classic website… then, probably, the user interaction needs to be the main target in the design.

Why do applications need SEO ? The application’s website, landing page and other hoopla need SEO , not the app itself.

Or is it an interactive page and we’re getting confused over semantics?

Search engines parse any HTML data in the text served from the server, not any HTML data created by JS/JQuery within the browser. So in all likelihood the answer to your question is no.

I’m sure some of the more advanced search engines (aka: Google) have a small amount of JS processing they do when they fetch the page and index, but nothing at the level you’re talking about.

That said, these guys are right, there’s no point in re-doing it. Just make the PHP output a div with all the relevant data listed out and you’ve got your SEO , then have jQuery replace that div and do the same stuff it does now so your user has their GUI

There are a few things you can do to make sure your application is still indexable by search engines.

Make use of meta tags in your HTML head, those should be static and not generated by JavaScript.

I suggest you read up on the Unobtrusive JavaScript paradigm and view, controller, model separation.

For example, to help search engines you’ll want as much indexable content in static HTML .. so instead of doing something like this:

var li = $("<li>Home</li>");
li.click(function() { ... });
$("#nav ul").append(li);

Do something like:

<div id="#nav">
  <ul>
    <li class="home">Home</li>
  </ul>
</div>

...

$("#nav ul li.home").click(function() { ... });

That’s a very basic example, but as a general rule of thumb try and keep as much of the logic for how your application will look in HTML and CSS . Then use JavaScript for changing how it behaves.

This will also lead to a much cleaner, more maintainable code base.. which is arguably more important than SEO .

thanks guys for the advice and now we know what should we do.

The application in question is exact replica of my flash calendar http://activeden.net/item/dynamic-xml-flash-events-calendar-as-30-version/14232