Атрибут альт (alt) — это альтернативный текст, описание того, что на картинке.

В Сафари альт будет не видно, если в стилях тега img явно не заданы размеры или если этих размеров недостаточно, чтобы текст альта в них уместился

Альт будет видно, когда картинка не загрузилась. Например, из‑за нестабильного интернета или когда картинки по ссылке не нашлось на севере. В этом случае альт поможет понять, что было на картинке.

В Сафари альт будет не видно, если в стилях тега img явно не заданы размеры или если этих размеров недостаточно, чтобы текст альта в них уместился

<img 
  src="https://cats.com/persian/9001.jpg" 
  alt="Рыжая персидская кошка точит когти об когтеточку">
Рыжая персидская кошка точит когти об когтеточку

Ещё на альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из её альта. Может быть ситуация, когда сама страница в глубине поисковой выдачи, а картинка из неё по тем же запросам висит в топе Яндекс‑ или Гугль‑картинок.

Пластинка далеко за первым десятком в обычной поисковой выдаче
Но в поиске по картинкам такой же товар с того же сайта уже среди топовых результатов

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

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

В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.

P. S. Внешний вид альта можно стилизовать ЦССом, иногда пригождается:

<style>
  img {
    font-family: Arial, sans-serif;
    font-size: 13px;
    text-align: center;
    color: #0450fe;
  }
</style>
      
<img 
  src="https://cats.com/persian/9001.jpg" 
  alt="Рыжая персидская кошка точит когти об когтеточку">
Рыжая персидская кошка точит когти об когтеточку

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы