JavaScript и SEO: почему поисковый робот может не видеть контент сайта

Видят ли Google и Яндекс JavaScript

Google обрабатывает JS-страницы в три этапа: crawl → render → index. Актуальный Chromium выполняет скрипты, после чего Google анализирует rendered HTML. Яндекс также поддерживает JavaScript rendering и позволяет управлять им в Вебмастере.

Проблема не в технологии, а в предсказуемости результата для робота.

Чем отличаются CSR, SSR и пререндеринг

Google не требует SSR, но называет серверный и статический рендеринг надёжными решениями. Dynamic rendering считается обходным, а не рекомендуемым долгосрочным подходом.

Почему робот может не увидеть контент

В HTML только пустая оболочка

<div id="app"></div>

Товары, H1 и описание появляются только после выполнения bundle и запросов к API.

JavaScript падает с ошибкой

Сбой критичного скрипта оставляет роботу пустую или неполную страницу.

Ресурсы заблокированы

Недоступные JS, CSS или API меняют итоговый DOM. Google не рендерит заблокированные файлы и страницы.

Нужно действие пользователя

Google Search не взаимодействует со страницей как человек. Контент за кликом, свайпом или scroll event может не загрузиться.

API не отвечает боту

Причиной бывают авторизация, cookie, геозависимость, rate limit или антибот-защита. Для критичного контента нужен HTTP-доступ: WebSocket и WebRTC не должны быть единственным каналом.

Почему робот может не находить ссылки

<a href="/catalog/iphone/">iPhone</a>  ✓
<div onclick="openProduct()">iPhone</div>  ✕

Google надёжно обнаруживает ссылки в элементах <a href>. Для SPA используйте History API, а не маршруты вида #/product.

JavaScript-каталог и кнопка «Показать ещё»

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

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

Lazy loading: когда он ломает SEO

Нормально загружать данные при приближении к viewport через IntersectionObserver или встроенный lazy loading. Плохо — ждать клика или события прокрутки, откладывать первый экран и не добавлять URL изображений в rendered DOM.

JavaScript и метаданные

Через JS можно задавать Title, Description, robots, canonical и structured data, но это добавляет точки отказа. Не допускайте конфликтующих canonical в исходном и отрисованном HTML.

Google обрабатывает JSON-LD после рендеринга, если данные соответствуют видимому контенту. Проверяйте разметку в Rich Results Test.

Особенности Яндекса

Вебмастер позволяет сравнить страницу с JS и без него, выбрать режим JavaScript rendering и настроить ожидание отложенного контента через window.YandexRotorSettings.

Для проекта под Google и Яндекс критичный SEO-контент безопаснее отдавать сразу через SSR или пререндеринг, даже когда клиентский вариант успешно работает у пользователя.

Как проверить, что реально видит Google

1. Открыть страницу и посмотреть View Source.
2. Сравнить исходник с DOM после JS.
3. Открыть URL Inspection в Search Console.
4. Проверить rendered HTML, H1, текст и ссылки.
5. Проверить canonical, robots и structured data.
6. Изучить ошибки JS и недоступные ресурсы.

Google рекомендует URL Inspection и Rich Results Test: там доступны DOM, загруженные ресурсы и ошибки консоли.

Как проверить в Яндексе

Используйте Вебмастер → «Проверка страницы», версию страницы в базе поиска и раздел «Рендеринг страниц JavaScript». Сравните результат с включённым и выключенным JS.

Когда стоит переходить на SSR или пререндеринг

• основного контента нет в initial HTML;
• страницы индексируются нестабильно;
• робот периодически получает пустой DOM;
• категории зависят от цепочки API-запросов;
• метаданные генерируются нестабильно;
• важна надёжность сразу в нескольких поисковиках.

Любой React-, Vue- или Next-сайт не обязан быть SSR. Решение зависит от фактического rendered HTML и стабильности индексирования.

Практический аудит JS-сайта

Дополнительно проверьте коды ответа, Sitemap, robots.txt, lazy loading, пагинацию, консоль, API и равенство критичного контента для пользователя и робота. Связанные материалы: краулинговый бюджет, robots.txt и sitemap.xml.

«В JavaScript-проектах я бы вообще не начинал разговор с вопроса “умеет ли Google выполнять JS”. Умеет. Вопрос в другом: что именно получит робот, если один API не ответит, скрипт загрузится позже или для появления товаров потребуется действие пользователя. SEO-критичный контент лучше делать максимально предсказуемым».

Константин Шипилов

SEO-специалист, руководитель Шипилов SEO

Что не делать

• считать любой JS-сайт плохим для SEO;
• проверять только внешний вид в Chrome;
• прятать SEO-контент за кликом или скроллом;
• делать навигацию только через onclick;
• использовать hash-routing для индексируемых страниц;
• делать infinite scroll без URL и пагинации;
• возвращать пустой HTML в надежде на сложную цепочку JS/API;
• выбирать dynamic rendering как базовую архитектуру.

Частые вопросы

Источники

• Google: основы JavaScript SEO;
• Google: lazy loading и infinite scroll;
• Google: dynamic rendering;
• Яндекс: рендеринг JavaScript.