Кастомная разработка и SEO‑продвижение сайта для салона дверей с нуля.

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

Сегодня сайт компании — это не просто цифровая визитка, а полноценный инструмент продаж. Особенно в нише товаров, где клиенты принимают решения на основе ассортимента, фильтров, фото, описаний, наличия и удобства. Именно поэтому разработка эффективного сайта требует не только визуального обновления, но и глубокой архитектурной, технической и поисковой проработки.

Этап 1. Первая встреча и понимание задач заказчика

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

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

Этап 2. Полный технический и SEO-аудит старого сайта

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

В нашем понимании редизайн — это не просто «сделать красивее». Это комплексное переосмысление сайта с точки зрения пользователя, бизнеса и поисковых систем. Цель — не просто обновить внешний вид, а устранить системные недостатки, повысить конверсию и адаптировать сайт под текущие бизнес‑задачи.

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

Этап 3. Проектирование структуры и карты сайта

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

Этап 4. Технологический стек и автоматизация каталога

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

• HTML5 — семантическая разметка;
• CSS3 (Flexbox + Grid) — стилизация и адаптивный интерфейс;
• JavaScript (без jQuery) — интерактивность и динамический функционал;
• PHP8 — серверная часть;
• MySQL — база данных, только для раздела «Распродажа».

Такой стек обеспечивает высокую производительность, безопасность и возможность гибкой доработки функционала. Главный технический вызов проекта — каталог из более чем 5 000 товаров от 5 производителей. Мы отказались от ручного добавления и сделали гибкую систему импорта из файлов XML и JSON.

Мы запросили у производителей (Bravo, Geona, Sigma, Morelli, Rucceti) файлы в формате XML или JSON, содержащие полную информацию о товарах:

• Название товара;
• Артикул;
• Цена;
• Описание;
• Технические характеристики;
• Изображения;
• Категория/коллекция;
• Наличие на складе.

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

• одна страница категории (подтягивает нужный JSON и выводит товары);
• одна страница карточки товара (по ID подтягивает данные из файла).

JavaScript-код динамически подгружает данные из файлов и отображает их на соответствующих страницах без необходимости создавать отдельные HTML-файлы для каждого товара. По сути, мы разработали мини-CRM-логику поверх файловых данных.

Отныне, обновление ассортимента на сайте занимает считанные минуты, достаточно заменить файл от производителя. Это оптимальный баланс между кастомной разработкой и удобством наполнения.

Страница «Распродажа» — отдельная гордость. Для акционных товаров заказчик хотел гибкость и самостоятельно добавлять товары. Мы сделали удобную кастомную административную панель на PHP и с базой данных MySQL. Заполняется форма → товар мгновенно появляется на странице распродажи и в общей выдаче.

Интеллектуальный поиск по каталогу товаров

Для удобства пользователей и ускорения выбора товаров, на сайте была реализована система поиска, который работает напрямую с данными из XML и JSON-файлов производителей и позволяет находить:

• Конкретные товары;
• Модели дверей;
• Характеристики;
• Схожие и частично совпадающие запросы.

Алгоритм поиска анализирует пользовательский запрос на сайте и выполняет поиск по всем доступным данным, включая названия, описания и атрибуты товаров. Результаты поиска выводятся на отдельной странице search.html и структурируются по производителям, что упрощает навигацию и повышает конверсию.

Этап 5. Техническая SEO-оптимизация и мелкие, но важные детали

1) Микроразметка Open Graph и Schema.org

С самого начала проекта, SEO закладывалось на уровне архитектуры. Для каждой страницы были внедрены два типа микроразметки:

а) Open Graph (OG) - микроразметка Open Graph необходима для корректного отображения страниц при публикации в социальных сетях (ВКонтакте, Telegram и др.). Она определяет:

• Заголовок страницы (og:title);
• Описание (og:description);
• Изображение для превью (og:image);
• URL страницы (og:url);
• Тип контента (og:type).

б) Schema.org (JSON-LD) - для передачи поисковым системам структурированные данные о контенте и помогают лучше понимать содержимое страниц и отображать расширенные сниппеты в результатах поиска:

• Для товаров - Product, Offer, Price, Availability;
• Для компании - Organization, LocalBusiness;
• Для отзывов - Review, AggregateRating;
• Для навигации - BreadcrumbList.

На всех страницах сайта реализована навигационная цепочка (хлебные крошки). Данные цепочки выполняют сразу две важные функции:

• Упрощают навигацию для пользователя, позволяя быстро вернуться на уровень выше;
• Помогают поисковым системам понять иерархию сайта.

Навигационная цепочка дополнительно размечена через Schema.org (BreadcrumbList) в формате JSON-LD, что позволяет Google и Яндексу корректно отображать путь страницы в поисковой выдаче и улучшает восприятие структуры сайта.

3) Оптимизация скорости (Google PageSpeed Insights)

Мы выполнили комплексную оптимизацию каждой страницы в соответствии с рекомендациями Google PageSpeed Insights. Так как скорость загрузки страницы является критически важным фактором, влияющих на пользовательский опыт и конверсию сайта. После оптимизации все ключевые страницы получили зелёные показатели в PageSpeed Insights.

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

• Минификация CSS и JavaScript;
• Асинхронная и отложенная загрузка скриптов;
• Оптимизация изображений с использованием формата WebP;
• Ленивая загрузка (lazy loading) для изображений;
• Включение серверного сжатия GZIP;
• Оптимизация запросов к базе данных;
• Кэширование статических ресурсов на стороне браузера.

4) Формат изображений WebP и тег <picture>

Для оптимизации изображений на сайте был использован формат WebP — современный формат от Google, который обеспечивает на 25–35% меньший размер файлов по сравнению с JPEG и PNG при сохранении качества. Для корректной поддержки всех браузеров изображения выводятся через тег <picture> который позволяет браузеру выбрать оптимальный формат (WebP для современных, JPEG для старых).

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

5) Безопасные меры

Для обеспечения безопасности передачи данных между пользователем и сервером был установлен платный SSL-сертификат AlphaSSL на 1 год. В результате, наличие платного SSL-сертификата обеспечивает надежное шифрование, который гарантирует безопасность передачи данных и предотвращает их перехват третьими лицами.

Преимущества платного SSL-сертификата по сравнению с бесплатными решениями:

• Повышенный уровень доверия (проверка организации);
• Расширенная техническая поддержка;
• Страховое покрытие на случай инцидентов;
• Полная совместимость со всеми браузерами;
• Усиленное шифрование.

6) Кастомная страница 404

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

7) Валидность кода по стандартам W3C

W3C (World Wide Web Consortium) — международная организация, разрабатывающая стандарты веб-технологий. А чистый и валидный код, залог корректного отображения во всех браузерах, стабильности, SEO, скорости и лучшей индексации.

8) Настройка зеркалирования и канонических URL

Зеркалирование сайта — это когда один и тот же сайт доступен по разным адресам, к примеру

• https://open-doors.spb.ru/
• https://www.open-doors.spb.ru/

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

Мы выполнили корректную настройку 301-редиректа с одной версии на другую (без www), указали канонический URL в метатегах и прописали основное зеркало в Google Search Console и Яндекс.Вебмастер.

9) Корректные файлы robots.txt и sitemap.xml

В рамках технической SEO-оптимизации были настроены ключевые служебные файлы:

• robots.txt — инструкция для поисковых роботов, определяющая, какие разделы сайта разрешено или запрещено сканировать.
• sitemap.xml — карта сайта, предназначенная для ускорения индексации и передачи поисковым системам информации о структуре страниц.

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

10) Внедрение систем мониторинга и аналитики

Для отслеживания эффективности работы сайта и принятия обоснованных маркетинговых решений мы подключили Яндекс.Метрику и Google Analytics 4.

Это позволяют отслеживать поведение пользователей на сайте, источники трафика, конверсионные действия и эффективность стратегии SEO-продвижения. На основе данных аналитики мы регулярно корректируем стратегию продвижения и точки роста проекта.

Итоги проекта

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

Дальнейшее сопровождение проекта

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

• Технический и SEO-аудит;
• Анализ поведенческих факторов;
• Работу с контентом и семантикой;
• Ростом позиций в поисковой выдаче;
• Техническую поддержку и оптимизацию сайта.

Результат роста видимости сайта по ключевым запросом в поисковой системе, можно посмотреть в PDF-документе: Позиции сайта в поисковой выдаче

Заключение

Данный проект наглядно демонстрирует, что подходы формата «быстро и дёшево» и сборка сайта на конструкторах с готовыми шаблонами перестают работать, когда бизнесу нужен результат, а не просто наличие сайта, который не работает на бизнес, а лишь создает видимость, после которого необходимо постоянно запускать и тратить средства на рекламу. Единственный правильный путь, разработка с учётом всех правил, стандартов и требований поисковых систем.

Также, данный проект демонстрирует, что для сложных товарных каталогов в B2C-сегменте кастомная разработка на правильно подобранном технологическом стеке оказывается эффективнее и экономически выгоднее в долгосрочной перспективе, чем попытки бесконечно дорабатывать шаблонные решения.

Наша команда разработала для салона дверей технически корректный, SEO-оптимизированный и масштабируемый сайт, который соответствует современным стандартам веб-разработки, имеет правильную архитектуру каталога, интегрирован с XML и JSON-файлами производителей, способен масштабироваться без ограничений и стабильно привлекает органический поисковый трафик.

Хотите такой же результат для своего бизнеса?

Напишите нам, наше Digital-агентство разработает уникальное решение, который заточен под ваш бизнес и строго по правилам профессиональной веб-разработки, без шаблонов и конструкторов.