Early on in my blogging career, I wrote a how to for css image replacement and today I am here to tell you that does not work for fixed width themes such as our new one.? So, it took some poking around to find out what would.? The objective here was to have our name in a h1 format for search engines, while showing our user’s a beautiful image.

[css]#logo{ width:257px;float:left;height:119px;background: url(../images/lobolinks.gif) no-repeat left top;}

#logo h1 {display:none;}[/css]

[html]

[/html]

Verifying Your Changes

To verify our changes for such we use two methods.

1. You can use www.seo-browser.com

2.? If you have the web developer plugin for Firefox, you can simply disable your CSS stylesheet.

This method may also be useful for inline images contained in your page context where a negative text-ident will not. You can replace h1 with span or just about anything. The thought process is that it is contained by the original logo div and has display:none; for what is being contained. The only reason this works well for search engine bots is because they do not load your style sheet. Some might argue that this is a cloaking method, but I just consider it good SEO. I believe it would be classified as abusive if we were using anything other than our sitename/title. It is a real grey area for SEO.

Posted in How To, Internal SEO • Tags: cascading style sheets, CSS, fixed-width themes, image replacement, search engine optimization, SEO, web design, web design tutorial