AJAX and SEO – Is it possible to get them together?

About 7 months ago I threw a question on LinkedIn, AJAX & SEO. It was about is ajax seo friendly! (The website can be found here http://demo.zpbappi.com). Most of the people answered “NO”. All of them suggested me not to use 100% Ajax(ed) website as search endings do not render the javascript. The site has one index.php page and no other pages. When you click any link/buttons it loads the content dynamically using ajax. So I agreed that search engines wont be able to crawl the site properly and stop thinking about it any more.

One week ago I got a project to fully ajaxify a simple static website camillenelson.com with search enginge readability. I already knew (still then) it is not possible. I started re-thinking about the issue and find out a solution of my own. The site has only 8 pages which is a plus point. To assume any site from search spider’s view just disable the javascript from your browser settings and you’ll understand how the spider will go from one link to another.

For example: 

<a href="about.html"
onclick="javascript: Load('about'); return false;">
    About
</a>

When javascript is enabled, clicking on About link won’t go to about.html page (return false;), rather it would call Load function. I think you’ve already got the idea!

In real I used jQuery to make the whole thing unobtrusive. The static html pages (already done) except index.html were kept as they are. In index.html the container div (the only div that changes for different pages) loads the content of different pages. I created a folder “ajaxContent” and created the html files with same name of the main html(s) but they contain only the contents, not the full html page.

Here is the jQuery code I used: (N.B. All the links are assigned with “ajax” class.)

$(function() {
    $("a").focus(function() {
        this.blur();
    });
    $("a.ajax").click(function() {
        var lnk = "ajaxContent/" + $(this).attr("href");
        var hover = $(this).find("img").attr("src");
        var img = $(this).find("img");
        $.ajax({
            url: lnk,
            beforeSend: function() {
                $("div#container").html('Loading...');
            },
            success: function(d) {
                $("div#container").html(d);
            },
            complete: function() {
                $("#loading").hide();
            }
        });
        return false;
    });
});

If you have any better idea to make a fully-ajaxed website SEO friendly please let me know.

Thanks

Related posts:

  1. IE6 png alpha transparency fix for dynamically loaded images via ajax
  2. Using Dreamweaver Spry validation with jQuery ajax form plugin
  3. A better process to find maximum z-index within a page
  4. SEO tips: Reduce your unwanted external links using jQuery
  5. JSONP First Timer

7 Comments to “AJAX and SEO – Is it possible to get them together?”

  1. binaryday 24 January 2009 at 10:30 pm #

    Looks like you have already gone through my post about how to make ajax pages seo friendly. what did you think of it?

  2. adnan 25 January 2009 at 3:34 am #

    Sitakanta,

    Yes, your post is great for idea. But in my own post I want to show it practically with jquery code in a simple way.

    Thanks

  3. DnP 30 May 2009 at 4:06 pm #

    I found much simpler way to make ajax link seo friendly, try this article http://www.silveryhat.com/delynie/f47/making-ajax-url-search-engine-optimization-friendly-the-simple-way-6828.html

  4. adnan 7 December 2009 at 1:33 am #

    Thank you DnP for the useful link.

  5. Jose M. Arranz 4 May 2010 at 10:28 pm #

    AJAX (in extreme Single Page Interface) and SEO can be now compatible.

    Take a look:

    http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php
    http://itsnat.sourceforge.net/index.php?_page=support.tutorial.spi_site

  6. adnan 4 May 2010 at 11:29 pm #

    @Jose, I saw your links. Great article!

  7. Jose M. Arranz 4 May 2010 at 11:33 pm #

    Have you seen the online demo?
    http://www.innowhere.com:8080/spitut/

    This is the web site explained in the tutorial, try to disable JavaScript :)

    As you can see, GOODBYE to AJAX and SEO and accessibility incompatibilities :)

    Thanks for your comment


Leave a Reply