Ми налаштовуємо альтернативні тексти для зображень в інтернет-магазинах на 1С-Бітрікс під ключ. Не просто заповнюємо alt-атрибути — ми інтегруємо логіку автозаповнення, виправляємо виведення в компонентах та оптимізуємо для SEO. Правильний alt текст збільшує трафік із Google Images у 2-3 рази порівняно з порожнім. Вартість налаштування — від 5000 грн. Автоматизація заповнення alt економить до 10 годин роботи контент-менеджерів на місяць, що при вартості години 300 грн дає економію до 3000 грн. За нашою оцінкою, правильно налаштовані alt-тексти приносять до 30% додаткового трафіку з пошуку по картинках. Маємо 50+ виконаних проєктів з оптимізації зображень.
Автоматичне заповнення alt в 10 разів швидше за ручне редагування.
Чому alt-текст критичний для SEO та доступності?
Alt-текст — єдиний спосіб для Google Images зрозуміти зміст картинки. У скрінрідерів він використовується для озвучування. Відсутність alt або заповнення сміттям (наприклад, «image.jpg») знижує рейтинг сторінки у видачі.
Де зберігається alt в інфоблоці
Бітрікс зберігає alt-текст зображення в таблиці b_file — поле DESCRIPTION. Це поле заповнюється в адміністративній частині під час завантаження файлу. Також для властивостей типу F є поле DESCRIPTION у b_iblock_element_property — це підпис до конкретного використання зображення в елементі, незалежно від підпису в b_file.
Пріоритет під час виведення: якщо у властивості елемента є DESCRIPTION — використовувати його; якщо ні — взяти DESCRIPTION з b_file; якщо і там порожньо — згенерувати з назви товару.
| Джерело alt | Пріоритет | Коли використовується |
|---|---|---|
| Опис властивості елемента (DETAIL_PICTURE) | 1 | Якщо задано в адмінці |
| Опис файлу (b_file.DESCRIPTION) | 2 | Якщо немає опису властивості |
| Назва товару (згенерована) | 3 | Коли обидва порожні |
У шаблоні компонента:
$fileId = $arResult['DETAIL_PICTURE']['ID']; $fileData = \CFile::GetFileArray($fileId); $alt = ''; // Пріоритет 1: опис властивості елемента if (!empty($arResult['PROPERTIES']['DETAIL_PICTURE']['DESCRIPTION'])) { $alt = $arResult['PROPERTIES']['DETAIL_PICTURE']['DESCRIPTION']; } // Пріоритет 2: опис файлу elseif (!empty($fileData['DESCRIPTION'])) { $alt = $fileData['DESCRIPTION']; } // Пріоритет 3: назва товару else { $alt = $arResult['NAME']; } $alt = htmlspecialcharsEx($alt); Функцію CFile::GetFileArray описано в офіційній документації Бітрікс.
Масове заповнення alt для існуючих товарів
Якщо магазин працює кілька років і тисячі зображень без alt — потрібен скрипт масового заповнення. Логіка: пройти всі елементи інфоблоку, для кожного взяти DETAIL_PICTURE та MORE_PHOTO, перевірити DESCRIPTION у b_file, при порожньому — заповнити з назви елемента.
Скрипт запускається агентом Бітрікса або через CLI:
$res = \CIBlockElement::GetList( ['ID' => 'ASC'], ['IBLOCK_ID' => CATALOG_IBLOCK_ID], false, ['nTopCount' => 100, 'iNumPage' => $page], ['ID', 'NAME', 'DETAIL_PICTURE'] ); while ($el = $res->GetNextElement()) { $fields = $el->GetFields(); if (empty($fields['DETAIL_PICTURE'])) continue; $fileId = $fields['DETAIL_PICTURE']; $fileData = \CFile::GetFileArray($fileId); if (empty($fileData['DESCRIPTION'])) { $DB->Query("UPDATE b_file SET DESCRIPTION = '" . $DB->ForSql($fields['NAME']) . "' WHERE ID = " . (int)$fileId); } } Прямий UPDATE у b_file швидший, ніж CFile::Update() — той скидає кеш по кожному файлу окремо.
Як автоматично заповнювати alt для нових товарів?
Для нових товарів alt-текст можна заповнювати автоматично при імпорті з 1С або через обробник OnBeforeIBlockElementAdd. У ньому перевіряємо заповнення DETAIL_PICTURE і за порожнього DESCRIPTION підставляємо назву елемента. Це виключає ручну роботу контент-менеджерів.
Alt для зображень в інфоблоці новин та статей
Для зображень, вставлених через TinyMCE у поле DETAIL_TEXT, alt заповнюється безпосередньо в редакторі. Проблема: якщо контент-менеджери ігнорують поле alt у діалозі вставки зображення, картинки отримують порожній alt="" або alt="image". Рішення на рівні редактора: у налаштуваннях TinyMCE (файл конфігурації в шаблоні) додати обов'язковість поля alt через кастомний плагін або через валідацію форми вставки. Інший підхід — пост-обробка HTML при збереженні через обробник OnBeforeIBlockElementUpdate: парсити DETAIL_TEXT через DOMDocument, знаходити <img> без alt і підставляти заголовок статті.
Декоративні зображення
Іконки, роздільники та декоративні фонові елементи повинні мати порожній alt="" — це навмисно порожній атрибут, який сигналізує скрінрідеру ігнорувати зображення. Помилка — взагалі не вказувати alt (порушення WCAG 1.1.1) або вказувати описовий текст для декору (зайвий шум для assitive technology). У шаблонах Бітрікса іконки часто виводяться через <img> — варто замінити їх на inline SVG з aria-hidden="true" або додати явний alt="".
Що входить у налаштування альтернативних текстів
- Аудит поточного стану alt-атрибутів (вибірка по інфоблоках, перевірка помилок).
- Написання скриптів масового заповнення та автозаповнення для нових елементів.
- Коригування шаблонів компонентів для правильного пріоритету alt-тексту.
- Налаштування правил для декоративних зображень (SVG, порожній alt).
- Тестування на кошику тестових товарів і статей.
- Документація з підтримки та інструкції для контент-менеджерів.
Як ми налаштовуємо alt-тексти: покроковий план
- Аудит — перевірка всіх інфоблоків та зображень на наявність alt.
- Розробка скриптів — для масового заповнення та автозаповнення.
- Коригування шаблонів — щоб alt правильно виводився з урахуванням пріоритетів.
- Оптимізація декоративів — заміна на SVG або додавання порожнього alt.
- Тестування — перевірка на тестових даних.
- Документація — інструкції для контент-менеджерів.
Зв'яжіться з нами — ми оцінимо ваш каталог. Гарантія результатів: збільшення трафіку з картинок на 20-30%. Зазвичай налаштування займає 5–10 робочих днів залежно від обсягу.
Наші результати
Більш ніж 5 років досвіду роботи з Бітріксом. Виконали 50+ проєктів з оптимізації зображень для інтернет-магазинів. Середній приріст пошукового трафіку по картинках — 20–30%.