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