使用 SEO 获取精灵背景图像的最佳方法

Question

我将精灵图像用于链接的图标，但没有关联的文本。我想知道您认为与 SEO 相关的最佳方法是什么。

以下是一些如何进行标记的示例：

没有精灵，只有图像。这可行，但有 50 多个图标，让每个图标都有单独的图像并不理想

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

Sprites，带有标题属性的链接

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

Sprites，带有标题属性和/或缩进锚文本的链接（文本缩进：-9999）

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

或者可能是完全不同的东西？

谢谢！

编辑：

我发现的另一个选项可能是：

带有替换文字和使用精灵的透明图片

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

Answer 1

在这种情况下，对 SEO 来说最好的事情是 imo 是您的第三个示例，使用图像文本替换。但是，由于双像素化，您将在 iPhone Retina 4 显示屏上遇到问题，您可以通过使用此媒体查询@media only screen 和 (-webkit-min-device-pixel-ratio: 2) 来解决此问题{}

但是，如果在启用高对比度模式的情况下关闭图像或在 Windows 中，则会导致可访问性问题。所以你最好的选择是使用你的第一个例子，并通过 {clip:} 更改图像外观。你可以在这里阅读更多关于它的信息http://www.paciellogroup.com/blog/2010/01/high-contrast-proof-css-sprites/

Answer 2

This question and answerPro Webmasters 完美地涵盖了这一点