Creating An SEO Friendly Site Using AJAX

-

For all you do-it-yourselfers out there, there is a SEO friendly way to develop a community-related site created with AJAX (otherwise known as Asynchronous JavaScript and XML). This alternative uses AJAX extensively but manages to solve many of the problems that cause search engines and user’s issues. While still a work in progress it offers solutions that benefit search engine optimization and marketing.

Search engine bots have been known to ignore JavaScript. Often, JavaScript redirects have been abused which hasn’t helped matters. In addition, to being crawler “unfriendly”, in the case of AJAX, often times other functionality that affects the user is also inhibited. (for example, the use the back button). These are a couple of issues faced when employing JavaScript on a site.

Now a social networking platform solution based on AJAX that remains both user and search-engine friendly is available. The open-source solution that intends to resolve many of the user issues and problems that affect search engine optimization and the user experience is known as Orca.

The Orca Interactive Forum Script developed by BoonEx is an AJAX solution that has solved the issues of having an operational “Back” button, the use of permalinks, search-engine friendly structure, and bookmarkable pages. The script is also being developed to include unique page title tags and human-friendly URLs. In addition to the Orca Interactive Forum Script there will also be scripts available for Directories, Wikis, and Blogs.

For the more technically advanced this is how some of the issues are resolved
The need for multiple variations of a code is eliminated. A solution many developers have used in the past has been to create one site for the user and one for the search engines. In this case, XSL Transformation (XSLT) is used to create site contents and resolve the issue. Because XSLT can be done on either the client side (in browser) or server side (i.e. PHP) there is no need to create two sites. One code can be used for the user and the search engine.

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

< a onclick="return f.selectForum(5, 0);" xhref="index.php?action=goto&forum_id=5&start=0" mce_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, a XSL Transformation on the client side is executed (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.

And to solve the problem of a dysfunctional back button this is the solution they provide. 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

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)

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.

Source

Has anyone have any experience with using any of these solutions? How has it affected your SEO? Feel free to share your experience or thoughts.

6 Responses

  1. SEO Friendly Site Using AJAX - Home for all things technical

    […] A very nice explanation on how they have achieved this can be found at: Creating An SEO Friendly Site Using AJAX. […]

  2. Matt Ellsworth

    looks great – thanks for this!

  3. SEO Friendly Site Using AJAX : Tech Square - Tech News | Tech Reviews | Tech Latest | Technology Buzz

    […] A very nice explanation on how they have achieved this can be found at: Creating An SEO Friendly Site Using AJAX. […]

  4. Emanuele

    I’ve done it using mootools and the cakePHP template sytem. Here is the article in Italian (but there is also the code in php and javascript): http://www.integramenti.it/blog/2008/11/30/ajax-seo-friendly-con-cakephp/

  5. Adnan

    I’ve done seo friendly ajax site using jquery.
    you’ll get the idea and the source code here:

    http://abcoder.com/javascript/jquery/ajax-and-seo-is-it-possible-to-get-them-together/

    Thanks

  6. Terra Holscher

    Web optimization is confusing at times, specially when google makes a modification or even propose that they might make a change in their own algorithm.