Изображения используются на сайтах в различных целях. Они могут быть использованы как кнопки навигации, маркеры списка, логотипы, иконки и так далее. Большинство посетителей сайтов смогут понять предназначение изображений, просто посмотрев на них, однако бывают случаи, когда пользователи не смогут этого сделать.
Случаи, когда изображения могут остаться непонятыми:

  • Слепые или плохо видящие пользователи, использующие программы для чтения экрана
  • Пользователи, отключившие отображение картинок в браузере
  • Пользователи, использующие по той или иной причине браузеры, отображающие только текст
  • Боты поисковых систем не понимают изображения

Язык разметки гипертекста (HTML) позволяет добавлять текстовое описание для изображений, чтобы пользователи и программы могли понимать их в вышеуказанных случаях. Это делается при помощи атрибута alt, например:

<img src="http://www.mywebsite/images/sobaka.jpg" alt="Моя собака">

Атрибут alt изображения играет большую роль в юзабилити сайта и является важным инструментом в поисковой оптимизации (SEO). Заполнение атрибута предоставляет пользователям с ограниченным доступом дополнительный слой функциональности, который улучшает удобство использования сайта. Это также позволяет ботам поисковых систем понимать, что именно отражают картинки, что в свою очередь помогает им ранжировать сайты на страницах результатов поиска (SERP). К примеру, если пользователь совершает поиск по изображениям с запросом «большая коричневая собака», ему будут выданы картинки с атрибутом alt, в котором присутствуют ключевые слова «собака» и «коричневая».

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

Работа с изображениями и alt текстом

Для использования в вебе, изображения должны быть в одном из следующих форматов – gif, jpeg, png, bmp, svg, webp.

Название файла изображения должно быть описательным, а не универсальным, как DSC123569.jpeg.

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

Указывайте ширину и высоту изображения в HTML. Это позволит браузеру знать размеры изображения ещё до его загрузки и зарезервировать необходимое для его отображения пространство. Это сократит движение элементов по странице во время её загрузки. Размеры указываются следующим образом:

<img src="http://www.mywebsite/images/sobaka.jpg" alt="Моя собака" width="450" height="200">

Если у вас есть текст, важный для продвижения сайта в поисковых системах, не используйте его в виде изображения – убедитесь в том, что текст может быть прочитан и что поисковая система расценит его как часть содержания странички.

Советы по alt тексту

Текст в атрибуте alt должен быть описательным и не должен превышать 10 слов. Следующие примеры показывают правильное, неправильное и удовлетворительное использование атрибута:

  • Неправильно:
    <img src="http://www.mywebsite/images/sobaka.jpg" alt="">
  • Удовлетворительно:
    <img src="http://www.mywebsite/images/sobaka.jpg" alt="Собака">
  • Правильно:
    <img src="http://www.mywebsite/images/sobaka.jpg" alt="Это моя собака по имени Ринго">

Для поисковой оптимизации в alt атрибуте стоит указывать ключевые слова, но не перебарщивайте с этим. Например, если на картинке изображены мужские часы, не стоит делать так:

<img src="http://www.mywebsite/images/chasi.jpg" alt="часы для мужчин, мужские часы, мужчина часы, часы на мужчине">

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

Если вы используете изображение для навигации по сайту, укажите это в атрибуте alt. Например, если изображение используется как кнопка «Контакты», то и в атрибуте alt для неё необходимо указать «Контакты».

Для изображения логотипа компании в alt тексте лучше вписать «Логотип компании». Некоторые люди пишут “На главную страницу» в атрибуте alt логотипа компании при нажатии на который, пользователь перенесётся на главную страницу, но этого стоит избегать. В большинстве случаев в alt тексте лучше описать изображение, нежели то, куда перенаправит ссылка.

В теге img в HTML также можно указывать title (название) изображения и этот атрибут часто путают с alt текстом. Название изображения будет видно только для посетителя сайта, в то время как alt атрибут может прочитать и поисковый бот. Например, атрибут title со значением «Узнайте больше» можно использовать для изображения со ссылкой, ведущей на следующую страницу.

Когда использовать пустой alt атрибут

Используйте пустой alt атрибут для изображений, применяемых как разделители. Подобные картинки обычно невидимы и служат для расположения других элементов на страничке. Пустой alt текст указывается следующим образом:

<img src="http://www.mywebsite/images/transparent.gif" alt="">

Используйте пустой alt текст для иконок, маркеров списка, каймы и т.д. Можно также задать стили для маркеров списка и иконок при помощи каскадных таблиц стиля (CSS), что полностью избавит от необходимости задавать alt текст.

Правильно используя атрибут alt изображений, вы облегчите использование сайта и улучшите впечатление пользователей о вашем сайте, что поможет вам в увеличении аудитории.

Комментарии закрыты.