Атрибут alt: что писать в описании картинки и зачем
Ещё говорят: alt изображения, альт, альтернативный текст, title у картинки
alt — атрибут изображения с текстовым описанием того, что на картинке. Его читают вслух программы чтения с экрана, он показывается вместо картинки, если та не загрузилась, и по нему поисковик понимает содержимое изображения. Для ссылки-картинки alt работает ещё и как анкор.
Главный потребитель alt — не поисковик, а человек, который не видит изображение. Поэтому правило одно: описывайте картинку так, как описали бы её по телефону.
Три задачи одного атрибута
- Доступность программа чтения с экрана произносит alt вслух. Для незрячего посетителя это единственный способ узнать, что на картинке.
- Подстраховка картинка не загрузилась — браузер показывает текст описания вместо пустого места.
- Понимание содержимого поисковик по alt понимает, что изображено, и может показать картинку в поиске по изображениям.
Порядок здесь не случайный: SEO тут третья задача по важности.
Что писать
| Картинка | Плохо | Хорошо |
|---|---|---|
| Фото товара | окна купить москва недорого | Белое пластиковое окно с двумя створками |
| Скриншот отчёта | seo | Отчёт Вебмастера: показы выросли с 400 до 1200 за месяц |
| Фото команды | команда | Артур, основатель GoodTarget, за рабочим столом |
| Логотип в шапке | логотип | GoodTarget — на главную |
| Декоративный узор | фон декор | alt="" — пустой, осознанно |
Последняя строка важна: у чисто декоративных изображений alt должен быть пустым: атрибут на месте, значение пустое. Пустой atl говорит программе чтения «пропусти», отсутствующий заставляет её зачитывать имя файла.
alt и title — разное
| alt | title | |
|---|---|---|
| Что это | описание картинки | всплывающая подсказка |
| Кто читает | экранный диктор, поисковик, браузер при ошибке | человек с мышью, если задержит курсор |
| Нужен ли | да, всегда (иногда пустой) | почти никогда |
| На телефоне | работает | не показывается вовсе |
Дублировать alt в title смысла нет: на мобильных подсказка не появится, зато экранный диктор прочитает оба текста подряд.
Частые ошибки
- Ключевые фразы вместо описания — это Переспам, и он виден сразу.
- Одинаковый alt у всех картинок сайта (обычно название компании).
-
Имя файла вместо текста:
IMG_20240517.jpg. - «Картинка», «фото», «изображение» — слово, которое ничего не добавляет.
- Атрибут отсутствует у ссылки-картинки: поисковику нечего взять как анкор.
- Описание на три строки: диктор зачитает всё целиком.
Даёт ли это трафик
Поиск по картинкам приводит людей, но редко тех, кто готов купить: человек искал картинку. Исключение — товары, мебель, интерьеры, готовые работы: там переход из картинок бывает вполне целевым.
Поэтому alt заполняют ради доступности и понятности страницы; трафик из поиска по картинкам тут идёт довеском. Трафик — приятный побочный эффект.
Частые вопросы
Нужно ли вставлять ключевые слова в alt?
Только если они естественно описывают изображение. «Белое пластиковое окно» — нормально, потому что на картинке действительно оно. «Окна купить Москва недорого» — переспам, и он бьёт по странице целиком.
Что писать для декоративных картинок?
Пустой alt: alt="". Именно пустой: так экранный диктор пропустит изображение молча. Без атрибута он начнёт зачитывать имя файла.
Какой длины должен быть alt?
Одно предложение, обычно до 125 знаков. Ориентир простой: столько, сколько вы сказали бы, описывая картинку человеку по телефону — не больше.
Нужен ли title у изображения?
Почти никогда. Это всплывающая подсказка. На мобильных она не работает вовсе. Экранному диктору копия alt только мешает.
