CODEWITHSUNDEEP
htmlcssseocss-sprites
dzm
dzm

Reputation: 23554

Best method for sprite background images, with SEO

I'm using sprite images for icons that are linked, but no text associated. I'm wondering what you feel is the best method as it relates to SEO.

Here are a few examples of how the markup could be done:

No Sprites, Just images. This would work, but with 50+ icons, it's not ideal to have each one a separate image

<a href="#">
  <img src="icon1.gif" alt="SEO Text" />
</a>

Sprites, Link with title attribute

<a href="#" class="sprite icon1" title="SEO Text">&nbsp;</a>

Sprites, Link with title attribute and/or indented anchor text (text-indent: -9999)

<a href="#" class="sprite icon1" title="SEO Text">SEO Text</a>

Or maybe something completely different?

Thank you!

EDIT:

Another option I found could be:

Transparent image with alt text and using sprites

<img src="transparent.gif" class="sprite icon1" alt="SEO Text" />

Upvotes: 1

Views: 2010

Answers (2)

albert
albert

Reputation: 8153

the best thing for SEO in this case imo is your 3rd example, using image-text replacement. however you're going to have problems on iPhone Retina 4 display, because of the double pixelation, which you can fix by targeting it with this media query @media only screen and (-webkit-min-device-pixel-ratio: 2) {}

however if images are turned off or in Windows when high contrast mode is enabled, this causes an accessibility issue. so your best bet is to use your first example, and change the images appearance via {clip:}. you can read more about it here http://www.paciellogroup.com/blog/2010/01/high-contrast-proof-css-sprites/

Upvotes: 1

John Conde
John Conde

Reputation: 219884

This question and answer at Pro Webmasters covers this perfectly

Upvotes: 0

Related Questions