jQuery pagination links not showing up in Google search results

[eluser]The Questioner[/eluser]
Dear fellow CodeIgnitees,

I've developed an ecommerce site for a client that uses a custom pagination class when showing a list of product thumbnails for each category. This pagination class uses jQuery to only update the DIV that is used to display the product thumbnails (as opposed to reloading the whole page). Each pagination link points to this Javascript function:

Code:

function GotoAnotherPage(intPage)
//used for main products view pagination
{
    //pass page no back and show new contents
    //(need to add date/time to URL so that IE doesn't think its a previously cached page)
    var datCurrentDate = new Date();
    var strURL=strBaseURL+'shop/filter/navigate_to_page/page/'+intPage+'/'+datCurrentDate.getTime();
    $('#content_page').html(geturl(strURL));    
}

This gives the site a snappier feel (as only the DIV is reloaded) when the pagination is used, but my client is complaining that only the first page is indexed by Google. I'm assuming that this is because of the last line:

Code:

$('#content_page').html(geturl(strURL));

The URL used to update the DIV is passed via AJAX and so doesn't update the main page URL, therefore Google doesn't "see it" as the main page URL doesn't change for each pagination link.

Other than using full, direct URL links for each pagination that will reload the whole page, what else can I do to get Google to index the other pagination pages?

[eluser]sketchynix[/eluser]
Im curious to see a bit more code. The way I typically do paging is to have a javascript enabled version and a noscript version.

How is GotoAnotherPage(intPage) being called? is it from a button element with an onClick event, or is it an anchor element the overrides the default action when clicked?

[eluser]The Questioner[/eluser]
I've customised the pagination so that it accepts javascript code. Here is the actual pagination configuration settings within the controller:

Code:

//set pagination links to fire AJAX javascript function rather than standard URL link
$config['base_url'] = '[removed] GotoAnotherPage(<variable>);';
$config['total_rows'] = $this->total_count;
$config['per_page'] = PRODUCTS_PER_PAGE;
$config['uri_segment'] = 5;
$config['javascript_url_overide'] = TRUE;
$config['full_tag_open'] = '<p>';
$config['full_tag_close'] = '</p>';
$config['next_link'] = 'Next &raquo;';
$config['prev_link'] = '&laquo; Previous';

The HTML that it outputted looks like this:

Code:

<div class="content-navigation-container-pagination">
    <p>
    &nbsp;<strong>1</strong>&nbsp;<a href="jvascript: GotoAnotherPage(12);">2</a>
    &nbsp;<a href="jvascript: GotoAnotherPage(24);">3</a>
    &nbsp;<a href="jvascript: GotoAnotherPage(12);">Next »</a>
    &nbsp;<a href="jvascript: GotoAnotherPage(228);">Last ›</a>
    </p>
</div>

Where jvascript is supposed to be j-a-v-a-s-c-r-i-p-t (without the dashes) - the CI forum parser will not let me put it in.

This will show 1 | 2 | 3 | Next | Last.

[eluser]bl00dshooter[/eluser]
Just a off topic tip:

If you're using the JS function directly in the href, you're probably doing it wrong. Instead of that, use the normal codeigniter links. Then, with jQuery, select the onClick event of the <a>'s, do your ajax stuff using the attr jQuery function, and put return false or use prevent default jQuery function. By doing this, your pagination will still use ajax and normal page loads for who doesn't java JS enabled.

[eluser]sketchynix[/eluser]
bl00dshooter is exactly right. Google will not follow the javascript like that, and your clients with javascript disabled ( ~ 5% of the market) will not be able to use the paging system. You need to have a valid http:// link in there for it to index.

You should also have your controller check for an ajax request. Google isAjax for some further info on how to implement that.

[eluser]The Questioner[/eluser]
Good tip, bl00dshooter (thank you sketchynix). I actually noticed the fallacy of my code as soon as I viewed the HTML. However, the problem for normal page loads is that currently the target controller only deals with rendering the stuff within the "content_page" container DIV. I don't really want to spend time reworking the code to render the whole page, as it will be time consuming. Is there another way?

[eluser]sketchynix[/eluser]
to save you some time...
pulled from http://snipplr.com/view/16624/isajax/

Code:

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

in your controller

Code:

if($this->isAjax){
     ///return div view
  }
  else{
   ///return full page
  }

[eluser]The Questioner[/eluser]
Is it possible to create fully qualified links that only Google spider can see? The site is jQuery heavy and has been deliberately designed to ignore IE6 and other fringe elements (such as Javascript/cookies turned off) so that user experience is maximised. It is an urban clothing store and thus consumer driven. Most of our clients are IE8,FF or Google Chrome, with all settings set to default (i.e javscript and cookies are enabled).

[eluser]bl00dshooter[/eluser]
Well,

IMO, it wouldn't hurt to give some functionality to JS-off users. Apart from that, as sket said, it will be better for SEO. I think it will be easier to rewrite your link system then to make links that only google can see.

If you need help with that, you can e-mail me, but I prefer to use Windows Live Messenger (MSN), at [email protected].

[eluser]The Questioner[/eluser]
Thank you both for your help (bl00dshooter and sketchynix), I really appreciate your help. It is people like you two that help make the CI forum community awsome.

I will act on your combined advice and rewrite the necessary controllers and views. I'll let you know how it goes along.