Найти в Дзене
Макхост

Как корректно прописать атрибут alt для изображений

Оглавление

Неотъемлемой частью любого веб-ресурса выступают различные медиа файлы (инфографика, изображения фотография, рисунки). Может многие воспринимают их сопутствующими элементами к основному текстовому контенту, это не верно. Значимость медиа растет, на них реагируют поисковые системы. Чтобы поисковики понимали, что конкретно изображено, требуется некий вспомогательный инструмент. Поэтому для всех изображений, находящихся на сайте, прописывают атрибут alt. О нем пойдет речь.

Что такое alt

Alt – особенный атрибут, созданный для различного вида изображений, включающий в себя дополнительную информацию, рассчитанную, в первую очередь, на поисковиков. Это является дополнительным фактором, влияющим на ранжирование. Веб-проект становится удобнее, фотографии, изображения попадают в раздел Картинки на платформе Яндекс, Images на Гугле.

Image by macrovector on Freepik. Подписывайтесь на канал «Макхост» в Яндекс.Дзен — полезные статьи о хостинге каждую неделю!
Image by macrovector on Freepik. Подписывайтесь на канал «Макхост» в Яндекс.Дзен — полезные статьи о хостинге каждую неделю!

Зачем нужно указывать значение img alt

Чтобы разместить иллюстрацию на ресурсе, в HTML применяется тег <img>, имеющий вспомогательный элемент – атрибут alt, отвечающий за текстовое описание иллюстрации, фото.

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

В каких случаях <alt> не нужен

Однако, рассмотрим случаи, когда атрибут не требуется:

  • Изображение, которое служит просто для оформления веб-странички;
  • Использование иконок, так как их роль – декоративная;
  • На аватарках, если использованы любые рисунки, фото.

Правила заполнения <alt>

<Alt> прописывается внутри <img> в коде HTML ресурса. Для правильного прописывания атрибута существует ряд правил:

  • Инструмент должен конкретизировать описание изображения. Не «Животное», а «Лиса летом», «Заяц зимой»;
  • Состоять не более чем из 125 символов или использовать до 5 слов;
  • Желательно упоминание ключевого слова, словосочетания;
  • Не повторять в атрибуте titles текущей страницы;
  • Принимать во внимание содержание страницы – информационного характера, коммерческого. От этого зависит на что будет акцентироваться внимание пользователей.

Распространенные ошибки

При размещении изображений на сайте часто допускаются следующие ошибки:

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

Как проверить наличие атрибута alt

Предлагается два способа, чтобы определить наличие этого инструмента:

  1. Посредством браузера. Зайдите в настройки, запретите отображать выбранное фото, иллюстрацию. Далее посетите любой ресурс, посмотрите, высветился ли текст вместо изображения. Есть описание – значит с атрибутом alt все в порядке.
  2. Проверку можно сделать с помощью панели разработчика. Для этого войдя в нее, необходимо выделить картинку, перейти в кластер Исследовать элемент. В появившемся коде должны находиться <img>, <alt>.

Заключение

Мы постарались высветить роль атрибута alt для изображений, а также для SEO-продвижения. Ответили на вопросы, как правильно его прописывать, каких ошибок стоит избегать.

Самое главное, понимать, с какой целью были добавлены иллюстрации, фотографии на веб-площадку, с помощью каких ключевых слов посетители, клиенты смогут попасть на страницу, где эти картинки размещены.

«Макхост» — премиальный хостинг для проектов любой сложности. Поддержка работает 24/7. Перенесем ваши проекты от другого хостинг-провайдера бесплатно. 🎁