За 20 лет практики я видел много красивых сайтов, которые не приносили владельцу ни одной заявки из поиска. Не потому что дизайн плохой — как раз наоборот, дизайн часто был на голову выше конкурентов. Проблема глубже: для живого человека страница переливается анимациями и мгновенно подгружает карточки, а для поискового робота она выглядит как чистый лист бумаги. Пустой <body>, пара скриптов — и всё. Робот приходит, не находит текста, пожимает плечами и уходит. А владелец потом спрашивает, почему сайт за полгода так и не попал в Яндекс.
Это одна из самых коварных SEO-проблем современности, потому что она невидима. Вы открываете сайт в браузере — всё работает. Заказчик открывает — работает. Дизайнер гордится. А трафика нет, и никто не понимает почему. В этой статье я разберу, что реально происходит, когда модный фреймворк встречается с поисковым роботом, как проверить, что видит Яндекс на самом деле, и что делать, чтобы красивый сайт наконец начал индексироваться и продавать.
Сразу оговорюсь: я не против JavaScript. Я против того, чтобы им закрывали сам контент от робота. Разница принципиальная, и именно её чаще всего не понимают на этапе выбора движка.
Что такое клиентский рендеринг и почему он ломает SEO
Чтобы понять проблему, надо разобраться, как вообще собирается страница. Классический сайт (обычный HTML, WordPress, Битрикс) работает так: браузер запрашивает страницу, сервер отдаёт готовый HTML со всем текстом, заголовками и ссылками. Робот получает ровно то же самое — полностью готовый документ. Читай и индексируй.
Сайты на React, Vue, Angular и прочих SPA-фреймворках (Single Page Application) по умолчанию работают иначе. Сервер отдаёт почти пустой HTML — буквально контейнер вроде <div id=»root»></div> — и подключённый JavaScript. И только потом, уже в браузере, этот JavaScript выполняется, дёргает данные из API, собирает разметку и вставляет её на страницу. Это и называется клиентским рендерингом (Client-Side Rendering, CSR): страница рисуется на стороне клиента, а не на сервере.
Для человека с браузером всё бесшовно — он даже не замечает этой доли секунды. Но робот работает не так, как человек. Он получает первый ответ сервера — а там пусто. Текста нет, заголовков нет, ссылок нет. Чтобы увидеть контент, роботу нужно самому запустить JavaScript, дождаться ответов API и отрисовать страницу. И вот тут начинается самое интересное, потому что делает он это далеко не всегда и далеко не сразу.
Почему робот действительно видит пустую страницу
Существует миф: «Google давно умеет выполнять JavaScript, значит, проблемы нет». Умеет. Но с оговорками, о которых молчат апологеты модных фреймворков. А Яндекс — и это критично для рунета — с JavaScript работает заметно хуже и осторожнее. Если ваша аудитория в России, то ориентироваться надо в первую очередь на поведение Яндекса, а он клиентский рендеринг переваривает неохотно.
Вот что происходит под капотом. Робот делит обход на две волны. Первая волна — он забирает исходный HTML. Если там пусто, страница уходит в очередь на рендеринг во вторую волну — робот когда-нибудь вернётся, запустит скрипты и попробует увидеть контент. Это «когда-нибудь» на больших сайтах растягивается от нескольких дней до нескольких недель. Всё это время страница в индексе либо отсутствует, либо висит пустой.
Дальше — краулинговый бюджет. Рендеринг JS требует в разы больше ресурсов, чем чтение готового HTML. Поисковик не будет тратить на ваш сайт бесконечные мощности: у каждого домена есть лимит на обход. На тяжёлом SPA этот бюджет сгорает быстрее, и часть страниц робот просто не успевает отрендерить. На эту тему я отдельно писал, как JavaScript влияет на продвижение сайта — рекомендую, если хотите деталей.
И третье, самое злое: если рендеринг падает с ошибкой — не отработал один скрипт, отвалился API, сработала защита от ботов — робот фиксирует пустую страницу как финальную. Не «попробую позже», а «вот такой у страницы контент, пустой». И индексирует именно пустоту. Дальше вы удивляетесь, почему в поиске сниппет вашей страницы состоит из мусорных слов или вообще отсутствует.
Как это выглядит на практике: реальные цифры
Приведу типичную ситуацию с одного из проектов. Интернет-магазин переехал со старой CMS на модный SPA-фреймворк. Дизайн — космос, скорость переходов между разделами — мгновенная. Владелец счастлив. Через два месяца замеряем: органический трафик из Яндекса просел на 70%, в индексе осталось около 15% страниц каталога вместо прежних 90%.
Открываю Яндекс.Вебмастер, смотрю на сохранённую копию страниц — а там пустые контейнеры. Робот честно сходил, честно не смог отрендерить каталог и честно занёс в индекс болванки без товаров, без цен, без описаний. Формально страницы есть. Фактически ранжировать нечего. О том, как в принципе проверить индексацию сайта в Яндексе, я расскажу ниже пошагово — но именно этот кейс показывает: пока не заглянешь в глаза роботу, ты не понимаешь масштаба беды.
Что важно: сам по себе трафик упал не из-за «плохого фреймворка». Он упал, потому что индексация сайта в поисковых системах сломалась на техническом уровне. Контент был отличный, товары в наличии, цены конкурентные — но всё это жило только в JavaScript, до которого робот не добрался. А то, чего нет в индексе, для поиска не существует. Точка.
На замерах я регулярно вижу закономерность: чем больше страниц на JS-сайте, тем сильнее разрыв между тем, что показывает браузер, и тем, что попадает в индекс. На лендинге из одной страницы проблему можно и не заметить. На каталоге из десяти тысяч карточек она превращается в катастрофу.
Как проверить, что видит робот, а не браузер
Первое правило: никогда не оценивайте индексируемость сайта по тому, как он выглядит в браузере. Браузер выполняет весь JavaScript и показывает финальную картинку. Робот — не всегда. Вам нужно увидеть страницу глазами робота. Вот проверенные способы, от простого к серьёзному.
-
Отключите JavaScript в браузере. В настройках Chrome или через режим разработчика вырубите JS и перезагрузите страницу. Если контент исчез и осталась белая простыня — поздравляю, примерно так вашу страницу видит робот в первую волну обхода.
-
Смотрите исходный код, а не отрисованный DOM. Нажмите «Просмотр исходного кода страницы» (не «Инспектировать», а именно исходник — Ctrl+U). Это тот HTML, который сервер отдал изначально. Если там нет вашего текста и заголовков, а только пустые div и скрипты — контент рендерится клиентом.
-
Используйте инструмент проверки в Яндекс.Вебмастере. Там есть проверка ответа сервера и просмотр того, как робот видит страницу. Это самый честный источник правды для рунета.
-
Проверьте сохранённую копию в выдаче. Найдите страницу в поиске и посмотрите её текстовую версию из кэша. Если там пусто или обрывки — робот проиндексировал пустышку.
Ещё один быстрый тест: скопируйте уникальное предложение с вашей страницы и вставьте в поиск в кавычках. Если Яндекс не находит собственную вашу страницу по её же тексту — значит, этого текста в индексе нет. Простая проверка, а вскрывает проблему за минуту. Заодно советую разобраться, кто такой вебмастер и чем он занимается — половина технических бед лечится через панель вебмастера, если знать, куда смотреть.
Решения: SSR, пререндер и гибридный подход
Хорошая новость: JavaScript-сайт можно сделать полностью дружелюбным к поиску. Плохая — это надо закладывать на этапе разработки, а не прикручивать потом на костылях. Разберём три рабочих подхода.
Серверный рендеринг (SSR, Server-Side Rendering). Самое правильное решение. Сервер сам выполняет JavaScript, собирает готовый HTML со всем контентом и отдаёт роботу и человеку уже наполненную страницу. Робот получает то же, что и обычный HTML-сайт — читай и индексируй сразу. Для React это фреймворк Next.js, для Vue — Nuxt.js. Если вы только выбираете стек под новый проект с прицелом на SEO — берите сразу SSR-фреймворк, не мучайтесь потом.
Пререндеринг (prerendering). Компромисс для существующих SPA. Специальный сервис заранее прогоняет ваши страницы, рендерит их в статический HTML и отдаёт эту готовую версию именно роботам, а живым пользователям — обычное SPA. По сути, вы кэшируете отрисованный результат и скармливаете его поисковику. Работает, но требует настройки и следит за тем, чтобы контент для робота и для человека совпадал — иначе это уже клоакинг, за который прилетает бан.
Гибридный рендеринг. Комбинация: критичный для SEO контент (текст, заголовки, цены, описания) отдаётся сразу в HTML, а интерактивные части (фильтры, корзина, анимации) догружаются скриптами. Это золотая середина: робот получает суть, человек — красоту. Именно к этому я подталкиваю большинство клиентов с уже готовыми SPA.
Отдельно скажу про скорость. SSR не только чинит индексацию, но и ускоряет первую отрисовку — а скорость загрузки сайта сегодня прямой фактор ранжирования. Тяжёлый клиентский рендеринг заставляет пользователя ждать белый экран, пока грузятся мегабайты скриптов, и это бьёт по поведенческим факторам ранжирования: люди не дожидаются и уходят, а робот это фиксирует.
Почему конструкторы и модные фреймворки рискованны для SEO
Теперь о больной теме. За красивой обёрткой многих конструкторов и no-code платформ скрывается ровно та же клиентская отрисовка. Вы собираете сайт мышкой, он выглядит потрясающе, а под капотом — гора JavaScript, который генерирует контент в браузере. Робот снова упирается в пустоту. Особенно этим грешат зарубежные конструкторы, заточенные под визуал, а не под поиск.
Проблема не в том, что фреймворк «плохой». React и Vue — прекрасные инструменты для сложных интерфейсов: личные кабинеты, дашборды, веб-приложения. Проблема в том, что их бездумно тащат на контентные и коммерческие сайты, где 90% ценности — это текст и его индексация. Молотком можно забить гвоздь, а можно разбить себе колено. Всё зависит от того, зачем вы его взяли.
Вот честный список того, что вы получаете вместе с SPA без SSR:
-
Задержку индексации — от дней до недель, пока робот дойдёт до рендеринга.
-
Риск проиндексировать пустышку, если рендеринг упадёт с ошибкой.
-
Слабую работу в Яндексе — он менее охотно исполняет JS, чем Google.
-
Проблемы с метатегами — если title и description подставляются скриптом, робот может их не увидеть и слепить сниппет из чего попало.
-
Пожираемый краулинговый бюджет — тяжёлые страницы обходятся медленнее и реже.
Я не говорю «никогда не используйте JavaScript». Я говорю: если вам нужен поисковый трафик, движок надо выбирать с открытыми глазами и обязательным вопросом к разработчику — «что увидит робот в исходном HTML?». Если внятного ответа нет, вы покупаете красивую витрину, которую не найдёт ни один клиент из поиска.
Пошаговый план: что делать, если сайт уже на JS
Допустим, сайт уже построен на SPA и проседает в поиске. Паниковать не нужно, нужно действовать по порядку. Вот алгоритм, который я применяю на аудитах.
-
Проверьте исходный HTML ключевых страниц. Откройте исходный код (Ctrl+U) главной, категории и карточки товара. Есть ли там текст, заголовки, цены? Если пусто — диагноз подтверждён.
-
Оцените масштаб в Вебмастере. Сколько страниц в индексе против общего числа? Как выглядят сохранённые копии? Сколько страниц в статусе «загружены, но не в поиске»?
-
Внедрите SSR или пререндер. Для React — переезд на Next.js или подключение пререндер-сервиса. Это основная и самая важная задача, всё остальное вторично.
-
Убедитесь, что метатеги в исходном HTML. Title, description, канонические ссылки должны присутствовать в первом ответе сервера, а не подставляться скриптом после загрузки.
-
Проверьте внутренние ссылки. Ссылки должны быть настоящими тегами <a href>, а не кнопками с обработчиком клика на JavaScript. Робот ходит по href, а событие onclick он не нажимает. Здесь же почините перелинковку страниц сайта, чтобы вес растекался правильно.
-
Отдайте актуальную карту сайта. Sitemap.xml поможет роботу быстрее найти все страницы, особенно пока индексация буксует.
-
Замеряйте динамику. После внедрения SSR индексация восстанавливается не мгновенно — роботу нужно переобойти сайт. На проектах я видел заметный возврат трафика в течение 1–2 месяцев после правильной настройки.
Чек-лист и выводы
Соберём всё в короткий чек-лист, который стоит прогнать до запуска любого сайта на JavaScript — и особенно до того, как вы одобрите такой движок у подрядчика.
-
Контент виден в исходном HTML при отключённом JavaScript.
-
Title и description присутствуют в первом ответе сервера.
-
Внутренние ссылки — это теги <a href>, а не JS-обработчики.
-
Реализован SSR, пререндер или гибридный рендеринг.
-
В Яндекс.Вебмастере сохранённая копия страницы содержит контент, а не пустоту.
-
Поиск по уникальной фразе со страницы находит именно вашу страницу.
Главный вывод простой: красивый сайт и индексируемый сайт — это не одно и то же. Можно вбухать бюджет в дизайн и анимации и остаться без единого клиента из поиска, потому что робот видит пустоту. А можно сделать сайт скромнее визуально, но с чистым серверным HTML — и он будет собирать трафик годами. Поисковик ранжирует не то, что видит человек, а то, что он смог прочитать и занести в индекс. Всё, чего нет в индексе, для продвижения не существует — сколько бы сил вы ни вложили в интерфейс. Если планируете расти в поиске всерьёз, техническую основу и внутреннюю оптимизацию сайта по шагам надо закладывать раньше, чем первый пиксель дизайна.
Хотите, чтобы ваш сайт индексировался с первого захода робота и стабильно рос в выдаче — а не превращался в красивую пустышку, которую поиск не видит? Я занимаюсь продвижением сайтов в Яндексе уже больше 20 лет и готовлю сайты в том числе под выдачу нейросетей и AI-поиск. Разберу ваш проект, покажу, что видит робот на самом деле, и где вы теряете трафик и заявки.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.
Связаться со мной →
Старт 
Стандарт 
Премиум 
Забрала чеклист: проверить исходный HTML и страницу в Вебмастере, для SPA — SSR или пререндер, ссылки нормальными href, важный контент в HTML а не по скроллу, мета на сервере. Красота не должна прятать сайт от робота. Спасибо!
Популярные конструкторы обычно отдают нормальный HTML, там с базовой индексацией порядок. Проблема именно у самописных SPA на голых фреймворках без SSR. Но проверить исходник стоит в любом случае, независимо от платформы.
А лендинг на конструкторе вроде Тильды тоже этим страдает? Или там с рендерингом всё в порядке и контент отдаётся роботу нормально?
Виктория, популярные конструкторы вроде Тильды обычно отдают нормальный серверный HTML, там с базовой индексацией порядок. Проблема именно у самописных SPA на голых фреймворках без SSR. Но проверить исходник стоит в любом случае, независимо от платформы — правой кнопкой посмотреть код и убедиться, что контент там есть. Конструктор снижает риск, но не отменяет проверку.
Добавлю: даже мета-теги и Title на чистом JS могут не подхватываться Яндексом корректно. Title, description, canonical, разметка — всё это должно быть в серверном HTML. На SPA часто и мета генерится скриптом, и робот берёт дефолтные.
Спасибо, вот почему наш новый модный сайт не даёт трафика при всей красоте. Разработчики сделали на клиентском рендеринге, а про робота никто не подумал. Пойду требовать SSR или пререндер, пока не поздно.
Совет на этапе выбора: если делаете контентный или коммерческий сайт под поиск, ставьте вопрос про SEO и рендеринг ДО разработки. Переделывать готовый SPA на SSR — дорого и больно. Заложить сразу — копейки по сравнению с переделкой.
Ленивая подгрузка контента при скролле тоже риск: если товары или текст догружаются JS по мере прокрутки, робот может не долистать и не увидеть их. Важное должно быть в исходном HTML сразу, а не подгружаться скриптом.
Не только текст, но и внутренние ссылки на JS — беда. Если навигация и ссылки генерятся скриптом, робот не может пройти по сайту и обнаружить страницы. Ссылки должны быть нормальными href в HTML, а не onclick на JS.
Покажите разработчикам исходный HTML и инструмент проверки в Вебмастере рядом. Наглядно: в браузере контент есть, а роботу отдаётся пустой div. Аргумент это разработчиков обычно отрезвляет лучше любых слов про SEO.
А как объяснить это разработчикам, которые уверены, что всё ок, потому что в браузере всё отображается? Они не понимают разницы между тем, что видит человек, и тем, что забирает робот.
Артём, покажите разработчикам исходный HTML и инструмент проверки в Вебмастере рядом. Наглядно: в браузере контент есть, а роботу отдаётся пустой div. Этот аргумент отрезвляет лучше любых слов про SEO — они видят своими глазами разницу между тем, что рендерит браузер, и тем, что забирает робот. Абстрактные разговоры про индексацию их не убеждают, а пустой исходник — да.
Мы наступили на эти грабли с интернет-магазином на SPA. Красиво, быстро для пользователя, а карточки товаров в индекс не попадали. Внедрили пререндер для роботов — карточки начали индексироваться, трафик пошёл. Дорогая была ошибка.
SSR или SSG — вот правильный ответ для SPA. Next.js, Nuxt и подобные умеют отдавать серверный HTML, который робот видит сразу, а интерактив навешивается сверху. Красота фреймворка плюс индексируемость. Клиентский рендеринг для контентного сайта — ошибка.
Google JS рендерит неплохо, а вот Яндекс исторически с этим хуже. Для российского сайта на клиентском рендеринге это боль. Решение — SSR (серверный рендеринг) или пререндер, чтобы робот получал готовый HTML, а не пустышку.
Простейший тест: правой кнопкой — просмотр исходного кода страницы (не инспектор, а именно исходник). Если там пусто, а текст появляется только в инспекторе после отработки JS — робот тоже может его не увидеть. Ещё есть инструмент проверки страницы в Вебмастере, он показывает, что забрал робот.
А как проверить, видит робот мой контент или нет? Сайт вроде на современном фреймворке, красивый, а трафика нет. Как понять, дело в JS-рендеринге или в чём-то другом?
Елена, простейший тест — правой кнопкой просмотр исходного кода страницы (именно исходник, не инспектор). Если там пусто, а текст появляется только в инспекторе после отработки JS, робот тоже может его не увидеть. Плюс инструмент проверки страницы в Вебмастере показывает, что реально забрал робот. Сравните: видит ли робот тот же контент, что вы в браузере.
Классическая трагедия: дизайнеры и разработчики сделали красивый сайт на React или Vue, а весь контент подгружается скриптами. Открываешь исходный код — а там пустой div и куча JS. Робот видит пустую страницу, индексировать нечего, трафика ноль при идеальном дизайне.