ghettocooler.net – In a class of it's own. » Replace Your Logo! CSS Image Replacement

Thursday, December 07, 2006 (Replace Your Logo! CSS Image Replacement)

This technique has been around for so long, but still too many people are not using it. It’s one of the easiest first steps you need to take toward making your site semantically correct and search engine friendly (see the final result in action).

Never, ever, put a company logo as a straight up image in HTML. It needs to be recognized by Google and if it’s just an image sitting in your code, no one can find it.

Let Google know your logo is an important item on your site by dropping it in an <h1></h1>. Then let Google read and index your company name by using real text, not an image:

The HTML for your logo should look like this:

<h1>My Company</h1>

Now use some CSS to replace your text with an image (Use the width & height of your own image):

* {margin: 0;padding: 0;}
h1 {
display: block;
width: 250px;
height: 46px;
text-indent: -9999px;
background: transparent url(my-company.jpg) no-repeat 0 0;
}

Usually you’ll be linking your logo to your home page too, which is just as easy to accomplish:

The HTML:

<h1><a href="/" title="My Company">My Company</a></h1>

And the CSS for your anchor tag:

h1 a {
display: block;
width: 100%;
height: 100%;
outline: none;
}

It’s as simple as that! Go edit your logo’s HTML.

See the final result in action, disable CSS styles to see it through google’s eyes. View source, copy & paste.

Update: For even more search engine love, be more descriptive in your H1:

<h1>My Company - My Companies Main Goal</h1>

Or, use any HTML element you deem most appropriate.

Did you find this post helpful?

Posted in code, interweb

23 comments:

cbmeeks #

Pretty cool. But are you sure putting your logo in tags really help that much?

cbmeeks
http://www.codershangout.com
Bill #

Indeed, it helps bounds.

Use it elsewhere too. Surely you have some images that shouldn’t be ignored by Google and are just dying to be H2′s.
Stewart #

Sounds like an incorrect use of heading tags.
http://www.w3.org/TR/html4/struct/global.html#h-7.5.5
“A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.”
For example, some screenreaders can generate a list of the headings on a page.
Kim Siever #

The first-level heading should be reserved for the title of the page, not for a logo.
DRoss #

Ahh love the newbies and their skeptical comments above – trust me, use an h1 or p or whatever you want to image replace your logo.
alvin #

I’m not sure who’s the newbie, DRoss? Semantically, you shouldnt even replace your logo with css background image.

A logo is more of a content itself rather than a presentation element.

And by using h tags to wrap around your image, you can ensure a somewhat graceful degradation when the image is not available.

For example: http://www.simplebits.com/notebook/2005/10/05/bplogos.html
Billy G #

Stewart – a logo replaced by text CAN indeed be describing the topic of the section. It just depends on the site/section.

Kim – strange. Your http://www.hotpepper.ca pepper logo is being replaced with an H1.

This technique is great. Ghetto Cooler like rules!!!!!!
sj #

I prefer using an ordered list for my logo.
Ben #

SJ: “I prefer using an ordered list for my logo.”

Why? That’s an improper use of an ordered list…
Bill #

SJ was kidding on that one. Good stuff.
Carlos Eduardo #

It’s better to use “overflow: hidden;”, because when you click on the link (in Firefox), it shows a “dotted border”, which is very ugly…
So, if you use that property, that border doesn’t show anymore.
nicolash #

background images are often not printed – and thats the (only one) i really want on a printout. I to opt for the mentioned simplebits option. (http://www.simplebits.com/notebook/2005/10/05/bplogos.html)
Jake Rutter #

Ok, interesting idea. But what happens when someoneone wants to print your page out, we all know that background images dont print out right? So it looks good on the web, its crawlable by search engines, but it doesnt look good when printed. Also you can use alt and title tags for SEO on images.
Bill #

Carlos – a {outline:none;} takes care of those outlines in Firefox.

Very true – background images don’t print.
Andy #

Bill: you’d probably want to use a print stylesheet for that, no?
David #

If you use this method and want your logo to be shown when printed you add an image logo into your html and add a class to it called print-logo or whatever. In the screen.css you have display: none for that class…in the print.css you have it showing and you hide the replaced text h1.
Mediaman #

Just use a different image for the print version. Hide it in the Screen CSS and hide the replaced one in the Print CSS. It’s better to use a different image for the print version anyway, so you can scale it and have a high resolution one on the print out.
Billy G #

F print!!
Kim Siever #

Yes it is, Billy G. I have a lot to do to update that website. The cobbler’s children always go without shoes.
Kim Siever #

If you go to my bread and butter site, however, you will see that the h1 tag is used for the title of the page (not including the front page):

http://www.uleth.ca/man/
gonzo #

noice thanks bill.
Joren Rapini #

This is not a good idea.

Reason #1 as Stewart pointed out, it is an improper use of the H1 tag according to w3c and is not semantically correct.

#2 Search engines pay attention to issues like #1. Also, by wasting your only h1 tag (Google is only going to pay attention to the first h1) you are seriously crippling how well your website indexes. In actuality, you are telling the search engines that every page on your website is about the name of your company. Each page of a website should focus on different keywords, otherwise the site is competing with itself for the same keywords.
Mike Johnston #

Just wanted to say thank you for posting this. It made it easy to copy / paste directly.. I’ve used this technique before but i am one of those people who constantly forgets to write things down so I’m glad your site was first on Google. Made life easier.

Cheers,
Mike

23 comments:

DRoss #

alvin #

Billy G #

Andy #

David #

Billy G #

Mike Johnston #

Leave a Comment: