How to make the most of search engine traffic

Many of you have already seen websites highlighting searched keywords to improve accessibility. Using the same concept of parsing the referring url we can adjust the website to improve the chances that the user will find what they are looking for. Here are a couple of examples I have written to give an idea of the many ways it can be used.

Example 1

The first example of it being used can be seen by going to the search page and clicking the top link Web Design Sydney.

These examples are google specific as that is what the vast majority of our users use. It is possible to add multiple search engine matching though.

Here is the code for how it is used on Rival Web Design with comments

$(document).ready(function(){

// Gets the referrer URL and matches it against a regular expression
// for google, if it finds matches it gets the keywords and puts
// them in the array aa.
if (!document.referrer)
return;
var matches = document.referrer.match(/[?&]q=([^&]*)/);
if (!matches)
return;
var terms = matches[1].replace(/\+/g, ' ');
aa = terms.split(' ');

// There are six buttons on the site labelled with the corresponding
// class names in the sections array.
var sections = ['web','logo','cms','email','seo','gfx'];
var active = [];
var match = 0;

// This function goes through all the keywords found and matches
// them against this switch. The ones that match then update the
// active and nomatch variables so that the next functions know what
// to update
$.each(aa, function(aIndex){
switch(aa[aIndex]){
case 'website':
case 'site':
case 'custom':
case 'ecommerce':
case 'web': active[0] = 1; match = 1; break;
case 'logo': active[1] = 1; match = 1; break;
case 'cms':
case 'management':
case 'content': active[2] = 1; match = 1; break;
case 'email':
case 'marketing': active[3] = 1; match = 1; break;
case 'search':
case 'traffic':
case 'seo': active[4] = 1; match = 1; break;
case "graphic":
case "graphics":active[5] = 1; match = 1; break;
default :;
}
});

// For each of the keywords matched in the switch it will change
// the state of the correct images to the colored state
// and set the z-index so that the lightbox is underneath them.
$.each(sections, function(bIndex){
if (active[bIndex] == 1) {
$('.' + sections[bIndex] + '').parent().css('z-index', '50');
$('.' + sections[bIndex] + '').addClass("active");
}
else {
}
});

// Adds the lightbox and post-it note to the page if there is a match.
if (match==1){
$('body').prepend("<div class='lightbox'></div><div class='post-it'></div>");

// The function to restore the page to normal when the user clicks any of
// the page except the highlighted images.
$('.lightbox').add($('.post-it')).click(function(){
$('.post-it').remove();
$('.lightbox').remove();
$('.sections').removeClass('active');
});
}

});

While the above example may be too overt for most people it is just as easy to do something subtle such as changing a picture to reflect a different promotion.

Example 2

This is the code for demo 2. In this example the promo image is changed if a search term is matched. If multiple words are matched then the last keyword the user enters in their search is the one that will be displayed.

$(document).ready(function(){

if (!document.referrer)
return;
var matches = document.referrer.match(/[?&]q=([^&]*)/);
if (!matches)
return;
var terms = matches[1].replace(/\+/g, ' ');
aa = terms.split(' ');

function promoImg(fruit){
$('#promo-image').attr("src","images/" +fruit+ ".jpg");
}

$.each(aa, function(aIndex){
switch(aa[aIndex]){
case 'apples':
case 'apple': promoImg("apple"); break;
case 'orange':
case 'oranges': promoImg("orange"); break;
default :;
}
});

});