Технический SEO

Рендеринг

rendering · отрисовка страницы

Рендеринг (rendering) — это процесс, при котором поисковый робот выполняет JavaScript и формирует итоговый HTML страницы для индексации. От него зависит, увидит ли Google контент сайта.

Рендеринг (rendering) — это процесс, в котором браузер или поисковый бот превращает HTML, CSS и JavaScript в готовую страницу. Простыми словами, что это значит для SEO: пока Googlebot не выполнит JS, он видит пустой каркас без контента. Двухфазная индексация Google официально описана в 2018 году на I/O — сначала краулинг HTML, затем рендер через Web Rendering Service на базе Chromium.

С 2019 года WRS использует evergreen Chromium и обновляется вместе со стабильным релизом браузера. Отрисовка страницы определяет, попадёт ли JS-контент в индекс: по данным John Mueller, очередь рендера может задерживать индексацию от секунд до нескольких дней. Зачем это знать — без корректной отрисовки SPA на React или Vue рискует потерять до 100% органики.

§ 01Зачем нужен

Рендеринг нужен, чтобы поисковая система получила тот же DOM, что и пользователь. SPA-сайты на React, Angular, Vue без отрисовки отдают Googlebot пустой <div id='root'>. Что делает корректная настройка: переносит мета-теги, тексты, ссылки и Schema.org в HTML до индексации. По исследованию Onely 2022 года, 25% страниц с тяжёлым JS не индексировались за 14 дней. Расшифровка простая — нет HTML, нет позиций.

§ 02Как настраивается

В 2026 году доминируют 4 модели отрисовки: CSR (клиентский), SSR (серверный через Node.js), SSG (статика, Next.js, Astro) и Dynamic Rendering. Google рекомендует SSR или SSG как дефолт. Next.js 14 предлагает React Server Components, Nuxt 3 — гибрид через Nitro. Dynamic Rendering через Prerender.io или Rendertron Google официально называл "workaround" ещё в 2022, но он работает. Оптимизация TTFB ниже 600 мс — обязательное условие.

Кейс e-commerce

индексация 38% → 92% — Интернет-магазин одежды на Next.js перевёл рендеринг с CSR на SSR через getServerSideProps. Доля проиндексированных карточек выросла с 38% до 92% за 4 месяца. Замер через Google Search Console Coverage и логи Googlebot.

До и после

органика +63% за 7 мес — B2B SaaS-платформа на Vue SPA внедрила prerender.io для бот-трафика, отдавая статический HTML поисковику. Органический трафик вырос на 63% за 7 месяцев, индексация увеличилась с 210 до 1450 URL. Динамика отслежена в Ahrefs Site Explorer.

§ 03Где смотреть результат

Проверка рендеринга начинается с инструмента "Проверка URL" в Google Search Console — вкладка "Просмотренный HTML" покажет, что увидел Googlebot. Screaming Frog в режиме JavaScript Rendering эмулирует WRS и сравнивает initial HTML с rendered HTML. Ahrefs Site Audit с 2023 года тоже умеет JS-рендер. Для глубокой диагностики — Chrome DevTools, вкладка Performance, метрика LCP ≤ 2.5 с подтверждает, что отрисовка укладывается в Core Web Vitals.

§ 04Подводные камни

Главная ошибка — клоакинг по User-Agent: отдавать Googlebot отрендеренный HTML, а юзерам CSR. Google штрафует за расхождение, John Mueller подтверждал это в Office Hours 2023. Вторая ловушка — lazy-loading контента по событию scroll: бот не скроллит, контент остаётся невидимым. Третья — блокировка JS и CSS в robots.txt, после чего рендеринг ломается. С чего начать аудит: сравнить количество слов в view-source и в DevTools Elements — разрыв >30% сигнал о проблеме.

Частые ошибки
01
Подмена рендеринга обычной отдачей HTML. Команда считает, что Googlebot видит то же, что и пользователь в браузере. На деле бот сначала краулит, потом ставит JS в очередь рендера — контент уходит из индекса, трафик падает. Как правильно: Разделяйте этапы краулинга и рендеринга. Проверяйте итоговый DOM через URL Inspection в Search Console.
02
Загрузка ключевого контента только после действия пользователя. Тексты и ссылки подгружаются по клику или скроллу через JS. Web Rendering Service Google не кликает и не скроллит — критичные блоки не попадают в индекс, позиции по коммерческим запросам теряются. Как правильно: Отдавайте основной контент в первичном HTML или через SSR. Используйте Hybrid Rendering для интерактивных модулей.
03
Замер рендеринга только в Chrome DevTools. Локальный прогон показывает идеальную картинку, но Googlebot рендерит с задержкой до нескольких дней и режет ресурсы по таймауту 5 секунд. По данным Search Console Coverage половина страниц зависает в статусе Discovered — currently not indexed. Как правильно: Сравнивайте отрендеренный HTML через инструмент Mobile-Friendly Test и логи WRS. Внедрите SSR или prerender для шаблонных страниц.
Часто спрашивают

Рендеринг страниц: частые вопросы про отрисовку

Рендеринг простыми словами — что это и зачем нужен SEO?

+

Рендеринг — это превращение кода страницы (HTML, CSS, JS) в готовый визуальный вид и финальную DOM-модель, которую видит поисковик. Без этой обработки Googlebot может не увидеть контент, подгружаемый через JavaScript, и страница уйдёт в индекс пустой. Особенно критично для SPA на React, Vue, Angular.

SSR (Server-Side Rendering) формирует готовый HTML на сервере и отдаёт боту сразу — индексация проходит за 1 проход. CSR (Client-Side) перекладывает работу на браузер, и Google ставит страницу в очередь WRS, где задержка достигает 9 дней. Для SEO в 2026 году рекомендуют SSR или гибрид через Next.js 14, Nuxt 3.

Googlebot работает в две волны: сначала краулит сырой HTML, затем передаёт страницу в Web Rendering Service на базе свежей версии Chromium. WRS исполняет JS, строит DOM и только после этого индексирует контент. Задержка между волнами — от нескольких часов до недели, что замедляет попадание в выдачу.

Да, напрямую через Core Web Vitals и скорость индексации. SSR-страницы показывают LCP на 40–60% быстрее CSR-аналогов, что улучшает позиции в мобильной выдаче. Если бот не дождался отрисовки за лимит краулингового бюджета, страница вообще выпадает из индекса — частая проблема интернет-магазинов на чистом React.

Используй инструмент ‘Проверка URL’ в Google Search Console — он покажет отрендеренный HTML и скриншот глазами бота. Дополнительно подойдут Mobile-Friendly Test, расширение View Rendered Source и Screaming Frog в режиме JavaScript Rendering. Сравни DOM до и после исполнения скриптов: если ключевой контент появляется только после JS, нужен SSR или prerender.io.

Не нашли ответ?

Спросите Андрея Гусарова — отвечаю в течение 1-2 рабочих дней.

Нажимая, вы соглашаетесь с обработкой данных.