Before CSS was so awesome I remember visiting websites that would attempt fancy layouts using one or two big graphics, text and all. I don't think there are many sites like that around anymore, and for good reason. Search engines can't read text in graphics. If you want to be easily indexed by a search engine, the text has to be pulled out. Now we have Ajax.

This article assumes you know what Ajax (Asynchronous JavaScript and XML) is. If this is Greek to you, checkout Ajax over at Wikipedia, then come back an read this article.

The Problem:

Ajax uses JavaScript to get and render content. When a developer decides to use Ajax to grab textual content that needs to be seen by search engines, well, big mistake! The search engine bots are blind to JavaScript rendered content. That means all the cool Ajax returned text might as well be an image.

The Solution:

When I first discovered the XMLHttpRequest object, the glue that makes Ajax work, I was so excited. Better yet, later when jQuery came into existence, jQuery's ajax layer made working with XHR so easy.

With Ajax I could now develop websites that felt like real desktop applications. It was all fine and dandy while I was working on back-end control panel type applications. But then it hit me when I started to zone in on developing a front-end system that heavily used Ajax.

For me it was kind of like showing up to a party only to find out I was a day late. With all the amazing things that Ajax does to bridge the dynamic Internet with the end-user interface, the entrepreneur in me screams out it is definitely not worth losing search engine visibility! Upon realizing this I began to brainstorm how I could have the best of both worlds. I call the following search engine friendly Ajax pattern, Nick's Super Cool and Groovy SEO Ajax pattern. NSCGSA (Nis-cug-sa) for short. Ok, all joking aside, let's jump into the code.

SEO Friendly Ajax Pattern

This pattern will work with various combinations of application languages. The combination I am using for this example is PHP, jQuery, and HTML.

First to be MVC compatible we need to start with three file types:

1. category1.php, category2.php category3.php - These are the SEO friendly files.
2. controller.php - In this case the controller receiving the input will also model the data.
3. ajax.js - This would also be considered a controller receiving event input, getting the data from controller.php, then putting it in the right place on the DOM in categoryX.php.

category1.php, category2.php, category3.php

<ul id="nav-primary">
	<li><a href="category1.php">Category 1</a></li>
	<li><a href="category2.php">Category 2</a></li>
	<li><a href="category3.php">Category 3</a></li>
</ul>
<div id="content">
	<?php include("controller.php"); ?>
</div>

Lines 1-5 is a standard SEO friendly navigation.

Line 7 includes the content area which we will look at next.

controller.php

This is a very simple example of how this controller file could be used. Let's jump in and take a look at the principle though.

<?php
	if( $_POST["category"] ){
		$category = $_POST["category"];
	}else{
		$url_array = explode( '/',
	    	    ltrim( parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ),
	    	     '/' ) );
	    $category = array_pop( $url_array );
	}
	
	switch( $category ){
		case "category1.php":
		?>
			<ul>
				<li>Page 1 Content</li>
			</ul> 
		<?php 
		break;
		
		case "category2.php":
		?>
			<ul>
				<li>Page 2 Content</li>
			</ul> 
		<?php
		break;
		
		case "category3.php":
		?>
			<ul>
				<li>Page 3 Content</li>
			</ul> 
		<?php
		break;
	}
?>

The first If...Else block simply determines whether this controller is being included into a page, or being called on by an Ajax request.

Line 3 sets $category based on the POST input from an Ajax call.

Lines 5-8 looks at the URL of the file containing this controller and sets $category based on the file name.

The Switch...Case block uses $category to determine which HTML block to show.

It works like this: When you navigate to http://someurl.com/category2.php, Lines 5-8 kick in to grab category2.php from the URL and set it to the $category variable. This is the SEO friendly page that search engines can consume. Now what about that Ajax?

ajax.js

Upon loading any of the categoryX.php pages this bit of jQuery would need to run. This means the file should be included in the header of each category file.

$(document).ready(function(){
	$('#nav-primary li').each(function(i,element){
		$('a',element).click(function( e ){
			$.post(
				'controller.php',
				{'category':$(this).attr('href')},
				function( data )
				{
					$('#content ul').fadeOut(function(){
						$(this).replaceWith( data ).fadeIn();	
					});
				}
			);
			return false;
		});
	});
});

Line 2 begins a DOM loop on the <ul id="nav-primary">.

Line 3 we set a click event on each LI's link (anchor tag).

Line 4 is a shortcut handle in jQuery for making Ajax calls using the POST method. You can learn more about jQuery $.post() over at their API reference site.

Line 5 is the address to the controller.php file.

Line 6 is where the fancy work begins. This is the category value that is POSTed to the controller.php. I simply grab the anchor tag's href attribute value. Look back at line 3 of controller.php. See how that works?

Lines 7-12 is the callback function that gets the HTML block that is returned and replaces the old HTML with the new HTML.

Line 14 tells the browser not to treat the anchor tag with default behavior. In other words, not to click away, but to do cool Ajax stuff.

Wrapping Up

Demo this SEO Friendly Ajax pattern. Go to each URL separately in the address bar and view the source in your browser. You will see SEO friendly pages.

Download the files for SEO Friendly Ajax Pattern

This pattern seems to work best on categorized groups of data where you have a navigation that quickly swaps snippets of data in and out. You can imagine controller.php with more complex logic that connects to a database for content.

Additional Exercise: Here is an exercise for fun. In controller.php set ajax to return JSON data where more than just HTML content is returned. You will need to set the HTML block as a JSON variable. For example, in addition to the body content, you may want to dynamically set the title tag (document.title = 'blah';).

Ajax and Wordpress

I have seen a lot of cool Ajax based Wordpress themes, but all the ones I have seen come with some sort of "not search engine friendly" warning. Search engine friendly Ajax and Wordpress can work together using a pattern like described before.

This blog uses a proprietary system by Sabramedia that implements Ajax and is SEO friendly. I have toyed with the idea of making a Wordpress plugin that allows the best of both worlds, but have been so busy with other things lately. If somebody hasn't done it already, then maybe if enough people ask, I can make this a nice side project.