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


<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"


div.accreditationItem h4, div.accreditationItem p {
    display: none;
  • 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
    Commented Jan 10, 2012 at 9:35
  • Thanks @Alasjo - yes I did mean 'src' and have corrected the example. Thanks again.
    – Prembo
    Commented Jan 10, 2012 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/…) Commented Jan 13, 2012 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
    Commented Jan 13, 2012 at 14:54
  • Yes, the screen readers will pick up the alt text, as would the search engines. Commented Jan 13, 2012 at 15:05

3 Answers 3


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:



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

The only time I might condone this technique is for:

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

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

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


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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