Картка товару — одна з ключових сторінок для eCommerce. Саме тут користувач оцінює пропозицію, перевіряє характеристики й наявність, дізнається умови доставки, читає відгуки та зрештою вирішує, чи купувати.
Але є ще одна аудиторія, про яку бізнес часто забуває — пошукові та LLM-боти. Для них сторінка також має бути зрозумілою: містити достатньо інформації про товар, коректно рендеритися та не розпорошувати важливий контент між десятками URL.
Тож ефективна картка товару — це завжди поєднання UX та SEO.
Нещодавно команда Promodo провела вебінар, під час якого розібрали базові правила побудови сторінки товару. У цьому матеріалі — короткий конспект і головні рекомендації зі створення картки, яка буде зручною для користувачів і зрозумілою для пошукових систем. А повний вебінар ви можете переглянути за посиланням.
Почніть з навігації
Сторінки товарів часто довгі, особливо на мобільних пристроях: характеристики, опис, доставка, відгуки, рекомендації, схожі товари.
Тому перше завдання — допомогти користувачу швидко знайти потрібну інформацію.
Для цього варто використовувати якірну навігацію між основними блоками сторінки: наприклад, «Усе про товар», «Характеристики», «Опис», «Відгуки».
Кожен пункт має вести до відповідного блоку на цій самій сторінці, а активний розділ — візуально виділятися. Для відгуків корисно одразу показувати їхню кількість: так користувач розуміє, чи є що читати.
Основна інформація про товар має бути зібрана на одній URL-адресі.
Одна з поширених помилок — переносити характеристики, опис чи інші таби на окремі URL. Для користувача різниця може бути майже непомітною, але для пошукових та LLM-ботів це вже різні сторінки.
Боти не повинні збирати інформацію про один товар, як конструктор. Що більше важливих даних доступно безпосередньо на основній сторінці товару, то простіше пошуковим системам зрозуміти її зміст.
Винесіть ключове на перший екран
Перший екран — це місце, де користувач має максимально швидко зрозуміти, чи потрібний товар відкрився і чи варто розглядати його далі.
Тому тут варто зібрати всю ключову інформацію:
- фото товару;
- назву та бренд;
- рейтинг і кількість відгуків;
- актуальну наявність;
- ціну;
- CTA для додавання товару в кошик;
- за потреби — артикул.
Основне фото бажано синхронізувати з тим, яке користувач бачив у каталозі чи пошуковій видачі. Якщо він натиснув на одну картинку, а на сторінці бачить візуально інший товар, виникає відчуття невідповідності.
Рейтинг також краще показувати не лише зірочками, а й конкретною цифрою (наприклад, 4,8 з 5) та додавати кількість відгуків, на основі яких сформована оцінка.
Окрема увага — наявність.
Якщо товар закінчився, людина має побачити це одразу, а не після кількох хвилин знайомства зі сторінкою чи спроби додати його в кошик
Це особливо важливо для платного трафіку. Користувач може потрапити з реклами одразу на сторінку товару, не бачачи головної сторінки чи каталогу. Тому картка має давати достатньо контексту і про сам товар, і про бренд.
Не забувайте про швидкість завантаження
Для SEO тут важливий показник LCP (Largest Contentful Paint) — один із Core Web Vitals. Показує, як швидко завантажується найбільший елемент першого екрана. Для картки товару найчастіше це головне зображення.
Другорядні скрипти, стилі та інші елементи не повинні заважати ключовому контенту завантажуватися в першу чергу.
Зафіксуйте СТА-блок
Навіть якщо ціна та CTA розміщені на першому екрані, користувач не завжди приймає рішення про покупку одразу.
Він може прочитати характеристики, перевірити доставку, переглянути відгуки, і лише після цього вирішити купити товар. Змушувати його повертатися нагору сторінки в цей момент не варто.
Для цього існує sticky CTA — закріплений блок із ціною та кнопкою покупки, який залишається на екрані під час скролу.
У ньому можна показувати актуальну ціну, знижку, кнопку «Додати в кошик» та можливість додати товар в обране.
З досвіду Promodo, на проєктах, де такого блоку раніше не було, після його впровадження фінальна конверсія зростає приблизно на 8%
Подбайте про зрозумілий конфігуратор
Колір, розмір, матеріал, комплектація — чим більше варіантів має товар, тим важливіше правильно спроєктувати конфігуратор.
Його розташування залежить від того, чи впливає вибір користувача на ціну. Якщо різні конфігурації мають різну вартість, логічно спочатку дати обрати параметри, а вже потім показати фінальну ціну. Якщо ціна не змінюється, як у випадку з розміром одягу — її можна показувати раніше.
Інтерфейс має постійно давати користувачу зворотний зв’язок.
Обрали чорний колір — фото має змінитися на чорний товар, а поруч варто текстом зазначити, що зараз вибраний саме чорний. Обрали розмір XL — він має бути очевидно виділений. Якщо певної конфігурації немає, це також потрібно показати одразу.
Текстові підказки важливі не лише для зручності, а й із погляду доступності: відповідно до принципів WCAG, користувач не повинен орієнтуватися виключно на колір чи інший візуальний сигнал.
Характеристики: спочатку головне, потім деталі
Не потрібно одразу показувати користувачу величезну таблицю з десятками параметрів. У першому блоці достатньо винести 3–5 ключових характеристик, а далі дати можливість перейти до повного переліку. Так користувач швидко отримає інформацію, яка найчастіше впливає на вибір, але водночас матиме доступ і до деталей.
Для SEO важливо, щоб повні характеристики залишалися на тій самій сторінці товару. Також цей блок можна використовувати для внутрішньої перелінковки. Наприклад, значення характеристики «Бренд: Patagonia» зробити клікабельним і вести на каталог товарів цього бренду.
Це допомагає одночасно і користувачу, бо він може продовжити пошук, і SEO, оскільки внутрішні посилання підсилюють важливі категорійні та фільтраційні сторінки.
Прогнозуйте вартість і терміни доставки
Користувачу важливо розуміти, коли він отримає товар та скільки в підсумку коштуватиме доставка. Якщо ця інформація з’являється лише на етапі чекауту, є ризик отримати покинутий кошик.
Тому ще на сторінці товару варто показати:
- доступні способи доставки;
- орієнтовну або точну дату отримання;
- орієнтовну вартість;
- доступні міста доставки;
- за наявності офлайн-магазинів — можливість перевірити залишки та забронювати товар.
Формулювання «відправимо протягом 1–2 днів» недостатньо — користувач хоче розуміти, коли товар буде вже в нього.
Для цього внутрішні правила магазину щодо часу відправлення можна поєднати з API поштового оператора й одразу показувати прогнозовану дату доставки.
Так само замість узагальненого «вартість за тарифами перевізника» краще дати конкретну суму або хоча б орієнтир — наприклад, «від 80 грн».
Зверніть увагу на рендеринг
Те, що бачить користувач, не завжди бачить бот. Доставка, оплата, відгуки, рекомендації та інші блоки часто підключаються до сайту сторонніми плагінами й завантажуються через JavaScript.
Для користувача все може виглядати правильно. Проте пошукові боти, а особливо частина LLM-ботів, не завжди коректно обробляють JavaScript. У результаті вони можуть не бачити частину інформації, яка візуально є на сторінці.
Важлива інформація про товар має бути доступною не лише користувачу, а й ботам.
Якщо повністю відмовитися від JS-рішення неможливо, варто хоча б зробити доступною базову структуру блоку. Наприклад, калькулятор доставки може завантажуватися динамічно, але сам заголовок «Доставка» має бути доступним без JavaScript.
Саме тому власний функціонал, який одразу коректно рендериться на сайті, з SEO-погляду, часто кращий за сторонні плагіни.
Структуруйте опис товару
Великі полотна тексту користувачі майже не читають. Натомість вони швидко сканують сторінку в пошуках конкретної відповіді.
Опис краще розбивати на короткі абзаци, виділяти ключову інформацію й виносити на перший план лише те, що може вплинути на рішення про покупку.
Опрацюйте відгуки
Це один із ключових блоків, який допомагає ухвалити рішення про покупку.
Причому частіше користувач спеціально шукає негативні оцінки: саме вони допомагають зрозуміти потенційні недоліки товару. Тому варто дати можливість фільтрувати відгуки за оцінкою та не приховувати негатив.
Корисними будуть також:
- фото від покупців;
- позначка «Підтверджена покупка»;
- відповіді магазину на проблемні відгуки;
- для великої кількості коментарів — AI-summary основних переваг та недоліків.
Позначка про підтверджену покупку дозволяє зрозуміти, що людина справді замовляла товар саме в цьому магазині.
Відповіді бренду особливо важливі під негативними відгуками, адже показують потенційним покупцям, що магазин реагує на проблеми клієнтів і готовий допомогти з їх вирішенням.
А от шаблонно відповідати «Дякуємо за відгук» на кожен позитивний коментар необов’язково — це лише розтягує сторінку.
Коли відгуки можна винести на окрему URL
Якщо популярний товар має сотні відгуків і запитань, завантажувати їх усі на основній картці недоцільно. Можна залишити 4–5, а решту винести на окрему сторінку. Там може бути й додаткова SEO-цінність під запити «назва товару + відгуки».
Але не варто створювати окремий URL для кожного товару, де є один-два коментарі. В кожному випадку важливо, щоб текст відгуків та інформація про автора коректно рендерилися й були доступними пошуковим і LLM-ботам.
Рекомендуйте супутні товари доцільно
Крос-сейл блок — один зі способів збільшити середній чек без підвищення ціни. Користувач просто додає до замовлення більше позицій. Але рекомендації повинні логічно продовжувати покупку.
Для fashion це може бути «Доповніть образ», для інших категорій — «З цим товаром купують», «Разом дешевше» або готові комплекти.
Якщо людина купує шпаклівку, а магазин пропонує їй труби для каналізації лише тому, що обидва товари з будівельного каталогу — такий блок не допоможе продажам.
Для товарів із невеликим чеком також варто дати можливість додавати супутні позиції безпосередньо з рекомендаційного блоку, без переходу на окрему сторінку.
Персоналізуйте рекомендації
Якщо конкретна модель людині не підійшла за кольором, розміром, фасоном чи іншою характеристикою, вона все ще може бути зацікавлена в категорії. Тому варто додавати схожі товари та персоналізовані рекомендації.
На базовому рівні достатньо показати товари зі схожими характеристиками. А якщо сайт уже має історію взаємодії з користувачем, можна враховувати попередні перегляди, покупки та вподобання. Так сторінка товару допомагає монетизувати навіть той трафік, для якого початкова пропозиція була нерелевантною.
Схожу функцію виконує блок «Переглянуті товари». Він особливо корисний, коли людина порівнює кілька схожих позицій або повертається за повторною покупкою. Користувачу не потрібно заново шукати — сайт нагадує, що він дивився раніше. Для такого блоку добре працює горизонтальний скрол: він не збільшує довжину сторінки, але дозволяє показати одразу кілька варіантів.
Хороший UX та SEO не суперечать одне одному
Ефективна картка товару — це не набір окремих UX та SEO-рішень, а одна цілісна система.
Вона швидко дає всю необхідну інформацію про товар, допомагає ухвалити рішення про покупку й при цьому має структуру, яку коректно зчитують пошукові та LLM-боти.
Тому під час роботи над карткою товару варто приділяти однакову увагу обом сторонам цієї медалі — і UX, і SEO.
на розсилку
