One thing I ensure I do on all sites is to develop for two audiences at once. The first audience is of course the end user of the site. This user has CSS enabled, and can view all the prettyness of the site in all its original intended glory. But I also develop the site for text-based browsers, search engines and those with CSS disabled. The advantage of this is that the page is semantically correct. You have <h1> tags around the site title, <h2> around the page title and so on. Menus are in <ul> unordered lists, and so on. Semantically correct pages are instantly more SEO-effective. Working at Netbasic has shown me how important that is 
! In addition, for the small population that use text-based browsers, it enables them to view the site without mess.
If you have a nice logo to display, and you don’t want to display a big bulky <h1> tag on your page, there’s a really easy way of doing that:
<div class="site-title">
<h1>Your Site Name</h1>
</div>
This markup is great for search engines. Search engines will see the <h1> tag and notice that “Your Site Name” is the page’s main title. Little things like this help search engines determine what your site actually contains, as opposed to the hugely ineffective method of repeating a load of words several thousand times in tiny text…
The way to make that neat semantic code look nice and pretty is with CSS, in order to hide that “Your Site Name” text but display your nice company logo instead…
div.site-title
{
background-image: url('/images/your-company-logo.png');
}
div.site-title h1
{
display: none;
}As you can probably tell, what this CSS does is ask the browser to display your company’s logo as the background image to this div, and hide the <h1> text.
There’s another issue though – how do we make that lovely logo clickable to go to the home page? That’s easy too, and semantically.
<div class="site-title">
<h1>Your Site Name</h1>
<a href="/home/page/url"><span>Click here to go to the home page</span></a>
</div>
We modify the CSS as well to hide the text itself (in the <span>) but make the anchor (the <a>) tag into a block, which turns it into a link that covers the entire logo.
div.site-title
{
background-image: url('/images/your-company-logo.png');
}
div.site-title h1
{
display: none;
}
div.site-title a
{
display: block;
width: 300px;
height: 60px;
}
div.site-title a span
{
display: none;
}We’ve used a similar trick here to hide the text that should only appear when CSS is turned off. As mentioned, we explicitly set the dimensions of the anchor tag to fill the dimensions of the logo image.
That’s all there is to it, and search engines will love that as opposed to just using something like this for your logo:
<a href="/home/page/path"><img src="/images/company-logo.png" title="Company logo" /></a>
The search engine or text-based user looking at your site will be able to see clearly what the page title is, and it will load really quickly as unless you’re applying the CSS styles, there will be no images to load, which makes it an all-round winner really!
I’m not saying this is the best way of doing it, but I’ve found it to be quite clever and I use it. If someone’s got some better ideas out there, why not add a comment with your idea
