После импорта у всех фотографий появился alt (текстовое описание изображения), но многие значения одинаковы: «Купить товар недорого» или просто артикул. Отчёт о заполненности показывает улучшение, а человек, который не видит изображение, по-прежнему не понимает, что на нём представлено. Проверьте, описывают ли подписи сами фотографии, а не только заполнены ли поля.
Alt нужен в контексте конкретного изображения и его роли на странице. Для главного фото, схемы подключения и декоративной рамки решения будут разными. Допустим, вы импортировали данные поставщика в каталог светильников. Начните с нескольких разных товаров, чтобы проверить, не заменил ли импорт осмысленные подписи общим текстом.
Выберите разные фото и ручное описание
Добавьте карточку с несколькими цветами и старую запись, отредактированную человеком до импорта. Первая выявляет связь alt с вариантом, вторая — риск перезаписи качественного описания. Уточните, какие поля импорт обновляет всегда, а какие заполняет только при отсутствии значения.
Не считайте поле медиабиблиотеки окончательным доказательством. Один файл может использоваться в разных местах, а тема может брать alt из названия товара, игнорируя сохранённые сведения изображения. Проверять нужно опубликованный HTML в каждом выбранном контексте, а не только окно редактирования файла в CMS.
Определите роль картинки
Для декоративных изображений может быть уместен пустой alt="". Это не то же самое, что отсутствие атрибута: вспомогательные технологии могут по-разному обработать такие варианты. Не заполняйте декоративный элемент списком ключевых фраз ради отчёта. Подход к выбору разобран в дереве решений W3C по alt.
Проверьте соседний текст и назначение ссылки. Если изображение и название товара находятся в одной ссылке, текстовый эквивалент должен учитывать уже доступное название, а не создавать бессмысленное повторение. Для кнопки, которая состоит только из картинки, описание действия особенно важно: пользователь должен понимать, что произойдёт при активации.
Сравните alt с изображением
Отмечайте различия по их смыслу. Неверный цвет мешает выбору варианта; обещание функции, которой не видно на фото, создаёт лишнее утверждение; название сайта в каждом alt не описывает товар. Не требуйте добавлять все характеристики каталога в одно поле: текст должен передать нужную информацию изображения.
Для схемы размеров краткий alt может называть её назначение, а подробные значения лучше предоставить доступным текстом на странице. Если важные габариты существуют только внутри рисунка, одного общего описания «Схема товара» недостаточно. Решение касается и содержания карточки, а не только одного атрибута.
Откуда импорт берёт описание
Для этих фотографий можно выбрать такие подписи:
| Изображение | Что пришло от поставщика | Что вывести на странице |
|---|---|---|
| Главное фото чёрной модели | Название и цвет варианта | alt="Чёрный светильник L-24, вид спереди" |
| Фото разъёма | Подпись «разъём питания» | alt="Разъём питания светильника L-24" |
| Схема размеров | Только имя файла | alt="Размеры светильника L-24", сами размеры — текстом рядом |
| Декоративная подложка | Название бренда | alt="", если подложка только украшает страницу |
Запишите правило для отсутствующих данных и для ручного описания. В настройке импорта исключите ручной alt из перезаписи, если поставщик не должен его обновлять. Иначе первая проверка пройдёт, а следующий ночной обмен вернёт одинаковые автоматические подписи на весь каталог.
Переключите вариант товара
Посмотрите миниатюры галереи. Они могут повторять главное изображение, быть самостоятельными ссылками или кнопками переключения. Для элемента управления важно доступное название действия; alt вложенной картинки не следует считать единственным возможным способом его задать. В DevTools откройте Accessibility и посмотрите доступное имя кнопки: оно должно объяснять, какой ракурс она открывает.
При использовании адаптивных форматов убедитесь, что выбранный источник показывает тот же предмет. Если мобильный файл обрезан до детали, описание общего ракурса может стать неточным. Не смешивайте техническое сжатие и смысловую замену изображения: у них разные критерии проверки.
В консоли браузера выведите подписи фотографий открытой карточки:
[...document.images].map(img => ({ файл: img.currentSrc, alt: img.getAttribute("alt") }));Для чёрного L-24 ожидается описание чёрного светильника. После выбора белого варианта должны измениться и файл, и соответствующий alt. null означает отсутствие атрибута, "" — намеренно пустое значение; для декоративного изображения оно может быть правильным.
Оцените смысл описаний
Google рассматривает alt вместе с другими сведениями страницы при понимании изображения; рекомендации доступны в официальном руководстве по изображениям. Это не основание заполнять атрибут повторяющимися запросами и не обещание роста позиций после импорта.
В отчёте разделите заполненность, соответствие изображению и доступность важной информации. Например, отметьте, какие фото вы прочитали: главное изображение, разъём, схема и декоративная подложка. Рядом перечислите оставшиеся ошибки — неверный цвет, перезаписанная ручная подпись или размеры, доступные только внутри рисунка.
Настройку обработки файлов можно дополнить руководством по оптимизации изображений. Если импорт одновременно изменил размер и качество фото, отдельно используйте инструкцию по сжатию. Уменьшение файла не подтверждает правильность его подписи.
Запустите следующий импорт на тестовых товарах
Ручное описание сохранилось, новое фото получило подходящий alt, декоративная подложка осталась с пустым атрибутом. Для схемы размеры доступны текстом рядом. Проверка непустых полей сама по себе не показывает качество этих описаний.
Читайте также: Оптимизация изображений, Сжатие изображений, Технический аудит страницы.