Question

我正在使用精灵图片来链接图标，但没有文字关联。我想知道你认为什么是与SEO有关的最佳方法。

以下是一些如何完成标记的示例：

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

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

精灵，标题属性链接

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

精灵，链接标题属性和/或缩进锚文本（文本缩进：-9999）

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

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

谢谢！

编辑：

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

使用alt文字和使用精灵的透明图片

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

Answer 1

This question and answer的Pro Webmasters完全涵盖了这一点

Answer 2

在这种情况下，最好的搜索引擎优化是你的第三个例子，使用图像文本替换。但是你会在iPhone Retina 4显示器上遇到问题，因为双像素化，你可以通过这个媒体查询@media only屏幕和（-webkit-min-device-pixel-ratio：2）来定位它{}

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

精灵背景图片的最佳方法，SEO

2 个答案: