精灵背景图像的最佳方法，具有 SEO
我使用精灵图像作为链接的图标，但没有关联的文本。我想知道您认为与 SEO 相关的最佳方法是什么。
以下是如何完成标记的一些示例：
没有精灵，只有图像。这可行，但对于 50 多个图标，让每个图标都有一个单独的图像并不理想
<a href="#">
<img src="icon1.gif" alt="SEO Text" />
</a>
精灵，带有标题属性的链接
<a href="#" class="sprite icon1" title="SEO Text"> </a>
精灵，带有标题属性和/或缩进的链接锚文本（文本缩进：-9999）
<a href="#" class="sprite icon1" title="SEO Text">SEO Text</a>
或者可能是完全不同的东西？
谢谢你！
编辑：
我发现的另一个选项可能是：
带有替代文本和使用精灵的透明图像
<img src="transparent.gif" class="sprite icon1" alt="SEO Text" />
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"> </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" />
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在这种情况下，SEO 最好的事情是你的第三个例子，使用图像文本替换。但是，由于双像素化，您在 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/
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/
此问题与解答位于 Pro Webmasters 完美地涵盖了这一点
This question and answer at Pro Webmasters covers this perfectly