Best semantic structure & SEO optimised approach for image replacement for badges?

Question

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;
}

Answer 1

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

Answer 2

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.

Answer 3

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.