JavaScript стал стандартом современной веб-разработки. React, Vue, Angular — эти фреймворки используются в миллионах проектов. Но у них есть общая проблема: поисковые роботы не всегда корректно обрабатывают контент, который рендерится на клиентской стороне. В этой статье разберём, как именно Яндекс индексирует JS-сайты, почему возникают проблемы и как их устранить.
Как Яндекс читает страницу
Когда Яндекс.Бот приходит на сайт, он сначала получает исходный HTML-код страницы — тот, что отдаёт сервер. У статических сайтов или сайтов на PHP этот HTML уже содержит весь текст, заголовки, ссылки. Роботу остаётся только всё это прочитать и проиндексировать.
С JavaScript всё иначе. Браузер получает почти пустой HTML-файл — обычно это буквально несколько строк с подключением JS-бандла. Весь контент появляется после того, как JavaScript скачается, распарсится и выполнится. Это называется клиентский рендеринг (Client-Side Rendering, CSR).
Яндекс умеет выполнять JavaScript — но с оговорками:
- Робот использует устаревшую версию движка Chromium (по состоянию на 2024–2025 годы — версии, существенно отстающие от актуальной).
- Рендеринг JS занимает время и ресурсы, поэтому Яндекс откладывает его. Между первичным краулингом и JS-рендерингом может пройти несколько дней или даже недель.
- Часть сайтов вовсе не дожидается рендеринга — робот индексирует то, что получил сразу.
Это означает, что если ваш контент доступен только после выполнения JavaScript, вы рискуете получить задержку индексации или вовсе потерять позиции.
Типичные проблемы JS-сайтов в Яндексе
1. Пустой кэш страниц в Яндексе
Зайдите в «Яндекс.Вебмастер» → «Проверка статуса URL» и посмотрите, как робот видит вашу страницу. Если в кэше — пустая страница или минимальный HTML без текста, значит Яндекс не успел выполнить JavaScript.
2. Мета-теги не индексируются
На SPA-сайтах title и meta description часто задаются через JavaScript (например, с помощью react-helmet или vue-meta). Если робот не выполнил JS, он не видит мета-теги — и страница попадает в индекс без заголовка и описания.
3. Ссылки не передают вес
Внутренние ссылки, созданные через JavaScript (в том числе React Router или Vue Router), могут не учитываться роботом. PageRank не передаётся, структура сайта не читается корректно.
4. Динамический контент остаётся невидимым
Если контент загружается по клику (табы, раскрывающиеся блоки) или через AJAX-запрос — Яндекс, скорее всего, его не увидит. Это особенно критично для карточек товаров, отзывов, описаний.
5. Canonicals и hreflang могут конфликтовать
Если теги canonical или hreflang расставляются динамически через JS, а не прописаны в исходном HTML, робот может проигнорировать их или прочитать некорректно.
Как проверить, видит ли Яндекс ваш контент
Способ 1: Вебмастер → Проверка статуса URL Введите URL страницы и выберите «Посмотреть как Яндекс». Сравните «исходный HTML» и «отрендеренную страницу». Если они существенно отличаются — есть проблема.
Способ 2: Отключить JS в браузере Откройте DevTools → Settings → Debugger → «Disable JavaScript». Если страница становится пустой или теряет основной контент, роботы видят примерно то же самое.
Способ 3: Проверить через curl
curl -A "Mozilla/5.0" https://example.com/pageЭто покажет исходный HTML без JS-рендеринга.
Способ 4: ClickFlow и аудит технического SEO Инструменты вроде ClickFlow позволяют провести комплексный технический аудит сайта, выявить страницы, которые плохо индексируются из-за JavaScript, и приоритизировать правки. Это особенно полезно для крупных проектов, где вручную проверить каждую страницу невозможно.
Решения: как помочь роботу
SSR (Server-Side Rendering)
Самое надёжное решение — перейти на серверный рендеринг. Вместо того чтобы отдавать пустой HTML и заставлять браузер строить страницу, сервер сам выполняет JavaScript и отдаёт готовый HTML.
- Next.js — для React-проектов
- Nuxt.js — для Vue-проектов
- Angular Universal — для Angular
После перехода на SSR Яндекс-бот сразу видит готовый контент без необходимости ждать рендеринга JS.
SSG (Static Site Generation)
Статическая генерация — ещё более радикальное решение. Страницы создаются во время сборки как обычные HTML-файлы. Никакого рендеринга на сервере или клиенте при запросе — просто отдача готового файла.
Подходит для блогов, лендингов, документации — там, где контент меняется редко.
Prerendering / Pre-rendering сервисы
Если переписать проект на SSR невозможно, можно использовать промежуточный сервер (prerender-сервер), который:
- Определяет, что к сайту обращается бот, а не пользователь.
- Рендерит страницу через headless Chrome.
- Отдаёт готовый HTML боту.
Популярные решения: Prerender.io, Rendertron, собственная настройка через Puppeteer.
Правильная разметка без JS
Даже если вы используете CSR, часть контента можно вынести в статический HTML:
- Прописать title и meta description в
<head>исходного HTML (не через JS). - Добавить canonical и hreflang в статичный
<head>. - Убедиться, что основные ссылки навигации есть в HTML
<noscript>или рендерятся сразу.
Ленивая загрузка — только для изображений
Ленивая загрузка контента через Intersection Observer или аналогичное API — это хорошо для UX, но плохо для SEO. Никогда не прячьте за ленивую загрузку текстовый контент, заголовки или ссылки.
Как Яндекс отличается от Google
Важный момент: Google значительно лучше справляется с JavaScript. Googlebot использует актуальную версию Chromium, рендерит JS быстро и качественно. Яндекс отстаёт.
Если вы ориентируетесь на российскую аудиторию, рассчитывать на то, что «Google справился, значит и Яндекс справится» — опасно. Нужно проверять именно в Вебмастере Яндекса.
Чек-лист для технического аудита JS-сайта
- [ ] Исходный HTML содержит основной текстовый контент
- [ ] Title и meta description прописаны в
<head>статически - [ ] Canonical и hreflang присутствуют в исходном HTML
- [ ] Внутренние ссылки навигации не зависят от JS
- [ ] Контент не прячется за ленивую загрузку
- [ ] Проверен кэш страниц в Яндекс.Вебмастере
- [ ] Страницы проверены через curl без рендеринга JS
- [ ] Настроен SSR или prerendering для критичных страниц
Практические рекомендации
Если вы только начинаете проект: Сразу выбирайте SSR или SSG. Переписывать готовый CSR-проект в разы дороже, чем изначально сделать правильно.
Если проект уже работает на CSR: Приоритизируйте страницы. Карточки товаров, категории, статьи блога — критичный контент, который должен быть виден без JS. Начните с prerendering для этих страниц.
Для крупных сайтов: Используйте автоматизированные инструменты мониторинга. ClickFlow и аналогичные платформы помогают отслеживать, какие страницы успешно проиндексированы, где есть проблемы с рендерингом, и автоматически создавать задачи для команды разработки.
JavaScript SEO — это не одноразовая задача, а постоянный процесс. Фреймворки обновляются, сайт растёт, появляются новые страницы. Регулярный мониторинг индексации и технический аудит помогут вовремя найти и устранить проблемы до того, как они скажутся на позициях.