Разработка каталога промышленных комплектующих: дизайн, контент + SEO для конверсии

Создание и развитие каталога промышленных комплектующих требует от веб-разработчика решения с правильным балансом дизайна, контента + SEO для достижения ТОП-выдачи в результатах поиска Яндекс.

Задача: создать и развить каталог комплектующих на сайте для получения потока заявок для обработки на предприятии.

Подзадача: получить максимальную оценку качества исполнения каталога комплектующих на сайте (по SEO и по Google Mobile Test).

Для достижения поставленной цели нам потребуется соблюсти следующие базовые требования:

1. Адаптивный веб-интерфейс.

2. Семантическое ядро.

3. Подготовка контента

4. SEO-оптимизация с оптимальным включением ключевых слов на объем текста.

5. Оптимизация графики для высокой скорости загрузки.

6. Настройка форм заказа (под специфику комплектующих).

7. Настройка поиска по каталогу с учетом синонимов.

Представленные базовые требования для получения потока заявок из Яндекс.Поиск — это необходимые и достаточные требования, исполнение которых обеспечивает эффективную работу с каталогом комплектующих (для организации производства и продаж на предприятии).

Рассмотрим последовательно процесс разработки каталога.

Базовый технологический стек: HTML5+CSS3+JS+PHP 7+MySQL.

Для качественного результата необходимо подготовить адаптивные шаблоны ключевых страниц:

- Главная страница (index).

- Каталог (catalog).

- Категория (category, впоследствии наименование по названию категории).

- Карточка товара (item card).

- Форма заказа (order).

- Поиск (форма+выдача результатов: search).

- Контакты (contacts).

Как создавать все шаблоны страниц — это отдельная тема, поэтому остановимся на основных аспектах, влияющих на характеристику mobile-friendly + поисковую оптимизацию.

1. Адаптивная верстка (@media): должна описывать адаптивную ширину под все ключевые размеры экрана от 320px до 1980px и выше, оптимально деление на подгруппы (@media (min-width:320px) and (max-width:480px) и т.д.) для визуального соотношения объектов и размеров шрифтов с учетом композиции в веб-интерфейсе. Проверка верстки в валидаторе необходима с целью исключения ошибок от некорректного использования нотации сущностей CSS. Обрамление кода комментариями полезно для быстрой работы с секциями крупного проекта. Раздельное хранение CSS для каждого блока позволяет упростить поиск и модификацию нужных блоков (меню, формы заказа, карточки товара и т.д. (см. рис. выше).

2. Объем текста на страницах (описание под заголовком) должен быть соразмерен задаче оптимизации. Т.к. исходная задача включает SEO, значит следует оценить в ТОП выдаче Яндекс.Поиск - объем текстового описания на страницах сайтов конкурентов, которые попадают в ТОП 1-3 места поисковой выдачи. Объем текста на ваших целевых страницах должен быть сопоставим по объему, но при этом уникальность + включения ключевых слов выше по количественных характеристикам.

— уникальность должна быть ближе к 100%,

— включения ключевых слов на объем текста в среднем: 1 ключевая фраза на 20 слов, включая подзаголовки.

Проверять частоту включения ключевой фразы на объем текстапроще поиском в файле описания (с подсветкой дублей включения в текст).

Например, если в заголовке “Шестигранник латунный”, то в тексте его упоминание или синонимы (вида “комплектующее”, “деталь” и т.п.) должно использоваться через 20 слов в различных формулировках, для SEO оптимизации. При этом задача контент-менеджера достигнуть максимума по уникальности текста.

Как правило, чем длиннее и качественнее текст - тем выше уникальность (если описание подготовлено самостоятельно без заимствований). Дробить длинный текст оптимально на инфоблоки (соразмерно пропорциям инфоблоков в верстке) + вводить подзаголовки согласно нотации заданного шаблона страницы.

Если это “карточка товара”, то ввод подзаголовков с включением ключевых слов:

• Применение {item_name}

Пример: <h2>Применение латунного шестигранника</h2> и т.п.

• Характеристики {item_name_synonym}

Пример: <h2>Характеристики комплектующего и т.п.</h2> и т.п.

Уточнение по характеристикам:

по существу инфоблок технических характеристик комплектующего содержит таблицу, из строк, где в 2 колонки последовательно изложены физические эмпирические сущности и их размерности (вес/кг, длина/см, ширина/см и т.д.)

Логично оценить, что данный блок будет копируемый в большинстве сайтов конкурентов. Допустим объем текста характеристик в заданной карточке товара составляет 300 символов, а в ТОП выдаче Яндекс.Поиск у конкурента на позиции ТОП 1 (по наименованию комплектующего в заданном регионе выдачи) объем текста на сопоставимой странице составляется 1500 знаков, включая характеристики.

Значит объем уникального описания у конкурента - 1200 знаков, логичный вывод, что объем + уникальность текста в заданной странице каталога должна быть значительно (кратно) больше, чтобы минимизировать падение позиций после публикации каталога.

При отборе ключевых слов следует ориентироваться на объем текста сопоставимых целевых страниц конкурентов, как следствие, давать вхождения подзаголовков + текста с синонимами кратно объему заданных инфоблоков для шаблонов страниц.

Это техническое правило позволит равномерно наполнить контентом страницы для последующей SEO-оптимизации.

С учетом требований Google Mobile Test рекомендуется использовать два формата для подготовки изображений:

— для элементов интерфейса: SVG.

— для растровой графики (на замену JPG, PNG): WebP.

Для визуализации меню навигации по каталогу и сайту рекомендуется использовать подготовленный sprite.svg, где будут уложены все основные функциональные элементы (для мобильного интерфейса).

Применение спрайта для отображения функциональных элементов меню навигации является оптимальным решению по критериям: веса файла и скорости загрузки с одновременным воспроизведением всех изображений в меню навигации на клиентском устройстве.Для оптимизации растровой графики рекомендуется веб-сервис Squoosh.app.

Подготовка спрайта в любом удобном для Вас графическом редакторе: Corel Draw, Adobe Illustrator и т.д.

Важно соблюсти необходимое и достаточное разрешение (количество точек на дюйм: например, точность отрисовки — 1:1000 единиц).

Принципиально использование спрайта в SVG обосновано, т.к. позволяет экономить вес файла, объединяющего все функциональные элементы интерфейса без дублирования мета-информации файлов в ряде отдельных SVG-элементов. По весу он меньше, чем группа отдельных SVG (тех же изображений).

Для растровых изображений есть возможность экономии веса по палитре, когда изображения оптимизируются изначально по цветопередаче, чтобы количество цветов было минимизировано, тогда получаем при оптимизации через сервис Squoosh — сжатое по палитре и весу изображение (с потерями или без потерь детализации).

При этом не все поля обязательные (required), только минимально необходимые для оформления заявки.

Как оказалось на практике, менеджеры компаний заказчиков предпочитают веерные рассылки по емейлам из контактов на сайтах производителей/поставщиков комплектующих. То есть формы заявок больше направлены на специалистов, кто точечно обращается для заказа комплектующих.

Форма заявки содержит от 1 до N полей. Одно поле “Введите ваш телефон” - это обратный звонок. Стандартная форма делится на 2-4 части из N полей:

• Данные о товарах (кол-во наименований и шт.)
• Персональные данные клиента (ФИО, телефон, емейл, адрес и т.п.)
  
• Доставка (точный адрес, время и т.д.)
  
• Оплата (выбор платежного инструмента и ввод данных банковской карты)

Логично, чем меньше полей ввода, тем проще ввести их и отправить заявку. Выбор оптимального количества полей зависит от бизнес-модели и сопутствующих требований.

Как показала практика, сложные формы заявок заполняют инженеры со стороны Заказчика, кому необходим точный расчет (например, в случае опросного листа санации трубопровода). Их процентовка в общем количестве заказчиков относительно мала.

Важно ограничить количество обязательных для ввода полей до необходимого минимума.

Как бороться со спамов из веб-формы заказа комплектующих?

Спам во входящих заявках — это частая проблема для менеджеров, обслуживающих обработку заявок. Спам-роботы автоматически распространяют рекламные сообщения через незащищенные веб-формы.

Для снижения количества спама из веб-форм рекомендуется совмещать несколько видов защиты:

• Google Capture Invisible. Стандартная практика защиты Google Capture Invisible не всегда спасает от спама.
• Скрытое поле с обработкой события ввода (“фильтр”). Дополнительное поле <input type=”text” name=”{someEntity}” class=”{someEntity}”> с обработкой ввода. Пользователь не увидит в форме скрытое поле ввода, спам-бот заполняет все поля ввода по признаку input type=text/email/tel > то поле будет заполнено каким содержанием, но обработка в PHP не пропустит этот спам, т.к. только в случае пустого поля, при нажатии на отправить — добавляет значение FILTER в данные отправки (для поля name=something).

CSS form input.someEntity {display:none;}

• Возможность отправить заявку только после ввода обязательных полей

  (снятие атрибута disabled из кнопки отправки данных из веб-формы при прохождении условия, что все input required заполнены). Эта обработка учитывает полноту заполнения заявки.

HTML

<input type="submit" id="grecaptchaButton" class="btn validation" value="Отправить заявку" style="" disabled="">

Совмещение трех данных алгоритмов защиты от спама из веб-форм снижает количество спама практически до нуля.

6. Настройка поиска по каталогу с учетом синонимов.

Поиск по заголовкам (мета-информации) категорий и карточек товаров должен быть организован с учетом синонимов, т.к. часть целевой аудитории использует профессиональные наименования, отличные от базовой нотации товаров: не “полимерный рукав”, а “чулок для санации” и т.д.

Грамотное использование синонимов полезно для работы со специфической терминологией комплектующих.

Выполнение данных рекомендаций позволит улучшить характеристики веб-ресурса с каталогом комплектующих:

• Адаптивный интерфейс + оптимизация графики > как следствие, высокая оценка по Google Mobile Test + низкий показатель Отказы (в использовании веб-ресурса с каталогом).
• Семантическое ядро: анализ объема текстов + синонимы > SEO > как следствие, высокие оценки в поисковой выдаче.
  

• Детальная настройка веб-форм под специфику комплектующих (ввод опросных листов и др.форм): снижение кол-ва спама + дополнительные детальные заявки.