Покупатель открывает карточку товара и за пару секунд решает, стоит ли читать дальше. Длинное описание он проматывает, таблицу характеристик — тем более. А вот несколько наглядных иконок с главными фактами — «гарантия 3 года», «влагозащита», «совместим с любым креплением» — считываются мгновенно. Это и есть инфографика: способ донести выгоды товара до того, как человек устанет читать.
Разберём, как правильно добавить инфографику в карточку товара интернет-магазина на 1С-Битрикс: что показывать, почему собирать её из данных инфоблока надёжнее, чем вставлять картинки, как не убить скорость и не потерять SEO. Основа хорошей инфографики — полные и корректные характеристики в каталоге, а их порядок обеспечивает автоматизация на 1С.
Коротко
- Инфографика доносит главные выгоды товара за секунды, до чтения длинного описания.
- Собирайте её из свойств инфоблока и лёгкой вёрстки, а не из тяжёлых картинок.
- Так блок обновляется автоматически, весит мало и не бьёт по Core Web Vitals.
- Важные факты держите текстом — тогда инфографика работает и на SEO, и на доступность.
Зачем карточке инфографика
Внимание покупателя — самый дефицитный ресурс на карточке товара. Человек сканирует страницу, а не читает её, и решение «интересно / не интересно» принимает за секунды. Инфографика работает именно с этим сканированием: она вытаскивает главные преимущества на видное место в наглядной форме, чтобы ключевые аргументы дошли даже до того, кто не станет читать описание.
Хорошо сделанная инфографика повышает конверсию карточки и снижает число вопросов в поддержку: покупатель сразу видит ответы на «а подойдёт ли», «а какая гарантия», «а есть ли сертификат». Но её ценность держится на двух условиях — она должна быть содержательной и не вредить скорости. Об этом и пойдёт речь.
Что показывать в инфографике
Инфографика не должна дублировать всю таблицу характеристик. Её задача — вынести только то, что реально влияет на решение о покупке.
- Ключевые факты. Три-пять главных характеристик, которые важнее всего для этого типа товара.
- Гарантии и доверие. Срок гарантии, сертификаты, оригинальность, страна производства.
- Сценарии применения. Для чего товар, с чем совместим, где используется.
- Сравнение и выгода. Чем отличается от аналогов, что входит в комплект.
Правило простое: если факт не помогает принять решение, ему не место в инфографике. Перегруженный иконками блок читается не лучше стены текста — теряется главное.
Картинка или сборка из данных
Ключевая развилка — делать инфографику готовой картинкой или собирать её из данных товара средствами вёрстки. От этого выбора зависит всё: скорость, поддерживаемость, SEO, адаптив.
| Критерий | Картинка-инфографика | Сборка из данных |
|---|---|---|
| Обновление при смене данных | Вручную перерисовывать | Автоматически |
| Вес и скорость | Тяжёлая, бьёт по CWV | Лёгкая |
| Доступность для поиска | Текст не читается | Полноценный текст |
| Адаптив | Плохо тянется | Гибкий |
| Единый стиль на каталоге | Неуправляемо | Через шаблон |
Для каталога, где карточек много, выигрывает сборка из данных. Картинка-инфографика оправдана разве что для единичных флагманских товаров, где важна художественная подача. На потоке она превращается в неподъёмную ручную работу.
Данные из инфоблоков
В 1С-Битрикс источник данных для инфографики — свойства товара в инфоблоке торгового каталога. Мощность, объём, гарантия, состав, совместимость — всё это хранится как свойства и приходит обменом из 1С. Шаблон карточки читает эти свойства и рисует из них иконки и блоки.
Такой подход делает инфографику честной: она показывает ровно те данные, что есть в каталоге, и меняется вместе с ними. Но он предъявляет требование к качеству данных — характеристики должны быть полными и корректными. Если свойства пустые или заполнены как попало, инфографике нечего показывать. Наведение порядка в характеристиках и обмене — задача, которую мы закрываем через аудит и оптимизацию 1С, а автоматизацию наполнения карточек разбирали в статье про D7 и ORM в 1С-Битрикс.
Шаблонизация на большом каталоге
На каталоге в тысячи товаров инфографику невозможно рисовать вручную для каждой карточки — её нужно шаблонизировать. Блок инфографики описывается один раз в шаблоне карточки и наполняется данными каждого товара автоматически.
Практически это означает набор правил: какое свойство в какую иконку превращается, какие блоки показывать для какой категории, что делать, если свойство пустое. Тогда стиль остаётся единым по всему каталогу, а содержание — своим у каждого товара. Это управляемо и масштабируемо, в отличие от ручных картинок, которые на большом каталоге неизбежно расходятся по стилю и устаревают.
Скорость и Core Web Vitals
Инфографика легко превращается из помощника в тормоз, если делать её тяжёлыми изображениями. Растровые баннеры на каждой карточке раздувают вес страницы, бьют по Core Web Vitals и портят мобильный опыт. Лёгкая инфографика на вёрстке этого избегает:
- Векторные иконки. SVG весят мало, масштабируются без потери качества и не грузят сеть.
- Вёрстка вместо картинок. Блоки собираются из HTML и CSS, а не из тяжёлых изображений.
- Совместимость с кэшем. Лёгкий блок хорошо работает с композитным сайтом и кэшированием карточки.
- Отсутствие сдвигов макета. Размеры блоков заданы заранее, layout не прыгает при загрузке.
Скорость карточки — это не только инфографика, но и вся страница целиком: шаблон, изображения товара, скрипты. Инженерные основы быстрой отдачи и правильного окружения мы разбирали в статье про хостинг и инфраструктуру для 1С-Битрикс.
Инфографика и SEO
Инфографика, собранная из данных, работает и на поисковую оптимизацию. Настоящий текст в блоке добавляет странице содержательности, а корректная разметка помогает поисковику понять структуру. Наоборот, текст, запечённый в картинку, поисковик не прочитает — это упущенная выгода: важные факты остаются невидимыми для индексации.
Поэтому главное правило для SEO: ключевые характеристики и преимущества должны быть текстом, а иконка — лишь визуальным дополнением. Тогда инфографика улучшает и восприятие человеком, и понимание страницы поисковой системой, а не жертвует одним ради другого.
Особенности B2B-карточки
В B2B инфографика меняет акценты. Оптового покупателя не нужно «очаровывать» — ему нужно быстро подтвердить, что товар подходит под задачу и требования. Поэтому в фокусе не эмоции, а факты:
- Технические параметры. Точные характеристики, по которым подбирают товар.
- Совместимость и стандарты. С чем работает, каким нормам соответствует.
- Сертификаты и документы. Подтверждение качества и легальности поставки.
- Условия поставки. Кратность, упаковка, минимальная партия, сроки.
B2B-инфографика должна отвечать на вопросы закупщика, а не на эмоции розничного покупателя. Это ещё один аргумент за сборку из данных: именно технические свойства проще всего вывести автоматически из каталога.
Доступность и адаптив
Инфографика должна одинаково хорошо работать на всех устройствах и для всех пользователей. Собранный из вёрстки блок легко делать адаптивным: на телефоне иконки перестраиваются в колонку, на десктопе — в ряд. Картинка так не умеет — она либо мельчает до нечитаемости, либо ломает макет.
Не менее важна доступность: у иконок должны быть текстовые подписи, у изображений — альтернативный текст, а цвета — с достаточным контрастом. Тогда инфографику воспримет и человек со слабым зрением, и поисковый робот. Доступный блок из вёрстки выигрывает у картинки по всем этим пунктам сразу.
Реализация в 1С-Битрикс
Внедрение инфографики укладывается в понятную последовательность:
- Проверьте данные. Какие свойства уже есть в инфоблоке, каких не хватает, насколько они полны.
- Отберите факты. Для каждой категории — три-пять свойств, которые реально влияют на решение.
- Спроектируйте блок. Как свойство превращается в иконку и текст, что делать с пустыми значениями.
- Соберите из вёрстки. SVG-иконки и HTML/CSS вместо тяжёлых картинок, размеры заданы заранее.
- Шаблонизируйте. Один блок в шаблоне карточки наполняется данными каждого товара.
- Проверьте скорость и адаптив. Core Web Vitals, поведение на телефоне, доступность.
- Проверьте на каталоге. Разные категории, товары с пустыми свойствами, крайние случаи.
Частые ошибки
- Инфографика картинками на потоке. Тяжёлые изображения, которые невозможно поддерживать и обновлять.
- Текст в картинке. Важные факты не читаются поиском и недоступны.
- Перегруженный блок. Слишком много иконок, главное теряется.
- Оторванность от данных. Инфографика не обновляется при смене характеристик, устаревает.
- Удар по скорости. Растровые баннеры бьют по Core Web Vitals и мобильному опыту.
- Игнор доступности. Нет подписей и контраста, блок не воспринимается частью пользователей.
Чек-лист внедрения
- Данные полны. Ключевые свойства заполнены и корректно приходят из 1С.
- Собрана из данных. Блок читает свойства инфоблока, а не вставлен картинкой.
- Отобрано главное. В инфографике только факты, влияющие на решение.
- Лёгкая и быстрая. SVG и вёрстка, без ударов по Core Web Vitals.
- Текст читается. Важные факты — текстом, для SEO и доступности.
- Шаблонизирована. Единый стиль по каталогу, содержание своё у каждого товара.
- Адаптив и доступность. Перестраивается на телефоне, есть подписи и контраст.
Вывод
Инфографика в карточке товара работает с тем, как покупатель на самом деле читает страницу — сканирует, а не вчитывается. Она выносит главные выгоды на видное место и повышает конверсию, но только если сделана правильно: собрана из данных инфоблока, а не вставлена тяжёлой картинкой.
Сборка из свойств товара даёт всё сразу: автоматическое обновление, малый вес, доступность для поиска, единый стиль по каталогу и адаптив. Начните с порядка в характеристиках, отберите факты, влияющие на решение, и соберите лёгкий шаблонный блок — тогда инфографика будет помогать продавать, а не тормозить сайт.
