Skip to content
Search engines 5511dd3

CSS Image Replacements and SEO

O

The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

Table of Contents

O

CSS Image Replacements and SEO

The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

Using image replacements in a CSS driven site is becoming a very common practice. SEOmoz uses it all over the place - if you view the source of our homepage you'll see:
  <div id="what_is_seomoz">
    <h1><span>What is SEOmoz?</span></h1>
  <p>
SEOmoz is a Seattle based search engine optimization company.
We provide SEO / Web Marketing ...
</p>

   </div>

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_seomoz h1 { background: url(/some/background/image.gif) no-repeat; }

 #what_is_seomoz 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).

Back to Top

With Moz Pro, you have the tools you need to get SEO right — all in one place.

Read Next

How to Optimize E-commerce Sitemaps with 1M+ Pages — Whiteboard Friday

How to Optimize E-commerce Sitemaps with 1M+ Pages — Whiteboard Friday

May 17, 2024
7 Ways SEO and Product Teams Can Collaborate to Ensure Success

7 Ways SEO and Product Teams Can Collaborate to Ensure Success

Apr 24, 2024
6 Things SEOs Should Advocate for When Building a Headless Website — Whiteboard Friday

6 Things SEOs Should Advocate for When Building a Headless Website — Whiteboard Friday

Apr 19, 2024

Comments

Please keep your comments TAGFEE by following the community etiquette

Comments are closed. Got a burning question? Head to our Q&A section to start a new conversation.