Якщо ви заливаєте в магазин 200+ карток і вставляєте в опис суцільний абзац тексту від постачальника — Google це бачить і ранжує вас на 8-й сторінці. Структурований опис товару HTML — це не про «гарно виглядає», а про те, чи помітять вашу картку в пошуку взагалі. Нижче — конкретні шаблони з кодом для Shopify, WooCommerce, Prom.ua і Horoshop, готовий FAQ-блок, таблиця характеристик та спосіб генерувати все це автоматично, не наймаючи копірайтера на кожні 500 SKU.
Чому Google віддає перевагу розміченому контенту
Краулер Google не «читає» текст так, як людина. Він парсить DOM-дерево і шукає семантичні сигнали: де заголовок розділу, де перелік характеристик, де питання користувача. Коли весь опис — це один <p> на 800 слів, бот не розуміє, що в ньому головне. Коли той самий текст розбито на H2 «Характеристики», «Як використовувати», «Догляд» — бот витягує сутності й матчить їх із пошуковими запитами.
Друга причина — поведінкові фактори. За даними Nielsen Norman Group, користувачі читають веб-сторінки F-патерном: переглядають заголовки і перші слова списків. Якщо ваша картка — стіна тексту, людина закриває вкладку за 3 секунди. Це bounce rate, і Google враховує його як негативний сигнал.
Що саме шукає алгоритм
- Ієрархію заголовків — H2 для основних блоків, H3 для підрозділів усередині
- Списки — <ul> для характеристик, <ol> для інструкцій
- Семантичні таблиці — <table> з технічними параметрами, а не картинка JPG із характеристиками
- FAQ-блоки — для появи в розширених сніпетах та People Also Ask
- Виділення ключових слів — <strong> для бренда, моделі, ключових властивостей
Третій важливий момент — це підготовка ґрунту для Schema.org. Якщо HTML уже структурований, додати мікророзмітку Product, FAQPage та HowTo займе 10 хвилин. Якщо у вас одна суцільна каша — спочатку доведеться переписати все. Про саму розмітку детально розписано у статті Schema.org Product: правильна розмітка для українського магазину, а зараз перейдемо до конкретних шаблонів.
Базовий шаблон опису з H2, списками і таблицею
Ось каркас, який працює для 90% товарів — від кросівок до посудомийних машин. Просто замінюйте контент під свою категорію.
<h2>Опис товару</h2>
<p>Бездротові навушники Sony WH-1000XM5 — флагманська модель 2024 року з активним шумозаглушенням другого покоління. Час роботи — до 30 годин на одному заряді.</p>
<h2>Ключові характеристики</h2>
<ul>
<li><strong>Шумозаглушення:</strong> 8 мікрофонів, процесор HD QN1</li>
<li><strong>Час роботи:</strong> 30 годин з ANC, 40 без</li>
<li><strong>Швидка зарядка:</strong> 3 години роботи за 3 хвилини</li>
<li><strong>Вага:</strong> 250 г</li>
</ul>
<h2>Технічні параметри</h2>
<table>
<tr><th>Параметр</th><th>Значення</th></tr>
<tr><td>Bluetooth</td><td>5.2 (LDAC, AAC, SBC)</td></tr>
<tr><td>Драйвери</td><td>30 мм</td></tr>
<tr><td>Діапазон частот</td><td>4 Гц – 40 кГц</td></tr>
</table>Цей шаблон — мінімум, з якого варто починати. Далі його доповнюємо блоками під конкретну платформу.
Що додати для одягу і взуття
Для fashion-категорій потрібна таблиця розмірів і блок «Склад тканини». Розмірна сітка — обов'язково <table>, не картинка. Покупці шукають у Google за запитами на кшталт «найки 42 розмір см» — і ваша табличка може ранжуватися окремо.
Що додати для електроніки
Блок «Комплектація» у вигляді <ul> і блок «Сумісність» — це два розділи, які підвищують конверсію на 12-18% за нашими спостереженнями. Покупець бачить, що в коробці саме той кабель, який йому потрібен.
FAQ-блок: код, який потрапляє в розширені сніпети
FAQ — найбільш недооцінений елемент картки. Це безкоштовний спосіб зайняти більше місця у видачі та відповісти на заперечення до того, як клієнт напише в чат. Структура проста: HTML-блок із питаннями + JSON-LD розмітка FAQPage.
<h2>Поширені запитання</h2>
<h3>Чи підходять навушники для дзвінків?</h3>
<p>Так. У моделі 4 мікрофони з шумозаглушенням голосу, підтримка beamforming. Тестували на Zoom і Google Meet — співрозмовники чують вас чітко навіть у кафе.</p>
<h3>Чи можна підключити до двох пристроїв одночасно?</h3>
<p>Так, є функція Multipoint. Підключаєте телефон і ноутбук — навушники самі перемикаються між дзвінком і музикою.</p>
<h3>Скільки років гарантії?</h3>
<p>Офіційна гарантія Sony Україна — 24 місяці. Сервісні центри в Києві, Львові, Дніпрі, Одесі.</p>Питання беріть із трьох джерел: ваш онлайн-чат (експортуйте діалоги за останні 3 місяці), розділ «People Also Ask» у Google, відгуки конкурентів на Rozetka. Не вигадуйте — реальні питання дають реальний трафік.
Адаптація під Shopify, WooCommerce, Prom.ua і Horoshop
Кожна платформа має нюанси у тому, куди вставляти HTML і що вона зробить із кодом. Без розуміння цих особливостей структурований опис товару HTML перетвориться на кашу одразу після збереження.
Shopify
У редакторі описів є кнопка «</> Edit HTML» — переходьте в неї і вставляйте код туди. Шаблонний редактор (Rich Text) обріже <table> стилі. Якщо ви на Dawn або іншій сучасній темі — таблиці рендеряться нормально. На старих темах (Debut, Brooklyn) додайте CSS у theme.liquid:
.product__description table { width: 100%; border-collapse: collapse; }
.product__description th, .product__description td { padding: 8px; border: 1px solid #e0e0e0; }WooCommerce
Класичний редактор (TinyMCE) — використовуйте вкладку «Текст», а не «Візуально». Gutenberg — вставляйте через блок «Користувацький HTML». Уникайте плагінів типу Elementor для опису товару — вони обгортають кожен абзац у div із класами, і семантична структура ламається. WooCommerce також має поле «Короткий опис» — туди йде 1-2 речення з ключовим словом, основний HTML — у «Опис».
Prom.ua і Horoshop
Prom.ua дозволяє HTML в описі, але має білий список тегів. <table>, <ul>, <ol>, <h2>-<h4>, <strong>, <em> — проходять. <script>, <iframe>, inline-стилі — вирізаються модерацією. Horoshop працює аналогічно, але має зручніший вбудований редактор із готовими блоками «Характеристики» та «FAQ». Якщо ви на Horoshop — використовуйте їхні нативні блоки, вони вже згенерують правильний HTML і Schema.org.
Як автоматизувати створення опису через AI з richHtml mode
Ручне написання структурованого опису для 1 товару займає 20-40 хвилин. Для 500 SKU — це 200+ годин. Тому єдиний реальний шлях для каталогу від 100 позицій — це AI-генерація з готовим HTML на виході.
У Revenza ми зробили окремий режим richHtml: ви даєте назву товару, базові характеристики або URL із сайту постачальника — отримуєте готовий блок із H2, списками, таблицею і FAQ. Без подальшої правки розмітки. Ось як це працює покроково:
- Імпорт каталогу. Завантажуєте CSV або підключаєте магазин через API (Shopify, WooCommerce, Prom). Система зчитує назви, ціни, наявні характеристики.
- Вибір шаблону опису. Для електроніки — один пресет, для одягу — інший, для косметики — третій. Кожен шаблон визначає набір H2-секцій.
- Налаштування richHtml. Вмикаєте режим, обираєте теги (table так/ні, FAQ так/ні, кількість питань у FAQ).
- Генерація. AI пише опис, перевіряє на унікальність відносно інших товарів у вашому каталозі, додає Schema.org.
- Експорт. Або назад у магазин через API, або CSV для ручного завантаження.
За тестами на каталозі з 1200 товарів електроніки час обробки — близько 4 годин, вартість — еквівалент роботи копірайтера за 2-3 дні. Якщо ви тільки заливаєте нові товари від постачальника і хочете уникнути дублів, корисною буде стаття Уніфікація описів товарів: як прибрати дублі від постачальника — там детально про anti-duplicate логіку.
Що отримує магазин на виході
- Унікальний опис кожного SKU з H2/H3 ієрархією
- Таблицю характеристик у HTML, а не картинкою
- 3-5 FAQ-питань на основі реальних запитів із Google
- Готовий Schema.org Product + FAQPage
- Мета-title і description під SEO
Можна зареєструватися безкоштовно і протестувати на 10 товарах — без карти, без зобовʼязань. Це достатньо, щоб побачити різницю між «текст від постачальника» і «структурований HTML, який ранжується».
Типові помилки і як їх уникнути
За три роки роботи з українськими магазинами ми зібрали список граблів, на які наступають усі. Тримайте чек-лист — він збереже вам час і трафік.
- Один H1 на сторінці. H1 — це назва товару, її генерує платформа. У вашому описі — починайте з H2, не H1. Два H1 на сторінці плутають краулер.
- Не використовуйте H2 як стилізацію. Якщо вам потрібен великий жирний текст — це <p><strong>, а не <h2>. Заголовки — лише для структурних розділів.
- Таблиця характеристик — не картинка. JPG із технічними даними не індексується. Завжди <table>.
- FAQ повинен бути релевантним. Не пишіть «Чи можна купити цей товар?» — це не питання, це сміття. Пишіть про сумісність, гарантію, доставку, специфічні функції.
- Не дублюйте опис між товарами. Навіть якщо це 10 кольорів однієї футболки — кожна картка має мати щонайменше 30% унікального тексту.
- Перевіряйте мобільну версію. Таблиці на телефоні часто ламаються — додавайте <div style="overflow-x: auto"> обгортку.
І ще одна частина, про яку забувають — внутрішня перелінковка з опису. У блоці «Сумісні товари» або «З цим купують» додавайте 2-3 текстові посилання на пов'язані картки. Це передає вагу і покращує час на сайті. Повний перелік пунктів для перевірки можна знайти у статті SEO-опис товару у 2026: чек-лист на 15 пунктів.
FAQ: швидкі відповіді на ключові запитання
Скільки символів має бути в структурованому описі?
Оптимально 800-1500 символів основного тексту плюс таблиця і FAQ. Менше 500 — Google вважає сторінку «тонким контентом». Більше 3000 — користувач не дочитає, а краулер може не оцінити релевантність ключових слів.
Чи можна копіювати HTML-шаблон між товарами однієї категорії?
Структуру (набір H2, порядок блоків) — так, треба. А от текст усередині — ні. Кожен товар потребує унікального контенту в межах структури. AI-генерація вирішує цю задачу автоматично.
Чи впливає структурований HTML на швидкість завантаження?
Майже ні. Різниця між «один абзац» і «повний HTML із таблицею» — це 2-5 КБ. Це менше, ніж одна іконка. Швидкість картки залежить від картинок, скриптів і CSS, а не від розміру опису.
Що робити, якщо платформа вирізає мої теги?
На Prom.ua і деяких українських CMS є фільтри. Перевірте список дозволених тегів у документації. Якщо <table> вирізається — використовуйте <dl><dt><dd> як альтернативу. Якщо вирізається все — пишіть у підтримку, зазвичай дозволи можна розширити для PRO-тарифу.
Чи потрібен FAQ для кожного товару?
Для товарів дорожче 500 грн — так, рекомендуємо. Для дешевих імпульсних покупок (носки, гумки для волосся, наліпки) — можна обмежитися 2 питаннями про доставку і гарантію або взагалі пропустити блок.
Що далі
Структурований HTML — це фундамент, без якого SEO для товарної картки не працює навіть із найкращою Schema.org розміткою і ідеальним перелінкуванням. Почніть із одного шаблону, протестуйте його на 10-20 топових товарах, заміряйте позиції через місяць — і ви побачите різницю. А коли захочете масштабувати на весь каталог без копірайтерського відділу — подивіться, як Revenza наповнює магазини з richHtml на виході. Перші 10 товарів — безкоштовно, без обмежень за функціоналом.