精靈背景圖像的最佳方法，與搜索引擎優化

我使用精靈圖像鏈接的圖標，但沒有文字關聯。我想知道你覺得什麼是最好的方法，因爲它涉及SEO。精靈背景圖像的最佳方法，與搜索引擎優化

下面是標記如何可以做了幾個例子：

沒有精靈，只是圖像。這會工作，但50歲以上的圖標，這不是理想的各有一個單獨的圖像

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

精靈，鏈接與title屬性

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

精靈，鏈接與title屬性和/或縮進錨文本（文本縮進：-9999）

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

，或者可以是完全不同的東西？

謝謝！

編輯：

我發現了另一種選擇可能是：

與ALT文字透明的形象和使用精靈

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

來源

2011-09-08 dzm

最好在這種情況下搜索引擎優化的東西是你的第三個例子，文本替換。然而，由於雙像素化，您可以通過使用此媒體查詢@media only屏幕和（-webkit-min-device-pixel-ratio：2）將其定位，從而解決iPhone Retina 4顯示屏上的問題。 {}

但是，如果在啓用高對比度模式時關閉圖像或在Windows中，則會導致可訪問性問題。所以你最好的選擇是使用你的第一個例子，並通過{clip：}改變圖像外觀。你可以在這裏閱讀更多關於它http://www.paciellogroup.com/blog/2010/01/high-contrast-proof-css-sprites/

來源

2011-09-15 07:32:08 albert