CSS спрайты вредны для SEO?

18

В настоящее время часто то, что было достигнуто с помощью <img>тега, теперь делается с чем-то вроде <div>с помощью фонового изображения CSS, установленного с использованием «спрайта» CSS и смещения.

Мне было интересно, какое влияние он оказывает на SEO, так как мы фактически теряем altатрибут (который индексируется Google) и застреваем с атрибутом title (который, насколько я понимаю, не индексируется).

Это существенный недостаток?

seo css

— UpTheCreek
источник

25

По этой причине спрайты CSS должны использоваться только для декоративных элементов - используйте <img>для элементов, которые являются специфическими для страницы, и используйте спрайты для декоративных элементов, которые контекстуально не относятся к представленному контенту.

Если вам нужно изображение кнопки для ваших элементов навигации, имеет гораздо больше смысла добавить это изображение в качестве фона ссылки навигации, а не разметки, как это:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(т. е. там, где содержимое изображения избыточно по отношению к текстовому содержимому на странице, или содержимое изображения может быть лучше всего описано как «украшение»)

В качестве дополнительного бонуса за разделение элементов шаблона сайта в качестве спрайтов, вы позже сможете изменить «обложку» сайта, изменив таблицу стилей вместо того, чтобы перезаписывать старые файлы изображений дизайна или переписывать всю разметку HTML.

— danlefree
источник

Я согласен с вашими соображениями и добавил бы, что одной из основных целей / преимуществ спрайтов является их более высокая скорость загрузки для общей производительности сайта. Предполагается, что более быстрая загрузка страниц помогает в ранжировании SEO, поэтому я думаю, что это вопрос правильного инструмента для правильной работы.

— digit1001

@ digit1001 - действительно ли такие боты, как googlebot, загружают все ресурсы, связанные со страницей?

— UpTheCreek

4

Вы можете использовать <img>теги со спрайтами CSS:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png может быть прозрачным пикселем 1x1, сжатым до <50 байтов.

Стиль:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

Таким образом вы получаете оптимизацию производительности от спрайтов и сохраняете свои altтеги.

— JohnnyFaldo
источник

Я уверен, что если Google может составить поисковую систему со сложными процессами для ранжирования и индексации 30 триллионов страниц, он может обнаружить утверждения 1x1 пикселей и альт.

— Рикки Бойс

1

@Ricky B Дело не в том, обнаружат ли они это, а в том, что они странно оштрафуют вас за это, что было бы странно, поскольку они оштрафовали бы вас за сокращение времени загрузки страницы и количества запросов, что они склонны поощрять: )

— JohnnyFaldo

1

altТег переоценивать. Я думаю, что слишком много людей стараются изо всех сил, чтобы убедиться, что у них есть altтеги на своих страницах. Я не верю, что тебе больно не иметь его. Нужно просто убедиться, что у imgвас есть altтег, которому он назначен.

Я считаю, что время загрузки и производительность сайта оказывают большее влияние на SEO в целом, чем altтеги, и для каждого запроса изображения или HTTP-запроса сайт будет замедляться. Цель CSS-спрайта - помочь свести к минимуму эти запросы и ускорить время загрузки страницы.

— Брэндон Буттарс
источник

5

altТекст также используется для чтения с экрана. Я думаю, что вы могли бы иметь другое мнение об альтернативном тексте, если бы вы были слепы.

— MikeTheLiar

1

Я склонен использовать спрайты для декоративных иконок, они не имеют ничего общего со страницей в целом, поэтому для SEO это хорошо. Любой набор изображений, которые имеют одинаковые размеры и не влияют на смысл страницы, являются хорошими кандидатами на использование спрайтов CSS.

— Проворный нуб
источник