Красивый, быстрый... и невидимый для Яндекса. Как модный стек (React/Vue) может убить ваши продажи (и что с этим делать)
Привет, на связи Максим.
Знакомая картина? Вы решили обновить сайт. Подрядчик с горящими глазами убедил вас: «Делаем на React (или Vue.js)! Это современно, это SPA (Single Page Application), страницы не перезагружаются, всё летает, как в приложении».
Вы согласились. Потратили бюджет (разработка на фреймворках часто дороже классического подхода). Дизайнер нарисовал красоту, анимации плавные, переходы мгновенные. Вы довольны.
Проходит месяц. Маркетолог льет трафик, SEO-специалист пишет тексты. А продаж нет. Или они идут туго, а цена лида зашкаливает.
Вы меняете таргетолога, переписываете офферы, но проблема не уходит.
А проблема — в «подкапотном пространстве» вашего сайта. Мы недавно спасали такой проект, и хочу показать на пальцах, где именно бизнес терял деньги.
Диагноз: Почему сайт за миллионы не продает?
Для обычного пользователя сайт выглядел отлично. Но когда мы копнули аналитику и посмотрели на проект глазами роботов, вскрылись три критические ошибки, типичные для «модной» разработки без SEO-надзора.
1. Проблема «Пустого листа» (Client-Side Rendering)
Большинство React-сайтов по умолчанию используют CSR. Это значит, что когда робот Яндекса заходит на страницу, он видит не ваш продающий текст и заголовки, а пустой белый лист и строчку кода.
Контент подгружается скриптами позже. Но робот может не дождаться или некорректно обработать этот скрипт.
Итог: Ваш сайт для поиска — пустой. Нет контента — нет индексации — нет бесплатного органического трафика.
2. Тормоза на старте (Lighthouse в красной зоне)
Чтобы сайт «летал» без перезагрузки страниц, браузер должен сначала скачать огромный JS-файл (bundle). На iPhone 15 с Wi-Fi это незаметно. А у клиента в метро с 3G экран остается белым 4–6 секунд.
По статистике, если сайт грузится дольше 3 секунд, более 50% пользователей уходят. Вы платите за клик, а человек даже не увидел заголовок.
3. Хаос в мета-тегах
Частая болезнь SPA — когда при переходе со страницы на страницу URL меняется, а title и description остаются от Главной страницы. И вы пытаетесь продать «Сложное оборудование», а в заголовке вкладки написано «Главная страница». Поисковик считает это дублями и пессимизирует выдачу.
Лечение: Как мы это исправили (Инженерный подход)
Клиент был готов «сносить всё и делать на конструкторе», но мы сохранили дизайн и логику, переработав архитектуру. Мы подошли к задаче так, как это делают топовые студии в e-commerce сегменте:
- Внедрили SSR (Server-Side Rendering). Перенесли проект на Next.js (для React). Теперь сервер отдает браузеру и роботам уже готовый HTML с текстами и картинками. Яндекс сразу видит контент, индексация пошла вверх.
- Настроили гидратацию и Code Splitting. Разбили огромный файл кода на куски. Теперь, когда пользователь заходит в раздел «Контакты», он не качает код от «Каталога». Время до первого взаимодействия (TTI) сократилось в 3 раза.
- Наладили статус-коды. Настроили правильную отдачу 404 ошибок и редиректов. Раньше несуществующая страница отдавала код 200 (ОК), что сводило с ума поисковики.
По сути, мы совместили скорость современного приложения и надежность классического сайта для SEO.
Результат в цифрах
Прошло 2 месяца после технического релиза. Дизайн не меняли, бюджет на рекламу не увеличивали.
- Performance (Google Lighthouse) вырос с 32 до 92 баллов.
- Отказы (Bounce Rate) снизились с 25% до 12%. Люди перестали закрывать сайт, не дождавшись загрузки.
- Органический трафик вырос на 40% и продолжает расти, так как поисковики наконец-то «прочитали» сайт полностью.
Вывод
Современные технологии — это круто, но они требуют прямых рук. React или Vue сами по себе не зло. Зло — это когда их используют только ради хайпа или удобства программиста, забывая про бизнес-задачи (SEO и конверсию).
Если у вас красивый современный сайт, но есть ощущение, что он работает «вхолостую» — не спешите увольнять маркетологов. Возможно, ваш сайт просто «невидим» для роботов или слишком тяжел для людей.
P.S.
Обсудить со мной проект можно в тг @MaksimCJ