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

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

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

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

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

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

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

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

Иерархическая структура сайта салона дверей с разделами каталога и страницами товаров

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

- 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-логику поверх файловых данных.

Страница динамического отображение товаров производителя Bravo из JSON-файла

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

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

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

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

- конкретные товары;

- модели дверей;

- характеристики;

- схожие и частично совпадающие запросы.

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

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.

Наличие микроразметки Open Graph и Schema.org на страницах сайта

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

- упрощают навигацию для пользователя, позволяя быстро вернуться на уровень выше;

- помогают поисковым системам понять иерархию сайта.

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

Отображение хлебных крошек на странице товара Bravo в каталоге дверей

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

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

Результат скорости загрузки сайта салона дверей в Google PageSpeed Insights

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

- Минификация CSS и JavaScript;

- Асинхронная и отложенная загрузка скриптов;

- Оптимизация изображений с использованием формата WebP;

- Ленивая загрузка (lazy loading) для изображений;

- Включение серверного сжатия GZIP;

- Оптимизация запросов к базе данных;

- Кэширование статических ресурсов на стороне браузера.

3) Формат изображений WebP и тег

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

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

Результат отображения изображений WebP на страницах сайта

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

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

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

- повышенный уровень доверия (проверка организации);

- расширенная техническая поддержка;

- страховое покрытие на случай инцидентов;

- полная совместимость со всеми браузерами;

- усиленное шифрование.

Платный SSL-сертификат AlphaSSL, используемый для защиты сайта

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

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

Кастомная страница 404 с навигацией и ссылками на разделы сайта салона дверей

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

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

Результат проверки HTML-кода сайта валидатором W3C без критических ошибок

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

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

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

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

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

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

Настройка 301-редиректа и зеркалирования сайта в файле .htaccess

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

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

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

sitemap.xml — карта сайта, предназначенная для ускорения индексации и передачи поисковым системам информации о структуре страниц.

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

Наличие файлов robots.txt и sitemap.xml для поисковых роботов

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

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

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

Подключённые системы веб-аналитики Яндекс.Метрика и Google Analytics 4 на сайте

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

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

- технический и SEO-аудит;

- анализ поведенческих факторов;

- работу с контентом и семантикой;

- ростом позиций в поисковой выдаче;

- техническую поддержку и оптимизацию сайта.