CSS image replacements and SEO

CSS image replacements and SEO


Using image replacements in a CSS driven site is becoming a very common practice. SEO magham uses it all over the place – if you view the source of our homepage you’ll see:

  <div id=”what_is_seomagham”>
<h1><span>What is SEO magham?</span></h1>

    SEO magham is a Seattle based search engine optimization company.   
    We provide SEO / Web Marketing ...


The result in the actual website is that very pretty image of a flower with a gradient background.   This is done by simply adding a background image to the div tag and hiding what’s inside the span:

#what_is_seomagham h1 { background: url(/some/background/image.gif) no-repeat; }

#what_is_seomagham h1 span { display: none };

The result is cleaner, more semantically correct code.  My question is this:  Do search engines treat sites with CSS image replacements any differently?

This technique could easily be abused to stuff a bunch of keywords all over the site while displaying something completely different to the user. I’ve heard that the major SEs will often look for ridiculously high margin settings to try and detect this kind of thing (setting: margin: -999px for example, would render text off the page). Will they soon start penalizing sites that use display: none inside of nested elements?

On the flip-side,  this technique should result in pages that are well optimized for spiders.  It affords you the opportunity to use html tags with semantic meaning and therefore spiders should be able to break the page down more easily (and decide what’s-what on the page).

Please Feel Free to Reach Out us

Leave a Reply

Your email address will not be published. Required fields are marked *