Alt для фотографий товаров: правила и примеры для галереи
Как написать alt по роли изображения: главное фото, деталь, повтор, схема и кнопка галереи. Примеры текстовых альтернатив и проверка результата в опубликованной карточке.
Alt фотографии товара должен передавать её смысл в контексте страницы. Для информативного кадра кратко опишите вещь и значимую видимую деталь; для декоративного или полностью избыточного изображения может требоваться пустой alt="". Если картинка служит единственным содержимым кнопки или ссылки, прежде всего должно быть понятно назначение действия.
Alt — атрибут изображения, текстовая альтернатива для случаев, когда визуальная информация недоступна. Его используют в том числе экранные дикторы — программы, озвучивающие интерфейс. Это не место для перечня поисковых фраз. Размеры, формат и загрузка файлов рассматриваются отдельно в статье об оптимизации изображений товаров.
Сначала определите роль кадра
Один и тот же файл может выполнять разные задачи. Фото рюкзака в галерее показывает устройство вещи, а его миниатюра в кнопке может открывать конкретный кадр. Поэтому альтернативу выбирают по роли элемента, а не только по имени файла.
| Роль изображения | Что должно быть доступно без картинки | Пример решения |
|---|---|---|
| Главное информативное фото | Какой товар показан и существенный вид | «Зелёный рюкзак „Лес“, вид спереди» |
| Отдельная деталь | Новая информация этого кадра | «Открытый передний карман рюкзака „Лес“» |
| Чистое украшение | Дополнительной информации нет | Пустой alt="" |
| Единственное содержимое кнопки | Что произойдёт при действии | Доступное название «Показать вид рюкзака сзади» |
| Схема с важными данными | Все необходимые значения | Краткий alt и полные данные настоящим текстом рядом |
Пустой alt и отсутствующий атрибут — разные решения. Пустая строка сообщает, что изображение можно пропустить в данном контексте. Не удаляйте атрибут просто потому, что не успели написать описание. У кнопки при этом должно оставаться доступное название; декоративная миниатюра не должна делать действие безымянным.
Что писать в описании товара
Назовите вещь так, чтобы она была узнаваема, затем добавьте ракурс или деталь, ради которой сделан кадр. Бренд и модель полезны, когда различают изображения в этом контексте. Не повторяйте всё описание карточки: вместимость, гарантия и обещание прочности не становятся видимыми свойствами только потому, что товар снят на белом фоне.
«Купить рюкзак недорого цена доставка Москва» не описывает фотографию. «Зелёный рюкзак „Лес“, вид спереди» передаёт конкретный смысл без рекламного запроса. Если на фото крупно показана застёжка, напишите о ней; слово «фото 3» сообщает лишь положение в галерее.
Длина определяется необходимой информацией. Не стремитесь дописать alt до заданного числа символов и не обрезайте значимый смысл ради предполагаемого SEO-лимита. Если объяснение сложное, вынесите данные в доступный текст страницы, сохранив альтернативу краткой.
Учебный разбор галереи рюкзака
Представим вымышленный товар «Лес» и пять кадров. Все детали ниже — условия учебного примера; они не описывают реальную продаваемую модель. Сначала составим перечень того, что действительно показывают изображения, затем напишем альтернативы.
| Кадр | Что он добавляет | Текстовая альтернатива |
|---|---|---|
| Рюкзак целиком спереди | Общий вид и зелёный цвет | «Зелёный рюкзак „Лес“, вид спереди» |
| Вид сзади | Спинка и две плечевые лямки | «Спинка и плечевые лямки рюкзака „Лес“» |
| Передний карман открыт | Как открывается конкретный карман | «Открытый передний карман рюкзака „Лес“» |
| Почти тот же вид спереди | В этом примере новой информации нет | Проверить необходимость кадра или его избыточную роль |
| Схема размеров | Высота, ширина и глубина | «Схема размеров рюкзака „Лес“» и значения текстом рядом |
Для первого информативного изображения HTML может выглядеть так. Путь условный: в магазине используйте настоящий файл.
<img
src="/media/les-green-front.webp"
alt="Зелёный рюкзак «Лес», вид спереди"
width="800"
height="1000"
>
У схемы в учебном примере есть значения: высота 42 см, ширина 28 см, глубина 14 см. Добавьте их обычным текстом или таблицей характеристик рядом с изображением. Одного alt «размеры» недостаточно, чтобы человек узнал эти числа. При обновлении схемы проверьте и текст; соответствие товару важнее совпадения шаблона.
Не назначайте четвёртому кадру пустой alt автоматически только потому, что он похож на первый. Сначала проверьте, не показывает ли он другую комплектацию, поверхность или положение детали. Если он действительно не добавляет информации, можно удалить повтор либо оформить его как избыточный в подходящем контексте. Если изображение отдельно открывается кнопкой, сначала сохраните понятное название этого действия.
Миниатюры, подписи и другие поля
Название товара, подпись, alt, атрибут title и имя файла не взаимозаменяемы. Подпись видна в тексте страницы, title не заменяет полноценную альтернативу, имя файла не объясняет назначение кнопки. В административной панели поле «описание изображения» может использоваться по-разному: проверяйте опубликованный результат.
Для миниатюры, открывающей вид сзади, доступное название кнопки должно сообщать этот переход. Если имя уже задано самой кнопке, изображение внутри может быть декоративным с пустым alt. Если изображение одно задаёт имя действия, его alt должен помочь понять, что откроется. Проверяется весь элемент управления, а не только заполненность поля у файла.
Когда название товара и изображение входят в одну ссылку, повтор одного названия дважды может быть избыточным. Если же это две отдельные ссылки и картинка — единственное содержимое одной из них, пустая альтернатива способна оставить её без понятного имени. Такая разница объясняет, почему массовое правило «в каталоге всем картинкам пустой alt» требует проверки разметки.
Что alt даёт поиску
Google использует alt вместе с анализом изображения и содержимым страницы для понимания картинки; Яндекс также рекомендует описательные альтернативы для графики. Это не гарантия индексации или роста позиций. Ключевые слова уместны, когда естественно называют показанный товар, а не заменяют описание коммерческой фразой.
Хороший alt не исправит недоступный файл или фотографию неверного цвета. Если на изображении есть существенные сведения, сохраните их и в тексте. Правила подготовки самой галереи есть в статье о количестве и назначении фотографий.
Как проверить и заполнить большой каталог
Начните с нескольких разных шаблонов: товар с одним кадром, подробная галерея, варианты цвета, ссылка каталога и схема. Для каждого запишите файл, роль, подтверждённые детали, соседний текст и alt. Не подставляйте материал или модель, если исходные данные неизвестны; уточните их по товару.
Откройте опубликованную страницу и найдите нужный элемент изображения в инструментах разработчика. Сверьте фактический alt с полем панели: шаблон мог заменить его названием товара или применить один текст ко всем ракурсам. Затем пройдите галерею клавиатурой и экранным диктором. Без изображения должны быть понятны отдельные детали и назначение кнопок; прослушивание на одной странице не заменяет проверки других шаблонов.
Для массового заполнения шаблон «товар + проверенный ракурс» годится только при надёжных исходных данных. Не генерируйте «вид сзади» из порядкового номера файла. После смены цвета или загрузки новых кадров пересмотрите альтернативы; ошибочная конкретика хуже краткого точного описания.
Частые вопросы
Нужно ли писать слово «фото» в каждом alt?
Обычно оно не добавляет смысла. Назовите товар и значимую деталь. Слово уместно, если само различие между фотографией, рисунком или схемой помогает понять содержание, а не ради обязательного начала фразы.
Должны ли все alt в галерее быть разными?
Описания должны соответствовать смыслу кадров. Если ракурсы различаются, назовите различие. Если смысла дважды нет, не выдумывайте его ради уникальности: пересмотрите необходимость повтора и роль изображения в интерфейсе.