Your Site’s Logo – The SEO Way

A site’s logo is an element that’s always there, but a lot of designers still treat it as just an image.
It’s time to change that. If we treat the logo as just an image, google will treat it that way too. But we want google to treat your company’s logo like an important heading element, right?

Using the stechnique I will describe now, we will make <a> element that holds your logo, and can still display an alternative heading to search engines.

The Code

HTML:

<a href="link-to-your-homepage.html" class="logo"><h1>Company Name<h1></a>

CSS:

a.logo {

	background-image: ('link-to-your-logo-image.jpg');
	background-repeat: no-repeat;
	width: 200px; //* Change to correct width *//
	height: 200px; //* Change to correct height *//
	text-indent: -9999px;
	display: block;

}

As you can see, the core of the code up here is the usage of a background-image for the link element, and the usage of text-indent.
Text indent makes sure your text indents (duh). What this means in our case is that it is effectively moving the text 9999 pixels off-screen, so that we as end users do not see it.
The search engine bots that crawl your site however, will see the content in there.

So now, in stead of showing search engine bots an image, we are giving them the heading they need: your company name.

Last notes

This approach has another minor design advantage, you can give your logo a nice and fancy hover effect (check the logo on top of this site). It was created using the same technique, and adding a simple :hover element in the css.

Continue Reading...