Почему исходный HTML до JS-рендеринга критичен для SEO

Роман Асеев

7 июля

Время чтения: 10 минут

Краулеры видят не то же, что и пользователи в браузере. Рассказываем, почему расхождение между исходным HTML и отрендеренной страницей мешает индексации, и даём конкретные шаги для диагностики. Для начала проверьте, что именно видит поисковый робот, — с помощью бесплатного инструмента «Получить HTML-код страницы» от oWeb Solutions вы можете загрузить исходный код любой страницы и сравнить его с тем, что отображается в браузере. Это поможет быстро выявить проблемы с редиректами, мета-тегами или динамическим контентом, которые мешают корректной индексации

Оглавление

Развернуть Свернуть

Как краулеры обрабатывают страницы
1. Типичный пример проблемы
Последствия расхождения исходного кода и браузерного вида
Как проверить, что видит краулер
Практическая инструкция: как исправить расхождение
Почему это критично для SEO
1. Частые ошибки, которые мы видим в Туле и не только
Заключение

Многие владельцы сайтов живут в иллюзии: если страница красиво отображается в браузере, значит поисковый робот увидит то же самое. Это одно из самых опасных заблуждений в техническом SEO. На самом деле краулеры (Googlebot, Яндекс.Бот) в первую очередь получают «сырой» HTML-код, который сервер отправляет до выполнения JavaScript. И если этот исходный код пуст, заминирован или содержит только скелет приложения — индексация страдает.

Как краулеры обрабатывают страницы

Современные поисковые системы умеют рендерить JavaScript, но делают это в две стадии. Сначала бот загружает исходный HTML и анализирует его на наличие контента. Если в коде нет значимого текста (например, только <div id="root"></div>), робот может принять страницу за пустую или некачественную. Только потом, в рамках второй волны, он запускает JS и ждёт появления контента. Однако этот процесс занимает ресурсы, и не все страницы дожидаются полного рендеринга. Особенно это касается глубоких уровней вложенности, страниц с низким приоритетом или сайтов с медленной загрузкой.

Типичный пример проблемы

Вы сделали одностраничное приложение на React или Vue. В браузере всё идеально: заголовки, текст, изображения. Но если открыть исходный код страницы (через «Просмотр кода страницы» или curl), вы увидите лишь пустой <body> и скрипты. Для краулера это сигнал: контента нет. Даже если Googlebot потом отрендерит страницу, он может не проиндексировать её так быстро, как хотелось бы, или вовсе исключить из поиска из-за подозрений в спаме.

Последствия расхождения исходного кода и браузерного вида

Расхождение между тем, что сервер отдаёт краулеру, и тем, что видит пользователь, приводит к нескольким проблемам:

Пропуск контента: робот не видит текст, заголовки H1-H6, alt-атрибуты изображений — страница считается пустой или низкокачественной.
Игнорирование ссылок: внутренние ссылки, сгенерированные JS, не передают вес (PageRank) другим страницам сайта.
Некорректные мета-теги: если title и description задаются через JS, краулер может прочитать пустой или дефолтный заголовок.
Проблемы с canonical и редиректами: meta-редиректы или rel="canonical", добавленные после рендеринга, не срабатывают для первой волны краулера.
Замедление индексации: страницы, требующие рендеринга, индексируются медленнее, так как попадают в очередь на обработку JS.

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

Самый простой способ — посмотреть исходный HTML, который сервер отдаёт без выполнения JavaScript. Откройте страницу в браузере, кликните правой кнопкой мыши и выберите «Просмотр кода страницы» (не «Инструменты разработчика»!). Если вы видите пустой <body> или только несколько строчек кода, а в браузере при этом — полноценный контент, значит у вас проблема с серверным рендерингом (SSR) или пререндерингом.

Для более точной диагностики используйте инструменты, которые показывают ответ сервера в чистом виде. Например, наш бесплатный инструмент «Получить HTML-код страницы» oWeb Solutions загружает исходный HTML напрямую с сервера, обходя любые JS-манипуляции. Это особенно полезно, если на странице используются meta-редиректы или контент подгружается динамически. Просто вставьте URL, и вы увидите реальный код, который получает краулер в первую очередь.

Интерфейс инструмента «Получить HTML-код страницы» oWeb Solutions

Практическая инструкция: как исправить расхождение

Если вы обнаружили, что исходный HTML отличается от того, что видите в браузере, действуйте по шагам.

Шаг 1. Определите источник проблемы

Проверьте, на каком этапе контент добавляется. Если он появляется только после выполнения JavaScript (например, через fetch-запросы), вам нужно внедрить серверный рендеринг (SSR) для вашего фреймворка (Next.js для React, Nuxt.js для Vue, Angular Universal для Angular). Если сайт статический, рассмотрите пререндеринг — генерацию статических HTML-файлов на этапе сборки.

Шаг 2. Внедрите SSR или пререндеринг

Для React-приложений: используйте Next.js или ReactDOMServer.hydrate().
Для Vue-приложений: переходите на Nuxt.js в режиме универсального приложения.
Для статических сайтов: настройте генерацию HTML на сервере через headless CMS или статический генератор (Gatsby, Eleventy).

Шаг 3. Проверьте мета-теги и заголовки

Убедитесь, что title, description, canonical и hreflang прописаны в исходном HTML, а не добавляются через JS. Используйте инструмент для проверки — если в полученном коде нет <title>Нужный заголовок</title>, а в браузере он есть, значит мета-теги динамические. Исправьте это, перенеся логику на сервер.

Шаг 4. Проверьте ссылки и структуру

Все внутренние ссылки должны присутствовать в исходном HTML. Если ссылки генерируются через JS (например, router.push()), краулер их не увидит. Замените их на реальные <a href="..."> или добавьте noscript-версию навигации.

Шаг 5. Настройте lazy-loading с умом

Изображения и видео, загружаемые через lazy-load, должны иметь атрибут src или srcset в исходном коде (или хотя бы placeholder с data-src). Для краулера лучше явно указывать src и использовать loading="lazy" — это безопасно.

Почему это критично для SEO

Поисковые системы оценивают качество страницы по её содержанию. Если краулер не видит контента, он не может понять, о чём страница, и не проиндексирует её по релевантным запросам. Более того, Google прямо рекомендует использовать серверный рендеринг или динамический рендеринг для JavaScript-приложений, чтобы обеспечить быструю и полную индексацию. В противном случае вы рискуете потерять до 80% потенциального трафика с поиска, особенно по низкочастотным запросам, где каждая страница важна.

Частые ошибки, которые мы видим в Туле и не только

Сайты на Angular без универсального рендеринга: исходный код — пустой <app-root>.
Интернет-магазины на React, где карточки товаров загружаются через API: краулер видит только «Загрузка...».
Сайты с meta-редиректом через JS (window.location): робот не переходит по редиректу.
Лендинги на конструкторах (Tilda, Readymag), где весь текст — в JS-сборке: иногда конструкторы уже генерируют HTML, но не все — проверяйте.

Заключение

Проверка исходного HTML до JS-рендеринга — это базовая гигиена SEO, которую нельзя игнорировать. Потратив 5 минут на диагностику, вы можете выявить серьёзную проблему, которая месяцами мешала индексации. Используйте простые методы (просмотр кода страницы, curl) или специализированные инструменты, чтобы убедиться, что краулер видит ваш контент. Только после этого можно говорить о полноценной индексации и росте позиций.

Поделиться статьей:

РА

Роман Асеев

Руководитель oWeb Solutions, SEO-специалист