Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use <img> with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}
share|improve this question
1  
That looks like a sound solution, not only for SEO, but also for screen readers and css-less browsers. Note: I'm sure you mean src rather than href in your <img> tag. –  Alasjo Jan 10 '12 at 9:35
    
Thanks @Alasjo - yes I did mean 'src' and have corrected the example. Thanks again. –  Prembo Jan 10 '12 at 23:12
    
@Alasjo: Many screen readers are CSS aware, and won't read something with a display:none rule applied to it - we've had to "hide" stuff by using the margin-left: -1000px mechanism or similar (456bereastreet.com/archive/201108/…) –  Zhaph - Ben Duguid Jan 13 '12 at 13:22
    
@Zhaph-BenDuguid interesting, but still the img is visible and has an alt properly set, which a screen reader would read, right? –  Alasjo Jan 13 '12 at 14:54
    
Yes, the screen readers will pick up the alt text, as would the search engines. –  Zhaph - Ben Duguid Jan 13 '12 at 15:05

3 Answers 3

up vote 2 down vote accepted

I don't really understand why you would use CSS image replacement in this case when the image ALt Tag would suffice? I am an SEO and I wouldn't recommend that approach to a client.

While it is true that it is not really known how much Googlebot can parse JS or CSS, I wouldn't rule it out (but neither would I categorically state that Googlebot understands both either). It is that uncertainty that is the issue.

As a rule I wouldn't recommend hiding any content like this unless you have to. Hiding content on one page is not going to cause you any problems but when taken across many pages it is going to start raising some flags with Google and when the number of those flags reaches a tipping point, you may see something happen to your rankings (especially if there are other things going on a well).

This is a contentious issue within the SEO community though with many people saying it is fine. SEOmoz is the best forum for general SEO consensus...take a look at the articles below (some for image replacement and some against) and see what you think:

http://www.seomoz.org/pages/search_results?q=css+image+replacement

share|improve this answer

Use the alt attribute, that's what it's for.

The only time I might condone this technique is for:

<style>
input span { display: none; }
input { width: 50px; height: 20px; background-image: url('imgs/your-button.jpg');
</style>

<input type="submit"><span>Text</span></input>

Since you can't put image code in the input's value attribute in this instance.

share|improve this answer

If I were you, I will show the badge at default html.

When page.load(), use JS to hide it.


For the hidden content issue you may concern:

  • If you have lots of other content, and only this piece is hidden, don't worry
  • Also, if you have js to display it, Googlebot understand JS, so don't worry

For decent use, like the badge on stackexchange websites, is normal and no problem at all.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.