Home » Guides Advanced Article

AJAX is NOT A Search Engine Killer Anymore; "Friendly AJAX Howto"

BoonEx Article about AJAX and Community Software

5.0/5.0 (1 votes total)
Rate:

Andrey Sivtsov
December 12, 2006


Andrey Sivtsov

Andrey Sivtsov
General Director
BoonEx - Community Software Experts

 

BoonEx Ltd., community software experts, was founded on the 15th of December 2004. It was initially organized from a group of smaller companies and newly attracted professionals with experience in software development, web-promotion, marketing, and management. Currently, the BoonEx Ltd. runs several commercial websites and serves customers from all over the world with a staff of 50 full-time employees who have great professional backgrounds, education and experience.

Andrey Sivtsov has written 1 articles for JavaScriptSearch.
View all articles by Andrey Sivtsov...



Ashok Sudani blogged (http://search.sys-con.com/read/305982.htm) that "... the search engine will never run your AJAX. To the search engine, huge areas of your website content are now hidden, never to be spidered, indexed, or found. This really limits the usefulness of AJAX in many applications."

Well, that "fact" is, in fact, not a fact.

We want both AJAX and search engines to stay alive and happy. BoonEx offers advice on how to do what was considered to be the impossible.

AJAX is a great technology, and most of its so-called "drawbacks" can be worked around. AJAX is extremely popular in web development now, but we hear tons of whining about how search-engine-UNfriendly and unusable (back button/permalinks problem) it is. C'mon, just think a bit - be creative and believe in "can do".

In our new product - Orca Interactive Forum Script, and in our upcoming products - Directory, Wiki and Blog we decided to use AJAX extensively but solve its problems altogether.

Orca is already a success. It is a 100% AJAX forum software, which already has an operational BACK button, permalinks, search-engine friendly structure and bookmarkable pages. Want more? Look for version 1.1 in a couple of weeks with many cool new features, including unique page title tags and Human-Friendly-URLs (modifiable to clone, say phpBB or vBulletin or any other way of URLs structuring). In a few months we plan to make Orca even more friendly and usable than any other conventional forum script.

Orca is an open-source, GPL-licensed, free product. We decided to release it into open waters to make it really popular and widespread. You can see it in action, use it, or participate in development. Orca - Interactive Forum Script.

Now, to save precious search engines from the wildly popular AJAX expansion we're sharing this information to help webmasters develop SE-friendly AJAX apps.

Industrious webmasters develop 2 versions of their websites - for users and for search engines. We combined both into one. Literally. We use XSL transformation for generating site contents. XSL transformation can be done on the client side (in browser) and/or on the server side (in php). This effectively removes the need to write different code for AJAX and for search engines. The same code provides different functionality for search engines and for users.

For example, if you look at the Orca forum url:

<a onclick="return f.selectForum(5, 0);" href="index.php?action=goto&forum_id=5&start=0">Orca Installation</a>

When a user clicks this URL the browser executes onclick event and if return f.selectForum(5, 0) statement returns false the browser will execute onclick code and doesn't follow the link in href attribute. In this case we execute xsl transformation on the client side (good for server performance because xsl transformation is performed on the client machine).

When a search engine "clicks" this URL it sees only the href part of the url and opens a page with a regular URL with the same page content. In this case xsl transformation performs on the server side and this URL outputs a regular html page.

What about that old AJAX enemy - Back button? Simple.

The back button in Orca is based on # symbol after the URL. JavaScript can read and change the value in the URL after the # symbol without a page reload, but a browser stores this URL (with another text after # symbol) in browser history.

The sequence (as in Orca):

1. User opens a forum via AJAX

2. Javascript reloads the target area on the page and stores information about this action in the URL (example: #action=goto&forum_id=5)

3. Browser stores this URL in history

4. The user clicks the Back Button

5. Javascript sees that the # part of the URL has changed, takes the new text after the # symbol, parses it and calls JavaScript to reload the target area on the page (example: #action=goto&forum_id=3 would open topics in forum with id=3)

PS: Mozilla and IE handle these URLs (with changed text after the # symbol) differently. So JavaScript code for them is different, but the algorithm is the same.

Note that xsl transformation is very strict - you have to write xsl templates very carefully, but at the end of the day you will have perfectly valid HTML code.

Ok, this is a start. We plan to improve these techniques and will use them in Orca and other BoonEx products.

BoonEx Community Software Experts Company is devoted to developing cutting-edge web applications for online communities, using the latest technologies. We make them advanced, search-engine-friendly and user-friendly.


Add commentAdd comment (Comments: 0)  

Advertisement

Partners

Related Resources

Other Resources

arrow