Search engine friendly website headers

Search engine optimization is a big thing when it comes to building websites. If you have any strong hopes for building a good flow of traffic to your site search engines are without a doubt one of the best options available to you, unless of course you have an awful lot of money to spend.

Another important issue with regards to web design is appearance – how your website looks and feels to the user. After all, if your site doesn’t look good then it won’t do much good for your site as a brand and may even make visitors go elsewhere.

This tutorial covers a very useful CSS trick which both looks great and is great for SEO purposes. Basically, we’re going to create a website header using the trusty h1 tag but style it with your sites logo so that it looks brilliant.

Okay, let’s start with the HTML markup.

[html]
<div id="siteheader">
<h1><a href="http://webdevelopmentblog.net/"><span>Web Development Blog</span></a></h1>
</div>
[/html]

What we have above is quite simple. A div with an id of “siteheader”, inside it a h1 tag. Within the h1 tag is a link with text, anchor text of that link surrounded with span tags.

Now for a little CSS.

[css]
#siteheader h1 {
width: 200px;
height: 80px;
}

#siteheader h1 a {
display: block;
width: 200px;
height: 80px;
background: url(logo.png);
}

#siteheader h1 a span {
display: none;
}
[/css]

Can you see what’s happening? It’s quite simple really.

Firstly we are giving our h1 and link a fixed width and height, this should be the exact same size as our site logo image. Then, by setting the background of our link to be our logo the logo shows up in place. If we had left it there the logo would be visible but the links anchor text would be put over the top which is no good. So, to solve that we use a span tag which then in the CSS is set to not be displayed.

This works well because search engine spiders only look at raw HTML and do not apply any of the CSS rules which our browsers use. This means that when a spider comes and visits our site they see the optimized h1 tag packed with our site name and keywords. But then, when a regular visitor views our website they’re presented with a nice looking logo.

You don’t have to stop just there. You can use this CSS trick to make almost anything look that little bit better. Have a play around and do some experimenting to see what you come up with.