Как я создал B2B-сайт для компании по металлопрокату — без CMS и без фреймворков

В металлоторговле сайт часто выглядит одинаково: тяжёлый Битрикс с каталогом из 1С, грузится по 5-8 секунд, мобильная версия разъезжается, а SEO отсутствует как класс. Или другая крайность: компания работает десять лет, оборот сотни миллионов, а сайта нет вообще — только номер телефона в 2ГИС.

Обратился друг — у него компания по металлопрокату в Нижнем Новгороде, работает с 2005 года, а нормального сайта нет. Нужен каталог на 80+ позиций, 10 категорий, таблицы с ценами, форма заказа, SEO. Я предложил сделать всё — без CMS, без фреймворков, без сборщиков. Чистый HTML, CSS, немного JavaScript и один PHP-файл для формы.

Расскажу, как устроен проект, какие решения принимал и почему для B2B-каталога это работает лучше любого конструктора.

Почему статический сайт, а не CMS

Первый вопрос, который возникает: зачем статика в 2026 году? Ведь есть WordPress, Tilda, 1C-Битрикс. Ответ простой — для B2B-каталога металлопроката ни одна из этих CMS не даёт преимуществ, зато добавляет проблем.

Единственный минус статики — обновление каталога требует правки файлов. Но в металлоторговле прайс меняется раз в неделю-две, а не каждый час. Для таких задач HTML — оптимальный выбор.

Сайт на чистом HTML — это не «по-старинке». Это осознанный выбор: максимум скорости, минимум точек отказа, полный контроль над кодом.

Структура каталога: 10 категорий, 80+ подкатегорий

Каталог металлопроката — это иерархия. Есть 10 основных категорий, и каждая разбита на подкатегории. Например, «Трубы» — это и профильные, и круглые, и ВГП, и нержавеющие. У каждой подкатегории своя страница с таблицей товаров.

URL-структура понятная и плоская:

/catalog/truby/                    — категория
/catalog/truby/truba-profilnaya/   — подкатегория с товарами
/catalog/sortovoy-prokat/shveller/ — другая ветка

На каждой странице — хлебные крошки (BreadcrumbList в Schema.org), чтобы и пользователь, и поисковик понимали, где они находятся. Навигация по категориям — в шапке сайта с выпадающим меню.

Таблицы товаров с поиском и заказом

Каждая подкатегория содержит таблицу с конкретными позициями: название, размер, единица измерения, цена за единицу. Это не интернет-магазин — это B2B-каталог. Тут не кладут в корзину, а оставляют заявку на конкретную позицию.

Как работает заказ

1. Пользователь видит таблицу товаров с кнопкой «Заказать» напротив каждой позиции
2. По клику открывается модальное окно с предзаполненным названием товара
3. Пользователь вводит количество, имя, телефон и отправляет заявку
4. PHP-обработчик отправляет письмо менеджеру с деталями заказа

Форма защищена от спама: есть скрытое поле-ловушка (honeypot). Боты заполняют все поля подряд, а настоящий пользователь его не видит. Просто, эффективно, без капчи.

<!-- Поле скрыто через CSS, бот его заполнит -->
<input type="text" name="company_website"
       style="position:absolute; left:-9999px;"
       tabindex="-1" autocomplete="off">

<!-- На сервере: если поле заполнено — это бот -->
if (!empty($_POST['company_website'])) {
    // Спам — молча игнорируем
    exit;
}

JavaScript на странице — минимальный: поиск по таблице (фильтрация строк по вводу), открытие/закрытие модального окна, предзаполнение названия товара в форме. Никаких библиотек — чистый vanilla JS.

SEO на уровне кода

Когда делаешь сайт руками, у тебя полный контроль над каждым тегом. Никаких «SEO-плагинов» — всё прописано в коде напрямую.

Что реализовано

• Schema.org Organization — информация о компании (название, адрес, телефон, регион) в JSON-LD на каждой странице
• Schema.org BreadcrumbList — хлебные крошки в структурированных данных, чтобы Google показывал путь в выдаче
• Schema.org Product + AggregateOffer — каждый товар размечен как Product с ценой и наличием. Поисковик понимает, что это каталог
• Open Graph — корректные превью при отправке ссылки в мессенджеры и соцсети
• sitemap.xml — карта сайта со всеми 80+ страницами для индексации
• Уникальные title и description — на каждой подкатегории свои мета-теги с ключевыми словами

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Труба профильная 40x20x2",
  "description": "Труба стальная профильная 40x20x2 мм",
  "offers": {
    "@type": "AggregateOffer",
    "priceCurrency": "RUB",
    "lowPrice": "48500",
    "highPrice": "52000",
    "offerCount": "3",
    "availability": "https://schema.org/InStock"
  }
}

Результат: страницы индексируются быстро, в поисковой выдаче отображаются с ценами и хлебными крошками. Для B2B-ниши в регионе — это серьёзное преимущество, потому что большинство конкурентов в Нижнем Новгороде либо вообще не размечают каталог, либо сидят на тяжёлом Битриксе с дефолтной SEO-настройкой.

Дизайн без дизайнера

Нужно было создать сайт, который выглядит солидно и профессионально, но без привлечения дизайнера. Решение: тёмная шапка, один акцентный цвет, хороший шрифт и аккуратная типографика.

Палитра простая: тёмный хедер #171c26, янтарный акцент #f59f0a (ассоциация с металлом и промышленностью), белый фон контента, светло-серый фон секций. Шрифт — Inter, максимальная ширина контейнера — 1400px.

Адаптивность

Breakpoint один — 768px. Всё, что на десктопе в несколько колонок, на мобильном складывается в одну. Таблицы получают горизонтальный скролл. Меню категорий превращается в бургер. Карточки продуктов — в вертикальный список.

Никаких фреймворков для сетки — обычный CSS Grid и Flexbox. Они прекрасно справляются с адаптивностью B2B-каталога.

Технологический стек

Фотогалерея и страница «О компании»

Для B2B-сайта по металлу фотографии реального склада — это мощный инструмент доверия. Нужно было показать масштаб: территория, хранение, погрузка, транспортировка.

Были сделаны аэросъёмки склада с дрона. Фотографии разместились в галерее с лайтбоксом — при клике открывается полноразмерное изображение с навигацией стрелками. Лайтбокс — тоже на чистом JS, никаких jQuery-плагинов.

Элементы доверия на странице «О компании»

• Реквизиты компании — ИНН, ОГРН, юридический адрес. В B2B это обязательно
• Фотографии склада — не стоковые, а реальные, с дрона
• Преимущества — собственный склад, доставка, резка металла, работа с НДС
• География поставок — Нижний Новгород и область
• Контакты — телефон, email, адрес с картой

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

Я собрал шаблоны, которые использую в работе с клиентами: медиаплан, учёт рабочего времени, аналитические отчёты. Скачайте бесплатно на странице шаблонов.

Файловая структура проекта

Весь проект — это набор статических файлов. Никаких сборщиков, бандлеров, node_modules. Любой разработчик откроет и сразу поймёт, как всё устроено.

Выводы и рекомендации

Этот проект — хороший пример того, что для B2B-каталога не нужна тяжёлая CMS. Вот что получилось в итоге:

Когда статический сайт подходит для B2B

• Каталог обновляется не чаще раза в неделю
• Не нужна корзина и онлайн-оплата — только заявки
• Важна скорость загрузки (особенно для мобильных)
• Бюджет ограничен, а результат нужен быстро
• Хочется полный контроль над SEO и разметкой

Когда лучше выбрать CMS

• Каталог обновляется ежедневно из 1С и содержит тысячи позиций
• Нужна интеграция с ERP, складом, логистикой
• Менеджеры должны сами редактировать контент через админку
• Планируется интернет-магазин с оплатой

Для компании по металлопрокату с каталогом до нескольких сотен позиций и заявочной моделью продаж — статический сайт работает отлично. Быстро грузится, легко поддерживается, хорошо индексируется. А если нужно масштабировать — всегда можно перенести структуру на CMS, сохранив URL-адреса и SEO-разметку.

Шаблоны для маркетинга

Профессиональные шаблоны для организации работы:
медиапланирование, учёт времени, аналитические отчёты

E-mail *

Получить материалы

Поставив галочку, вы даете согласие на обработку персональных данных. Подробнее об обработке данных в Политике.