Лучший метод для спрайтовых фоновых изображений с SEO - PullRequest
1 голос
/ 08 сентября 2011

Я использую спрайт-изображения для иконок, которые связаны, но текст не связан. Мне интересно, что вы считаете лучшим методом, поскольку он относится к 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> 

А может, что-то совсем другое?

Спасибо!

EDIT:

Другая найденная мною опция может быть:

Прозрачное изображение с альтернативным текстом и спрайтами

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

Ответы [ 2 ]

0 голосов
/ 15 сентября 2011

Лучшая вещь для SEO в этом случае - ваш третий пример, использующий замену изображения-текста. однако у вас будут проблемы с дисплеем 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/

0 голосов
/ 08 сентября 2011

Этот вопрос и ответ на Pro Webmasters охватывает это прекрасно

...