Here is very simple way to solve this problem.
1. Use links with onclick attribute like this:
<a href=”some_url” onclick=”loadContent(page);return false;”>Load Page</a>
The search engines will follow the URL you have given to the “href” attribute. The browser will not follow it because of the “return false” statement in the onclick.
If you are using click handler with jQuery or similar library, follow the same logic.
Your ajax function (in this case called loadContent) should also call the same “some_url”
2. Make sure your system makes difference beetween calling some_url by ajax and calling it normally. This can happen very easy if you add a POST parameter to your ajax request. Then on the server side you can simply check whether the paremeter is there or not.
3. If the request comes by ajax, return only the piece of content that must be loaded in the ajax placeholder in your original page.
If the request does not come by ajax, load a full page with navigation and everything. Why is this needed? Because search engines may index these direct URLs and send traffic there. When real visitor lands on such page you want them to see your full site design with header, footer and navigation, and not just the piece of content that the ajax call needs to load.
I think there’s no need of examples, but if it’s unclear let me know in the comments.
Filed under: Technology Made Simple