Can pages that make heavy use of AJAX also be search engine friendly?

Question

I guess what I mean is, if I make a site that uses AJAX to load some content that I also want search engines to find -- if I make the page work sans-javascript (say, when javascript isn't present, a link goes to site.com?c=somecontent rather than calling a function with $("#content").load("somecontent.html");), will the search engine follow the non-javascript link and be able to index the site well?

I suppose this would work if javascript-enabled browsers who followed a search engine link to the ?c=somecontent link would still make use of the site normally, right?

Is this a really challenging endeavor or can it be done relatively easily if the site is structured properly?

Answer 1

best way to do this is to build the site without any ajax and apply seo practices. then when the non-ajax version works, add a class called "dynamic-link" or something to the links you want to be ajax-link. and handle the click events on those links. so when bots crawl the site, they have something to fall back on.

Answer 2

Just to add on: If you have noticed the way Facebook works - the AJAX works if Javascript is enabled, and if Javascript is disabled (e.g. robots) it will still work.

Do something like this in your links (e.g. paging):

<a href="view.php?t=231&p=2" onclick="loadpage(2); return false;">2</a>
<script type="text/javascript">/* <![CDATA[ */

function loadpage(p){
$("loader").load("view.php?c=pageonly&t=231&p="+p);
}

/* ]]> */</script>

Thus the key thing is to design in a way that AJAX works in modern browsers, yet the pages still work when you have Javascript disabled.

Answer 3

If your link looks something like this:

<a href="http://site.com?c=somecontent" 
   onclick="Javascript:$('#content').load('somecontent.html'); return false;">
     Some link
</a>

It will gracefully degrade, and the search engines will be happy.

One issue you do have is when someone who has Javascript enabled navigates your site, the location in the address bar wont change. This can be overcome by having your onclick function set the window.location.hash to update the hash part of the url based on the page the visitor is on. Then, on loading each full page, a script should check if the hash matches the current page, and if not, switch to the page indicated by the hash using the AJAX call.

Answer 4

That can be problematic, as you'll end up with your little fragment of a page getting into the index.

If you can get away with it, it's a lot easier to "fake" ajax with plain old DHTML.

<div id="content-display"></div>

<div id="content-1">Some content</div>
<div id="content-2">Some other content</div>

<style>
#content-1 { display:none; }
#content-2 { display:none; }
</style>

<script>
displayContent = function(contentId){
    $('#content-display').update($(contentId).innerHTML);
}
</script>

Now you've got all your content visible to search engines, all at the same (and correct) URI, but for users with Javascript enabled, it acts like the AJAX solution (but faster, after the initial load, which is a bit slower).

Now, if you've got a TON of content, you'll have to think of something smarter. But if all your content weighs relatively little (don't forget to make sure your server gzip-encodes content), this setup is preferable.

Otherwise, if you've got hundreds of kilobytes (or more) of text content, you'll have to get craftier. Your initial thought is pretty right on.

<a href="/some/page.html" onclick="$('#content').load('/some/page.html')">
LinkyText
</a>

Will generally do what you think it will. The problem is, of course, that '/some/page.html' will end up in search indicies. You could try doing tricky server-side things (like checking referers and redirecting back to the "main" page), but I'm not convinced that's not a pandora's box.

Hopefully someone will come along with another answer that addresses this. If I think of something, I'll edit this one.

Answer 5

In addition to previous answers.

You can check if request is via AJAX an display results according to it (i.e. JSON data if AJAX, full html page if not). In PHP checking script looks like

  function isAjax() {
      return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
         ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
  }

Sure there will be solution for technology you're using in server side (Ruby/Python/ASP).