: Best semantic structure & SEO optimised approach for image replacement for badges? In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation

@Looi9037786

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.

Vote Up Vote Down

@Heady270

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:
www.seomoz.org/pages/search_results?q=css+image+replacement

Vote Up Vote Down

@Cody1181609

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.

Vote Up Vote Down