AI-генерація alt-текстів для товарних зображень
Alt-текст у зображення виконує дві функції: допомагає пошуковику зрозуміти вміст сторінки та робить сайт доступним для незрячих користувачів. У більшості інтернет-магазинів alt-теги або порожні, або містять лише назву файлу на кшталт IMG_4821.jpg. Це втрачений SEO-сигнал і порушення доступності. Згідно з WCAG 2.1, порожній alt-атрибут робить зображення декоративним, а інформативні зображення зобов'язані мати опис. Для каталогу з 10 000 товарів ручне заповнення alt — близько 200 годин роботи копірайтера, що обходиться бізнесу у значну суму.
За наявності тисяч товарних зображень задача вирішується автоматично — або на основі даних про товар, або через мультимодальний аналіз самого зображення. Ми реалізували подібні рішення для 30+ інтернет-магазинів за 5 років, гарантуючи приріст органічного трафіку на 10–25%. Економія бюджету на ручній праці для такого каталогу сягає суттєвих значень. Зв'яжіться з нами для оцінки вашого проєкту.
Які проблеми вирішує генерація alt?
- Ручна праця. Писати alt для 10 000 SKU вручну — тижні роботи. Автоматизація скорочує це до годин, а вартість обробки 1000 зображень через AI мінімальна.
- Однотипні alt. Багато хто генерує alt шаблонно: «Зображення товару» — користі для SEO нуль. Потрібні осмислені, унікальні описи, які підвищують релевантність сторінки.
- Порушення WCAG. Порожній alt робить сайт недоступним для незрячих — це юридичні ризики та втрата аудиторії. Правильний alt-текст для товарів — це не просто опис, а SEO-інструмент.
- Динамічні зображення. Часто alt відсутній у картинок, що підвантажуються через JavaScript (наприклад, вибір кольору товару). Це ще один втрачений SEO-сигнал.
Порівняння підходів
| Характеристика | За метаданими | Мультимодальний (GPT-4o Vision) |
|---|---|---|
| Швидкість генерації | Миттєво | 1–2 секунди на зображення |
| Бюджет | Безкоштовно | Низький |
| Якість alt | На основі даних | Описує видимий вміст |
| Ідеально для | Стандартні фото на білому фоні | Lifestyle, складні сцени, кілька об'єктів |
Мультимодальний підхід кращий за метадані в сценаріях, де важливі візуальні деталі: він бачить форму, колір, позу, оточення. При цьому витрати на 50 000 зображень складуть копійки — набагато менше, ніж ручна робота.
Як працює генерація alt?
Підхід 1: за метаданими
function buildAltFromMetadata( product: Product, imageIndex: number, imageType: "main" | "detail" | "lifestyle" ): string { const base = `${product.brand} ${product.name}`; if (imageType === "main") { return `${base} — фото ${imageIndex + 1}`; } if (imageType === "detail") { const feature = product.attributes.detailFeatures?.[imageIndex] ?? "деталь"; return `${base}: ${feature}`; } return `${base} в использовании`; } Простий, детермінований варіант. Не потребує API-викликів, працює миттєво при імпорті товарів.
Підхід 2: мультимодальний (GPT-4o Vision)
import { openai } from "../lib/openai"; async function generateAltFromImage( imageUrl: string, product: Product ): Promise<string> { const response = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "user", content: [ { type: "image_url", image_url: { url: imageUrl, detail: "low" }, // low — дешевше, достатньо для alt }, { type: "text", text: `Write a concise alt text for this product image in Ukrainian. Product: ${product.name}, brand: ${product.brand}, category: ${product.category}. Rules: - 60–120 characters - Describe what is visible in the image, not the product in general - Start with product name only if it's clearly identifiable in the photo - No "фото", "зображення", "картинка" at the start - No markdown, just plain text`, }, ], }, ], max_tokens: 80, temperature: 0.3, }); return response.choices[0].message.content?.trim() ?? ""; } detail: "low" знижує вартість з ~значної до ~мізерної за зображення — достатньо для генерації alt, не потрібен високий дозвіл.
Пакетна обробка зображень
import { Queue, Worker } from "bullmq"; const altQueue = new Queue("alt-generation"); export async function queueImagesForAltGeneration( productIds: string[] ) { const products = await db.products.findMany({ where: { id: { in: productIds } }, include: { images: true }, }); const jobs = products.flatMap((product) => product.images .filter((img) => !img.altText || img.altText === "") .map((img) => ({ name: "generate-alt", data: { imageId: img.id, productId: product.id, imageUrl: img.url }, })) ); await altQueue.addBulk(jobs); } const altWorker = new Worker( "alt-generation", async (job) => { const { imageId, productId, imageUrl } = job.data; const product = await db.products.findById(productId); // Визначаємо, чи потрібен мультимодальний аналіз const useVision = product.imageType === "lifestyle" || product.useVisionForAlt; let altText: string; if (useVision) { altText = await generateAltFromImage(imageUrl, product); } else { const imageIndex = product.images.findIndex((i: any) => i.id === imageId); altText = buildAltFromMetadata(product, imageIndex, "main"); } await db.productImages.update({ where: { id: imageId }, data: { altText, altGeneratedAt: new Date() }, }); }, { connection: redisConnection, concurrency: 20 } ); Як автоматизувати генерацію alt для всього каталогу?
- Аудит поточного стану — виконайте SQL-запит (див. нижче) та визначте кількість зображень без alt.
- Оберіть стратегію: метадані для простих фото, мультимодальний аналіз для складних.
- Розгорніть мікросервіс з чергами BullMQ та інтеграцією з вашою CMS.
- Налаштуйте моніторинг — відстежуйте кількість оброблених зображень та помилки через Sentry.
Типові помилки alt-текстів
| Помилка | Приклад | Як виправити |
|---|---|---|
| Порожній alt | alt="" | Генерувати осмислений текст |
| Alt як ім'я файлу | alt="IMG_4821.jpg" | Використовувати дані товару або нейромережу |
| Занадто довгий | >125 символів | Обмежити 60-120 символами |
| Шаблонний | alt="фото товару" | Додати унікальні деталі (бренд, колір) |
| Не відображає вміст | alt="червона сукня" на фото синьої | Мультимодальний аналіз |
Вбудовування в CMS
Після генерації alt-текст зберігається в таблиці зображень і рендериться в шаблоні. Якщо alt порожній — фолбек на назву товару, але не порожній рядок.
<img src="{{ image.url }}" alt="{{ image.altText }}" loading="lazy" width="{{ image.width }}" height="{{ image.height }}" /> Аудит існуючого каталогу
Перед запуском генерації корисно зрозуміти масштаб проблеми. Виконайте SQL:
SELECT COUNT(*) FILTER (WHERE alt_text IS NULL OR alt_text = '') AS missing_alt, COUNT(*) FILTER (WHERE alt_text = file_name) AS filename_as_alt, COUNT(*) total FROM product_images; Це покаже, скільки зображень потребують обробки і дозволить спланувати навантаження на API.
Склад робіт
- Аудит поточного каталогу зображень (SQL-скрипт, дашборд)
- Вибір оптимальної стратегії: метадані, мультимодал або комбінація
- Розробка мікросервісу генерації alt (Node.js, BullMQ)
- Інтеграція з вашою CMS (кастомна доробка або middleware)
- Налаштування черг та моніторингу (Redis, Sentry)
- Документація процесу та навчання команди
- Підтримка протягом місяця після впровадження
Терміни реалізації — під ключ від 3 до 10 днів залежно від кількості зображень та складності інтеграції. Вартість розраховується індивідуально під ваш проєкт. Отримайте консультацію — зв'яжіться з нами.
Висновок
Автоматична генерація alt — це не про економію, а про SEO-потенціал та доступність. Ми реалізували такі рішення для 30+ інтернет-магазинів за 5 років. Зв'яжіться з нами для оцінки вашого проєкту — підберемо підхід та розрахуємо навантаження.