CSS Image Replacement For Fixed Width Themes

June 20th, 2008 by Mack

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.

PLAIN TEXT
CSS:
  1. #logo{ width:257px;float:left;height:119px;background: url(../images/lobolinks.gif) no-repeat left top;}
  2.  
  3. #logo h1 {display:none;}

PLAIN TEXT
HTML:
  1. <div id="logo"><h1>Lobo Links Blog</h1></div>

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.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Mixx
  • Reddit
  • Technorati

Related Post

  • CSS Image Replacement, The How To - CSS Image replacement is very affective for style sheet based themes. The advantage of using image replacement is compatibility for screen readers or ...
  • iWebTool Creates a Directory List - To my shock, I find that iWebTool has created their own directory list that allows regular (free) and commercial (paid) listings. To list a commercial ...
  • Add Mixx to the Wordpress Sociable 2.0 Plugin - You can add a Mixx icon to your Wordpress Sociable plugin in less than 5 minutes.  I will provide both manual edits and modified files.  Eit ...

This entry was posted on Friday, June 20th, 2008 at 7:33 pm and is filed under How To, Internal SEO. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response

  1. By Dennis Edell on Jun 21, 2008 | Reply

    Another one for the tech folder "just in case" ;) thanks!

Leave a Reply