Автор статьи: Азимов Ману
Сайт проекта: https://open-doors.spb.ru
В нашем агентстве мы не просто разрабатываем сайты, без шаблонов и конструкторов, мы создаем инструменты для роста бизнеса. Данный проект — подробная история о том, как глубокий технический и 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 и Яндексу корректно отображать путь страницы в поисковой выдаче и улучшает восприятие структуры сайта.
2) Оптимизация скорости (Google PageSpeed Insights)
Мы выполнили комплексную оптимизацию каждой страницы в соответствии с рекомендациями Google PageSpeed Insights. Так как скорость загрузки страницы является критически важным фактором, влияющих на пользовательский опыт и конверсию сайта. После оптимизации все ключевые страницы получили зелёные показатели в PageSpeed Insights.
Для достижения высокой производительности были реализованы следующие технические меры:
- Минификация CSS и JavaScript;
- Асинхронная и отложенная загрузка скриптов;
- Оптимизация изображений с использованием формата WebP;
- Ленивая загрузка (lazy loading) для изображений;
- Включение серверного сжатия GZIP;
- Оптимизация запросов к базе данных;
- Кэширование статических ресурсов на стороне браузера.
3) Формат изображений WebP и тег <picture>
Для оптимизации изображений на сайте был использован формат WebP — современный формат от Google, который обеспечивает на 25–35% меньший размер файлов по сравнению с JPEG и PNG при сохранении качества. Для корректной поддержки всех браузеров изображения выводятся через тег <picture>который позволяет браузеру выбрать оптимальный формат (WebP для современных, JPEG для старых).
Такой подход критически важен для сайта с большим каталогом товаров и тысячами изображений, так как обеспечивает высокую скорость загрузки без потери совместимости.
4) Безопасные меры
Для обеспечения безопасности передачи данных между пользователем и сервером был установлен платный SSL-сертификат AlphaSSL на 1 год. В результате, наличие платного SSL-сертификата обеспечивает надежное шифрование, который гарантирует безопасность передачи данных и предотвращает их перехват третьими лицами.
Преимущества платного SSL-сертификата по сравнению с бесплатными решениями:
- повышенный уровень доверия (проверка организации);
- расширенная техническая поддержка;
- страховое покрытие на случай инцидентов;
- полная совместимость со всеми браузерами;
- усиленное шифрование.
5) Кастомная страница 404
Важность корректной настройки и обработки страницы ошибок 404 нельзя недооценить, поскольку правильно разработанная и корректно настроенная страница, снижает число ошибок в индексе, удерживает пользователя на сайте, направляя его на полезные разделы, тем самым улучшает поведенческие факторы.
6) Валидность кода по стандартам W3C
W3C (World Wide Web Consortium) — международная организация, разрабатывающая стандарты веб-технологий. А чистый и валидный код, залог корректного отображения во всех браузерах, стабильности, SEO, скорости и лучшей индексации.
7) Настройка зеркалирования и канонических URL
Зеркалирование сайта — это когда один и тот же сайт доступен по разным адресам, к примеру
Для поисковых систем это могут быть два разных сайта с дублирующимся контентом, в результате могут быть размытие ссылочного веса, снижение позиции в поисковой выдаче и проблемам с индексацией.
Мы выполнили корректную настройку 301-редиректа с одной версии на другую (без www), указали канонический URL в метатегах и прописали основное зеркало в Google Search Console и Яндекс.Вебмастер.
8) Корректные файлы robots.txt и sitemap.xml
В рамках технической SEO-оптимизации были настроены ключевые служебные файлы:
robots.txt — инструкция для поисковых роботов, определяющая, какие разделы сайта разрешено или запрещено сканировать.
sitemap.xml — карта сайта, предназначенная для ускорения индексации и передачи поисковым системам информации о структуре страниц.
Оба файла были настроены с учётом архитектуры проекта, что позволило, ускорить индексацию каталога и карточек товаров и корректно обозначить приоритетные разделы сайта.
9) Внедрение систем мониторинга и аналитики
Для отслеживания эффективности работы сайта и принятия обоснованных маркетинговых решений мы подключили Яндекс.Метрику и Google Analytics 4.
Это позволяют отслеживать поведение пользователей на сайте, источники трафика, конверсионные действия и эффективность стратегии SEO-продвижения. На основе данных аналитики мы регулярно корректируем стратегию продвижения и точки роста проекта.
Итоги проекта
В результате работы мы создали кастомный высокопроизводительный сайт, который имеет интуитивную и логичную навигацию, обладает SEO-оптимизированной структурой для роста органического трафика, использует масштабируемую систему управления ассортиментом и демонстрирует высокую скорость загрузки и стабильную работу.
Дальнейшее сопровождение проекта
После запуска сайта мы продолжаем работу в рамках комплексного digital-сопровождения. В рамках работ мы регулярно выполняем:
- технический и SEO-аудит;
- анализ поведенческих факторов;
- работу с контентом и семантикой;
- ростом позиций в поисковой выдаче;
- техническую поддержку и оптимизацию сайта.
Результат роста видимости сайта по ключевым запросом в поисковой системе, можно посмотреть в PDF-документе: Позиции сайта в поисковой выдаче
Заключение
Данный проект наглядно демонстрирует, что подходы формата «быстро и дёшево» и сборка сайта на конструкторах с готовыми шаблонами перестают работать, когда бизнесу нужен результат, а не просто наличие сайта, который не работает на бизнес, а лишь создает видимость, после которого необходимо постоянно запускать и тратить средства на рекламу. Единственный правильный путь, разработка с учётом всех правил, стандартов и требований поисковых систем.
Также, данный проект демонстрирует, что для сложных товарных каталогов в B2C-сегменте кастомная разработка на правильно подобранном технологическом стеке оказывается эффективнее и экономически выгоднее в долгосрочной перспективе, чем попытки бесконечно дорабатывать шаблонные решения.
Наша команда разработала для салона дверей технически корректный, SEO-оптимизированный и масштабируемый сайт, который соответствует современным стандартам веб-разработки, имеет правильную архитектуру каталога, интегрирован с XML и JSON-файлами производителей, способен масштабироваться без ограничений и стабильно привлекает органический поисковый трафик.
Хотите такой же результат для своего бизнеса?
Напишите нам, наше Digital-агентство разработает уникальное решение, который заточен под ваш бизнес и строго по правилам профессиональной веб-разработки, без шаблонов и конструкторов.