Каталог и карточки товаров: структура, база данных, фильтры
Зачем начинать с каталога
Каталог и карточки товаров — сердце e‑commerce. От того, как вы спроектируете структуру, базу данных и фильтры, зависит конверсия, SEO‑трафик и скорость работы. Эта статья — практическое руководство, как создать каталог интернет магазина и подготовить гибкую систему, которая масштабируется и не ломается при росте ассортимента.
Если вы на старте, загляните в пошаговый план в материале Как создать интернет‑магазин: пошагово и сравните платформы и конструкторы.
Структура каталога интернет‑магазина
Правильная структура каталога интернет магазина помогает покупателям быстро находить нужное и поисковикам — понимать релевантность страниц.
- Древовидная таксономия: Главная категория → Подкатегории → Листовые разделы. Старайтесь не углубляться более чем на 3 уровня.
- Единицы ассортимента: родительский товар и вариации. В листовых разделах показывайте родительские позиции с выбором вариантов.
- ЧПУ‑адреса: site.ru/krasovki/nike/air-zoom и микрокатегории по фильтрам при необходимости. Используйте каноникал, чтобы не плодить дублей.
- Хлебные крошки и сквозная навигация: ускоряют путь к покупке и улучшают внутреннюю перелинковку.
Полезные ссылки по UX и визуальному представлению: Дизайн и UX интернет‑магазина и Шаблоны и примеры.
База данных: как интернет‑магазин создать базу данных под каталог
Чтобы интернет магазин создать базу данных, начните с сущностей и связей. Важно предусмотреть вариативность и масштаб.
| Сущность |
Ключевые поля |
Примечание |
| Category |
id, parent_id, name, slug, sort, image, seo |
Иерархия и SEO‑поля для листингов |
| Product |
id, type, name, slug, brand_id, description, seo |
Родитель или standalone карточка |
| Variant (SKU) |
id, product_id, sku, barcode, price, stock, attrs_json |
Комбинации атрибутов, цена, остатки |
| Attribute |
id, code, type, label, is_filterable, is_searchable |
Типы: текст, список, число, диапазон, цвет |
| AttributeValue |
id, attribute_id, value, label, sort |
Справочники для фильтров |
| Media |
id, entity, entity_id, url, alt, sort |
Фото, видео, 360, документы |
| Price |
sku_id, currency, value, old_value |
Мультивалютность, скидки |
| Stock |
sku_id, warehouse_id, qty, reserve |
Мультисклад, резервы |
| Brand |
id, name, slug, logo |
Фильтр по бренду и бренд‑страницы |
Подход к атрибутам:
- EAV или гибрид: храните значения в JSON у SKU для скорости, а фильтруемые атрибуты индексируйте в отдельной таблице.
- Индексы: по category_id, brand_id, price, популярным атрибутам. Подготовьте материализованные индексы для фасетных фильтров.
- Версионирование импорта: храните снимки цен и остатков для отката.
Атрибуты и фильтры: фасетная навигация без боли
Атрибуты и фильтры — основной инструмент подбора. Важно подобрать тип, UI и правила индексации.
| Тип атрибута |
Пример |
UI фильтра |
SEO/индексация |
| Справочник |
Бренд, материал |
чекбоксы |
разрешать индекс для популярных комбинаций |
| Диапазон |
Цена, размер экрана |
слайдер, поля от/до |
не индексировать, каноникал на базовую категорию |
| Цвет/фасет |
Цвет, узор |
свотчи |
индекс выборочно, объединять с категорией |
| Бинарный |
В наличии, Акция |
переключатель |
можно индексировать под спрос |
Рекомендации:
- Не перегружайте фильтры: 6–10 ключевых фасетов выше фолда, остальное в «Показать все».
- Показывайте количество результатов рядом с чекбоксами.
- Комбинации фильтров с постоянным спросом можно выводить отдельными лендингами и закреплять в навигации.
- Следите за скоростью: применяйте прединдексацию и кэширование результатов.
Карточка товара: требования к контенту и блокам
Карточка товара — главная страница конверсии. Если вы хотите создать страницу интернет магазина, ориентируйтесь на эти требования.
Минимальный набор блоков:
- Галерея: 6–8 фото, зум, 360, видео. ALT‑тексты обязательны.
- Название H1 и краткое УТП: модель, ключевой атрибут и выгода.
- Цена, скидка, бонусы, рассрочка.
- Выбор вариаций: размер, цвет, память. Меняет SKU, цену, фото и остатки.
- Кнопка В корзину и Купить в один клик, наличие по складам/магазинам.
- Доставка и оплата: сроки, стоимость, самовывоз. Подробнее — в разделе Оплата и доставка.
- Описание: факты и преимущества, таблицы характеристик.
- Отзывы и Q&A, рейтинг.
- Сопутствующие и альтернативы, блок сравнения.
- Маркировки: Хиты, Новинки, Эко, Честный Знак.
Технические требования для карточки товара требования:
- Разметка Schema.org Product и Offer, Open Graph для соцсетей.
- Уникальные Title, Description, H1, микроразметка отзывов.
- Легкая модульная верстка: быстрый LCP и CLS < 0.1.
Вариации, SKU, цены и остатки
- Родительский товар объединяет все SKU. Фильтры работают по вариациям, но индексируете родителя.
- Динамическая смена URL при выборе SKU не обязательна — достаточно смены параметров и данных Schema.
- Остатки в разрезе складов: показывайте «Доступно сегодня», «Доставка завтра».
- Цены: базовая, старая, персональная, оптовая. Для сложного ценообразования используйте правила и приоритеты.
Импорт товаров CSV, интеграция с 1С и синхронизация
Для среднего ассортимента достаточно импорт товаров CSV/XLSX, для крупного — API и очередь.
- CSV/XLSX: маппинг колонок к атрибутам, валидация типов, предпросмотр, отчеты об ошибках.
- Пакеты: большие каталоги — в чанках по 5–20 тыс. строк с ретраями.
- Инкрементальные обновления: обновляйте только измененные позиции по updated_at.
- Медиа: отдельный импорт по URL, проверка целостности.
- Интеграция с 1С каталог: двухсторонняя синхронизация цен/остатков и справочников. Планировщик обменов, протоколирование, уведомления об ошибках. Смотрите платформы с готовыми коннекторами: Интернет‑магазин на 1С‑Битрикс.
Типичные ошибки:
- Дубли SKU из‑за пробелов/регистров — нормализуйте ключи.
- Потеря связей с атрибутами — используйте стабильные коды, не локализованные названия.
- Перезапись фото при повторном импорте — храните хэши и версионирование.
Навигация, сортировка, поиск
- Пагинация vs бесконечная прокрутка: для SEO — пагинация с rel=next/prev, для UX — добавляйте «Загрузить еще».
- Сортировки: по популярности, цене, новизне, рейтингу. Запоминайте выбор.
- Поиск: автодополнение, синонимы, корректировка опечаток. Вывод категорий, брендов и товаров в подсказках.
- Нулевые результаты: мягкие синонимы и «Расширить запрос», показывайте популярные категории.
SEO для категории и карточки: технические нюансы
- Категории: уникальные текстовые блоки 800–1200 знаков с интеграцией ключей, но без переспама. Текст под списком товаров — допустимо, если не мешает UX.
- Фильтры: каноникал на базовую категорию, кроме промолендингов. Фасетные страницы с спросом — отдельные Title, Description, H1, ссылки в меню/хлебных крошках.
- Хлебные крошки с Schema.org BreadcrumbList. Карточка — Product и Offer.
- Изображения WebP/AVIF, lazy‑load ниже фолда, preconnect к CDN.
- Внутренняя перелинковка: блок «Похожие категории», бренды, подборки. Изучите Маркетинг и первые продажи для роста видимости.
Прототипирование: создаем интернет магазин HTML без кода в проде
Перед разработкой соберите клик‑прототип — создаем интернет магазин HTML на уровне вайрфреймов:
- Компоненты: карточка товара в листинге, плитка/список, фильтры, пагинация, панель сравнения, поп‑ап корзины.
- Аксессибилити: правильные роли ARIA, контраст, фокус‑стили.
- Семантика: H1–H3, списки UL/OL для товаров, табличные характеристики.
- Подготовьте UI‑кит: кнопки, бейджи, теги фильтров — единый паттерн для скорости.
Ускорить контент помогут инструменты AI — идеи описаний и атрибутов, подробнее в разделе Интернет‑магазин с помощью ИИ.
Платформы и CMS: на чем строить каталог
Выбор платформы влияет на скорость запуска, интеграции и бюджет.
Оцените бюджет и сроки в материале Стоимость создания интернет‑магазина.
Чек‑лист запуска каталога
- Спроектирована структура категорий и URL.
- Определены атрибуты, типы фильтров и индексация.
- БД и индексы готовы к росту ассортимента.
- Карточка товара покрывает требования UX и SEO.
- Реализованы вариации, цены, остатки и мультисклад.
- Настроены импорт товаров CSV и интеграция с 1С каталог.
- Пагинация, сортировки, поиск с автодополнением.
- Технический SEO: каноникал, Schema, скорость, изображения.
- Внутренняя перелинковка и контент категорий.
- Тест‑данные загружены, edge‑кейсы покрыты, логирование и мониторинг включены.
Итоги и следующий шаг
Грамотно спроектированный каталог с четкой структурой, правильной базой данных, продуманными атрибутами и фильтрами дает рост конверсии и органического трафика. Начните с прототипа, утвердите карточку товара и модель данных, затем подключайте импорт и интеграции.
Готовы продолжать? Перейдите к разделам про Оплату и доставку и Маркетинг и первые продажи, а если выбираете технологию — сравните платформы и конструкторы. Запускайте MVP быстро, а затем масштабируйтесь — поможет статья Масштабирование и сеть интернет‑магазинов.