For example, the below code would display different code depending on if the request for the page was made via AJAX or directly via a browser.

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //This is an AJAX request, do AJAX specific stuff
}
else {
    //This is not an AJAX request E.g. display normal page content.
}

In some code I was working on today, I saw a neater way of achieving the above, this would be included in your common config file:

define('IS_AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

if(IS_AJAX_REQUEST) {
    //This is an AJAX request, do AJAX specific stuff
}
else {
    //This is not an AJAX request E.g. display normal page content.
}

There’s an HTTP variable set called HTTP_X_REQUESTED_WITH, which will is set to ‘XMLHttpRequest‘ if the request method is via AJAX. This is method is untested with JavaScript frameworks other than JQuery, so may not work (but I don’t see any reason at all why it wouldn’t!).

It’s also worth noting that not all web servers include this variable and sometimes omit this specific $_SERVER paramter. Use vardump($_SERVER) to check that the HTTP_X_REQUESTED_WITH is present.

Whilst looking through the Google results for this site the majority of pages were as follows:

/index.php?tab=123&txtSearch=ALL&List=oasc&Sort=PName%2CPName&CreatedUserID=1&pageindex=40&Language=en-GB

The site has an advanced search page, whereby you can sort products using a variety of options such as ascending order, descending order, size, price etc. This is bad for a number reasons, but mainly due to duplicate content (not to mention lower serps ranking, traffic loss and decreased page relevancy) . A page of results in ascending and descending order is essentially the same page, simply a different view of your data – you can help search engines via using the relatively new canonical url link tag.

To illustrate I’ll use an example of a typical category page, whereby you can sort a list of products in ascending and descending order, leaving you with a number of urls as follows:

http://www.shop.com/category.php?catName=Shirts&sortOrder=ASC

In this example the part of the querystring creating the duplicate content would be the sortOrder parameter – as you would want your seperate categories indexed.

The solution is quite simple. In your head tag add the following:

<link rel="canonical" href="http://www.shop.com/category.php?catName=Shirts" />

By adding this to your category page you are telling search engines (currently Google, Yahoo, Ask and Bing use this tag) that this page is a copy of http://www.shop.com/category.php?catName=Shirts. Indicators such as Google Pagerank are also transferred to your preferred url.

The canonical url tag has many uses and can be used to help with the following issues:

• Pages that contain session IDs appended to the querystring
• Search results pages that append search data to the querystring
• Print versions of page
• Duplicate content for www. and non-www. pages 0 in your canonical tag you would include your preferred url
• Same content contained in multiple categories – E.g. a product contained in multiple categories on an online store
• Removing affiliate ids in the url
• Preventing multiple pages of a discussion topic with comments from being indexed E.g. shop.com/post.php?id=123&page=1

You can read more about the canonical tag at the official Google Webmaster Blog. Matt Cutt’s also has a 20 minute video explaing the canonical tag in more depth.

The main point to consider is that the canonical tag is simply a hint and not a directive. It is another method to give search engines help in indexing your content. This is very useful when working on existing sites already indexed by Google. However, on new sites bit more planning can help. For instance, in a  previous article I covered 301 redirects for seo using htaccess – how to set a prefferred version of your site via htaccess. On an ecommerce store you could avoid appending search data to the querystring.

EDIT: wordpress and all in one seo plugin generate canonical link tags for blog posts. For example, comments are seperated into multiple pages E.g

http://www.web-design-talk.co.uk/157/how-to-deal-with-difficult-clients-using-split-testing/comment-page-1/#comment-344

With the actual content being at:

http://www.web-design-talk.co.uk/157/how-to-deal-with-difficult-clients-using-split-testing

If you have a quick look at the source code to the comments page you’ll see the following has been added:

<pre id="line34"><link rel="canonical" href="http://www.web-design-talk.co.uk/157/how-to-deal-with-difficult-clients-using-split-testing/" />

Recently an existing client came to me asking why his site isn’t showing up when people search for a particular long tail search term. Now, his existing site used a pretty awful content management system that didn’t even allow him to set his own pages titles or meta descriptions. Furthermore, he was lacking inbound links, which people ranked above him did have. This all sounds simple and straightforward but even after I had explained (in quite clear and non technical langauge may I add) the merits of good SEO and one page content the client simply wouldn’t accept this as a solution. He had his own short term and less costly solutions – basically revolving around the the idea me resubmitting his sitemap page to all the major search engines each day. I’m not debating that submitting a sitemap isn’t a good idea, because it is. However, the client’s main KPI for this project was increased site enquiries.

After much discussing this we had both come to a bit of an awkward silence – not a good thing if you’ve ever experinced this in client meetings. For some reason I remebered back to my unoversity days where I had read something about split testing (or A/B testing) – where you can turn a negative situation into a positive one.This is quite a delicate situation to be in as it can damage your client relationship quite quickly.

The idea was to use the client’s idea for a period of time and my idea for a period of time. At the start of this I would install Google Analytics (I was tempted to use Google’s website optimizer, but decided against it) and let the statisitics do the talking – as a no one can argue with statistics.

This method has been very useful previously when demonstrating the merits of creating a dedicated landing page for Google Adword campaigns, but can be used anywhere if you’re willing to a little bit extra.

This method is beneficial for the following reasons:

• The client’s idea are being dismissed as wrong (however right you think you are)
• You are showing the client that you care enough to demonstrate your ideas
• Occassionaly the client will back down as soon as you explain your plan of attack
• It prevents those awful awkward silences
• You have a real world example to use in your other client meetings
• You are speaking the clients language in that you are demonstrating how your actions lead to increased conversions
• You are being direct, which I personally think is alwasy a good thing – as such statistics are often a huge eye opener for clients
• If and when the client comes to the same conslusion as you, they won’t blame you

There is always the arguement that the client is the client and that it’s all business at the end of the day. However, I personally pride myself on doing things properly. Others will say just get on with, do what the client wants and forget about it – you can only offer your opinion. This is a good point but can still damage your client relationships when they return later on and you need to charge them again. It all depends if you require long or short term client relationships – as they are definately an investment.

If you use Twitter as a marketing tool to drive traffic to your site then you should treat it in exactly the same way as you would a newsletter, a PPC advert or a banner and track each Tweet’s performance beyond simple click data. How many visits do you get, how long do they stay on your site, how deep do they go, what is the bounce rate like and how much revenue do they generate?

The benefit to ‘tagging’ this link is that Google Analytics will record more than use basic click data – you can record a whole host of advanced user data such as how they navigate your site and length of visit. By default Google will track such links, but traffic from services such as bit.ly will be dumped into the direct traffic area of Google Analytics. The steps to get the latter up and running are quite simple:

1: Go to Google’s URL builder to generate an url . Enter the following information:

Website URL: your website address

Campaign Source: enter a relevant source here to identify your campaign E.g. twitter

Campaign Name: enter a name used to identify the campaign, this is used to identify the campaign in Google Anlytics E.g. twittertracking

2: Click generate URL and something similar to the following will be created: http://www.web-design-talk.co.uk/?utm_source=twitter&utm_medium=social&utm_campaign=twittertrack

3: If posting to twitter you can paste this URL directly in the tweet box, as twitter will automatically shorten this url.

4: After approximately 24 hours data will appear in your analytics account. Simply navigate to Traffic Sources. If you’ve used the same terms to build the url as above you’ll see an entry called ‘twitter / social’. You can also view information by navigating to Traffic Sources > Campaigns where you can click the campiagn name (‘twittertrack’ was used in he example above).

Google Analytics Once Tracking is Installed

RewriteBase /
RewriteEngine on
RewriteRule amnesia/resetpass(.*) recover-password.php$1 [PT]

So typing in www.domain.com/amnesia/resetpass does a simple re-write to www.domain.com/recover-password.php, without the user ever knowing. All is fine. However, when I treid to get this seemingly simple rule to work with XAMPP I ran into problems, getting 404 and 500 responses from the server – obviously quite a pain as this essentially means I can’t test the site using my own web server (E.g. localhost). The site hosted from my computer via the normal setup E.g. xampp/htdocs/mysite. I’ll jump straight to the solution and then explain exactly what things were changed – the working htaccess file is below:

RewriteEngine on
RewriteBase /mysite
options +FollowSymLinks
RewriteRule amnesia/resetpass(.*) recover-password.php$1 [PT]

Firstly, the extra line that uses the +FollowSymLinks directive was added. To explain this I’ll quote straught from the Apache documentation:

To enable the rewriting engine for per-directory configuration files, you need to set “RewriteEngine On” in these files and “Options FollowSymLinks” must be enabled. If your administrator has disabled override of FollowSymLinks for a user’s directory, then you cannot use the rewriting engine. This restriction is needed for security reasons.

The re-write base has been changed to the relative path of the website directory. To finish up, open the http.conf file (the default settings for XAMPP, that get overwritten with you .htaccess file rules on a directory basis), located by default at C:\xampp\apache\conf\http.conf. Find all occurances of AllowOverride None and change it to AllowOverride All. After restarting XAMPP everythign should work. In a nutshell changing the AllowOverride directive in the http.conf file decalres which directives in .htaccess files can override directives from httpd.conf, this is discussed in more dept over here, but basically by having this directive set to None, you’re stopping individual htaccess files from working locally.

Take the example of this very blog. Pretty urls are used to display the post title and id within the url. There is the option to simply include the title, but this has been proven to slow down general performance of your blog. I digress, let’s get onto some examples where simple URL rewriting with mod rewrite is useful.

Currently at work I’m working on an internal administration system to handle invoices, customers, quotes – basically everything to replace a paper based admin system, I was given the brief to mimick the basecamphq project management system. With the except of several pages I’ve managed to keep the URL fairly clean looking using a directory structure (E.g. www.domain.com/clients) and POST data. However, a couple of URL’s do look ugly, namely the order detail page – www.domain.com/orders_detail.php?orderRef=1234. I thought this would be the perfect excuse to use some URL rewriting. Reading some articles, you feel like you need a degree in regular expressions and LAMP setups to get this working, but it’s far from the truth, especially with the help of some online regex generaters.

So currently I have an order details page that simply fetches data for the order reference contaojed within the querystring. I’ll assume you know how to do the basics. I’ll get straight into it, here’s the familiar .htaccess file contents with a rule for my orders_detail.php page:

RewriteBase /
RewriteEngine on
RewriteRule ^order/detail/([^/]*)$ /orders_detail.php?orderRef=$1 [QSA,L]

To keep this article brief I’ll leave out the detail on what everything actually means but it basically redirects the url www.domain.com/orders/detail/1234 to  www.domain.com/orders_detail.php?orderRef=1234, all without the user knowing, obviously the former URL is kept within the address bar too. It really is that simple!

However, as with anything good there are other factors to considor. If you use relative url paths in your page you’ll need to these to absolute paths. Take the example of my code to include a simple CSS file into my orders_detail.php page:

<link rel="stylesheet" type="text/css" href="css/main_compiled.css" />

This worked fine when using the old URL, but now the page looks for www.domain.com/order/detail/css/main_compiled.css, which doesn’t exist. You have several options here. You can use abolute paths for all your links, a base href within the header tag or add a rewrite base variable to each page and out it before the link. E.g.

define('BASE_PATH', '/');

and using it to a fix a hyperlink:

<a href="<?php echo MOD_REWRITE_BASE_PATH; ?>img/logo.png">View Logo</a>

That’s it!

Another place I use URL rewriting is to give custom news systems, blogs and events pages a little extra. For example, we’ll turn www.domain.com/news_detail.php?postID=1234 into www.domain.com/34/post-title-here-with-keywords – wordpress style. Again, I’ll take the example of a news system, where we have a front page with news listing and a detail page with the full news item. Firstly let’s dealwith outputting our pretty url on the front news page.

Currently we have a list of links with a post id attached to the link. Clicking rhe link will tajke you to a detail page. See here for the progress so far. However, at the minute our links page only has the post id and nothing mentioning the post title. This is simply a case of adding another variable (title) to the querystring, see here for an updated page. For simplicity I’ve used a single title (you would normally fetch the title from a database) and included hyphens to seperate words (search engines recognioze this as a space). Adding hyphens between words is a simply a case of running the title through a function. As the one I use is a at work I shamelessly used the one from the html blog. Here’s the PHP to generate our links page (note, I used a simple loop to output the links for quickness, in reality this list would come from a database):

function friendlyURL($string){
$string = preg_replace("`\[.*\]`U","",$string);
$string = preg_replace('`&(amp;)?#?[a-z0-9]+;`i','-',$string);
$string = htmlentities($string, ENT_COMPAT, 'utf-8');
$string = preg_replace( "`&([a-z])(acute|uml|circ|grave|ring|cedil|slash|tilde|caron|lig|quot|rsquo);`i","\\1", $string );
$string = preg_replace( array("`[^a-z0-9]`i","`[-]+`") , "-", $string);
return strtolower(trim($string, '-'));
}

$prettyTitle =  friendlyURL("seo friendly urls with mod rewrite");

for ($i = 1500; $i <= 1520; $i++) {
  echo "<p><a href=\"news-detail.php?postID=$i&amp;title=$prettyTitle\">New Item Headline</a></p>";
}

Now comes the time to update our htacess file with the following rule:

# This is a comment: Rewrite news-detail.php?postID=1234&title=text-text to /1234/text-text
RewriteRule ^(.*)/([a-zA-Z-]+)$ /news-detail.php?postID=$1&title=$2 [QSA,L]

On the page listing I’ve amened how our links are printed out (using the new pretty structure) and to show its working added an example of when an invalid article id is entered (E.g. when fetching it from our database). E.g. lets say article id 1503 is not in our database.

<?php
if ($_REQUEST['postID']=='1503') {

echo "Article Not Found!";

} else {
?>

    	<h1><?php echo str_replace("-","&nbsp;",$_REQUEST['title']); ?> (ID <span class="highlight">
                       <?php echo intval(htmlentities($_REQUEST['postID'])); ?></span>)</h1>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
        illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
        voluptas nulla pariatur?</p>

<?php }  ?>

That’s it in all honesty. I can’t show you an example on this server as WordPress uses the same structure. You can download the source files to play with.

This technique can easily be used in various forms for ecommerce sites – E.g. domain.com/product/1234/bath-tub and in blogs or news systems. It’s a big subject andf I’ve only covered the basics here.

In fact, using sprites are so effective many of the internets biggest site’s are using them, all in slightly different ways. On such sites a truely huge number of requests are saved every day. For example, Youtube, Google, AOL,  Amazon and Apple all use CSS sprites. Take the mimilist example of Google (left):

Google CSS Sprite

Youtube, does things slightly different and uses a absolutely massive sprite 2800px in height! You’ll notice that some sprites are tightly packed together and other have spacing around each image. This is to allow for browser based text sizing, that would otherwise display multiple background images. A good example of planning for such an occurance is Digg’s sprite, where each image is highly spaced out.

The CSS is relatively simple. Take the example of a simple unordered list with a different image for each item. I made a very simple sprite and applied the background-position property to each link class. Here’s the simple HTML used for the list:

<ul id="sprites">
	<li><a class="exclamation" href="#">Top Product</a></li>
	<li><a class="hot" href="#">Sizzlin Offers</a></li>
	<li><a class="offer" href="#">Special Deals</a></li>
</ul>

..and the CSS:

#sprites li {
 	list-style-type:none;
	font-size:1.1em;
	display: inline;
}
#sprites li a {
	background-image:url('yada.png');
	background-repeat:no-repeat;
	padding:5px 35px;
	line-height:35px;
	text-decoration: none;
	color: #333;
}
#sprites li a:hover {
text-decoration: underline
}
#sprites li a.hot {background-position:0px -165px}
#sprites li a.exclamation { background-position: 0px 0px; }
#sprites li a.offer { background-position: 0 -82px; }

The final result is a horizontal list, using a single image for the icons – no CSS hacks required for correct display in all the latest browsers! I won’t bother explaing the HTML or CSS as is self explanatory and very simple.

I personally find CSS sprites most useful for application icons as I can easily add a new icon class and set the background position accordingly. For instance, I’m currently working on a project that uses a lot of the fabulous famfamfam silk icons and have used a sprite similar to that on their site. While this is a lot of work initially, my recent discovery the sprite generator has limited this work load.

Sprites can be used a for avriety of things, including simple image rollovers – see a quick example I put together using a simple hyperlink and a single background image (image from devianrt). When I hover on the logo the background-position property simply shifts the spirite to right. You can view the result right here!

As with everything, you can take this idea a stage further and apply some JQuery to the mix to create an amazing Flash like menu.

<script src="/js/jQuery.min.js" type="text/javascript"></script>

The preferred and better way is to host your JQuery through Google E.g.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

So, why is this better? Well there are several valid reasons:

CDN (Content Delivery Network) – Google’s datacenters are located over a range of locations and when a user requests content the closest location is automatically chosen. This is better because it does not force users to download from a single server location (E.g your server) and the chances are Google will be able to serve content faster than your webhost. A similar theory is used for the popularweb based game called quakelive. Usually CDN‘s are a service you pay for, but you’re getting this free through Google!

Less server load – When all your website’s files are located on a single server, downloading them simulainiously increases server load and some users will recieve delays while files download. By having an external location for your JQuery library the latter is not an issue.

Improved caching – This is the biggest benefit as users will not have to re-download content. Hosting JQuery on your own server will cause a first time visitor to download the whole file, even if they have several copies of the same file from other sites. Through Google’s CDN, re-requests for the same file will result in a response to cache the file for up to one year, as it understands that it is a repeat request for a duplicate file.

Local Bandwidth savings – by letting Google host the file for you, you are in essence saving bandwidth. For personal sites this may not be an issue, but busy sites will notice significant bandwidth savings.

Google actually suggests using a .load() function to load the library (see below), but this not only interrupts JQuery’s killer feature (document.ready), but also causes an extra HTTP request. Personally I prfer the old fashioned script method, even though there are several other valid reasons to use the .load() method.

<script type="text/javascript"
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
  google.setOnLoadCallback(function() {
  });
</script>

Another less known theory is that spiders get full when crawling a page, semantic coding practice will allow for cleaner and more lightweight code. For instance, when crawling a badly coded page with lots of line styles and JavaScript (E.g. content not useful to a spider) the spider may become full too quickly and leave – missing you important content contained further on within the page.

Validating your site to at least xHTML Transaitional 1.0 (the test strict version, compared to xHTMl 1.0 Strict) is highly encouraged and is an area often ignored by developers. Below, I’ll quickly outline some of the common validation errors and how to easily fix them:

cannot generate system identifier for general entity X - 99% of the time this relates to errors with entity references such as ampersands in URLs. E.g. having an url like product.php?id=2&mode=view would result in this error as the ‘&’ wasn;t used within the url.

required attribute “alt” not specified –  simply find the line number and add an alt tag for the image. The presence of an alt tag is required for both transitional and strict doc types.

XML Parsing Error: Opening and ending tag mismatch – Depending on how organised you are when coding this fix can take a matter of seconds or a lot longer. It relates to unclosed block level tags, such as a table or div. One plus point is that fixing such an error often results in several validation errors being fixed at once.

required attribute “TYPE” not specified – This relates to no type attribute being specified for things like script and style tags. Solution – use the type tag like this: <script type=”text/javascript” language=”javascript” src=”scripts.js”>

There is no attribute “HEIGHT” - xHTML does not allow for the presence of the height attributer. To resolve, add an inline style or better, specify the height within the css rule for that element.

NET-enabling start-tag requires SHORTTAG YES or document type does not allow element “META” here – caused by incorrect use of short tags for the page’s doctype. For example if you have specified an HTML doctype then you use use <br> instead of <br />.

ID ‘someDivname’ already defined – caused when you have used two dividers on the same page, with the same id. Solution, uses div class instead of div id if you need multiple dividers on one page.

Missing a required sub element of HEAD - almost definately caused by missing xHTML required tags from the head section. E.g. have you included a title tag (required in all HTML documents.