JavaScript SEO

Как работает

Googlebot обрабатывает страницу в два этапа. Сначала он скачивает исходный HTML и ставит страницу в очередь на рендеринг. Затем, когда доступны ресурсы, запускает headless-браузер на движке Chromium, выполняет JavaScript и индексирует уже отрисованный DOM. Между первым и вторым этапом проходит время — от секунд до дней, поэтому контент, который появляется только после выполнения скриптов, индексируется с задержкой.

Проблема обостряется на SPA (single page application), где сервер отдаёт почти пустой HTML, а весь контент строит JavaScript в браузере. Если скрипт не выполнился или упал с ошибкой, бот увидит пустую страницу.

Пример разницы между исходным и отрисованным HTML:

<!-- Что отдаёт сервер -->
<div id="app"></div>

<!-- Что видит бот после рендеринга -->
<div id="app">
  <h1>Электрические чайники</h1>
  <p>В каталоге 150 моделей...</p>
</div>

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

Яндекс тоже умеет исполнять JavaScript, но его возможности рендеринга скромнее, поэтому для рунета критичный контент лучше отдавать в исходном HTML.

Почему важно для SEO

Если ключевой текст, ссылки и метаданные появляются только после выполнения скриптов, поисковик может не увидеть их вовремя или не увидеть вовсе. Это ведёт к неполной индексации: страницы попадают в индекс без содержимого, внутренние ссылки не обходятся, товары не находятся. Для интернет-магазинов это особенно чувствительно: если карточки товаров и фильтры собираются скриптами, часть ассортимента рискует остаться вне индекса.

Отложенный рендеринг тратит краулинговый бюджет: боту дороже обрабатывать JS-страницы, чем готовый HTML. Тяжёлые скрипты также блокируют отрисовку — эта сторона вопроса разобрана в карточке render-blocking, а сам процесс обхода — в карточке crawling. Радикальное решение проблемы — отдавать готовый HTML с сервера, о чём речь в карточке server-side-rendering.

Частые ошибки

• Строить навигацию и ссылки на onclick вместо тегов <a href> — бот не переходит по таким ссылкам.
• Подгружать основной контент только по действию пользователя: скролл, клик, наведение.
• Закрывать в robots.txt файлы JS и CSS — бот не сможет отрендерить страницу.
• Формировать title и meta-теги скриптом с задержкой — на этапе первичного обхода их нет.
• Полагаться на быстрый рендеринг в Яндексе для критичного контента.

Как проверить

В Google Search Console используйте инструмент «Проверка URL» → «Изучить просканированную страницу»: он показывает отрисованный HTML и скриншот того, что увидел бот. В Chrome DevTools сравните исходный код (View Source) с итоговым DOM во вкладке Elements — расхождение и есть контент, добавленный скриптами. Отключение JavaScript в браузере наглядно показывает, что останется боту при неудачном рендеринге.

Пустой исходный HTML легко пропустить при беглом осмотре. SEO Crawler обходит сайт и фиксирует, какой контент, заголовки и ссылки доступны в ответе сервера, помогая заметить страницы, где основной текст появляется только после выполнения скриптов.

Вывод

Всё сводится к одному: поисковик должен получать контент без задержек и сбоев. Отдавайте критичный текст, ссылки и метаданные в исходном HTML или через серверный рендеринг, не блокируйте скрипты в robots.txt и проверяйте, что видит бот после рендеринга.