It’s been awhile since my last post, and that means business has been good. I have a series of great new client projects to work, and that has kept me pretty busy. However, I needed a break from the layout and coding, so I thought I would add a new entry to the blog. This one deals with the use, or lack of use, of www on your sites URL, how it can affect your search engine rankings, and what you can do to correct the issue.

First, what really is the issue with using www or not you might ask. For one, it’s an issue of what is the best URL to serve for a given web page, otherwise referred to as canonicalization. Most of us would consider the following to be the same thing:

grademyshades.com
www.grademyshades.com
www.grademyshades.com/index.htm

Actually, the list could be a lot longer, and in this case these all point to the same page… but they don’t have to. Each of these URLs could actually represent a different page, and that’s how the search engines see it, as different pages. Just check out the following image for reference:

Notice above how Google has listed both grademyshades.com and www.grademyshades.com as two separate listings. So what’s the big deal? The deal is two-fold. First, search engines don’t like duplicate content and will very often hand out penalties because of it. This is exactly how the search engines see this - as duplicate content - two different pages with identical information and this is something you should definitely avoid. Second, search engines place a lot of weight on links from other sites to your pages. Let’s say that some of those links include the www in the url, and some do not. You are essentially splitting those links up between what the search engine sees as two different pages, and neither version of your page will rank as well as if all those links were pointed to the same page.

Good news, there is a simple fix that essentially makes the non-www version non existent. Just add the following bit of code to your .htaccess file (place in the root directory of your website - and replace domain.com with your domain) :

RewriteCond %{HTTP_HOST} !^www\.domain\.com [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [L,R=301]

What this does is redirect any requests for the non-www version of you site to use the www version. It also issues a 301 permanent redirect code, so that the search engines will know to only index the www version. And there you have it - 2 simple lines of code to prevent or help correct what could be a big problem for your search engine optimization efforts.

Want more information on the subject? Here’s a good link from an industry insider on the subject of canonical urls (primarily from a google point of view) that should help answer more questions.

There is an issue with Internet Explorer adding white space when it isn’t really wanted (at least in my opinion). I haven’t noticed the problem with Firefox. The situation occurs when a line break exists in the html, but other than that there are no spaces or other elements that “should” display on the page in the browser. For example, let’s say I have several images that I want to appear side by side on the page and have no space between them, as when slicing images. My code might look like the following:

<img src="images/logo_left.gif" />
<img src="images/logo_right.gif" />

which would result in:

I think you see what I mean by unwanted space. One fix is to make sure there is no whitespace (carriage return, line feed, or space) between the image tags in the html, which is simple but can make for sloppy code and would look like this:

<img src="images/logo_left.gif" /><img src="images/logo_right.gif" />

It doesn’t look all that bad here, but if you have a lot of images, or a lot of parameters to include with your image (noborder, height, width, etc), it can make the underlying html pretty sloppy. But, you can get the layout you want:

However, I prefer a simple CSS solution. In my stylesheet, I add the following class:

.imageNowrap {
white-space:nowrap;
display:block;
float:left;
}

I can then add this class to each of my images (except the last image in the row), like so:

<img src="images/logo_left.gif" class="imageNowrap" />
<img src="images/logo_right.gif" />

and again get the desired result, this time with cleaner, more readable html. If your images span several rows, then something like this will work (remember to keep the <br /> on the same line of html as the last image on the row):

<!--// ROW 1 //-->
<img src="images/logo_top_left.gif" class="imageNowrap" />
<img src="images/logo_top_right.gif" /><br />
<!--// ROW 2 //-->
<img src="images/logo_low_left.gif" class="imageNowrap" />
<img src="images/logo_low_right.gif" /><br />
I am sure there are other solutions, so I would be happy to hear them.

UPDATE: 13 Feb 2008

I had a visitor contact me stating that he had used this solution with success on one page of his site, but the solution failed to work on another page. After reviewing his source, I noticed something critical that I thought I would pass on here. The page that was not working did not have a DocType specified. For this solution to work, be sure that the first line of HTML includes the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">