Техническое SEO · Продвинутая
Как проверить JavaScript-рендеринг
Убедиться, что поисковик видит основной контент и ссылки.
Кратко: за 2 минуты
Убедиться, что поисковик видит основной контент и ссылки. На выходе: основной контент и внутренние ссылки доступны в отрендеренной версии.
Когда применять
Пункт относится к этапу «Техническое SEO». Его задача — найти технические ограничения, способные обесценить дальнейшую работу. Он нужен до передачи результата маркетингу, редакции и разработке: иначе команда рискует считать, что Google всегда идеально выполнит любой JS.
Что это дает
На SPA и сайтах с тяжелым JS контент может появляться только после выполнения скриптов. Это помогает связать работу с общей целью: рост органического трафика и его вклад в бизнес. Практический эффект виден, когда основной контент и внутренние ссылки доступны в отрендеренной версии.
Пошагово: как выполнить
- Сравните исходный HTML, rendered HTML и DOM в браузере.
- Проверьте, есть ли в HTML title, meta description, H1, основной текст, товары и ссылки.
- Используйте URL Inspection и crawler с рендерингом.
- Для критичных страниц рассмотрите SSR, SSG, prerendering или server components.
Критерии приемки
- Основной контент и внутренние ссылки доступны в отрендеренной версии.
- Критичные SEO-теги формируются до индексации и уникальны для URL.
- Нет блокировки API, JS и CSS для роботов.
Типичные ошибки
- Считать, что Google всегда идеально выполнит любой JS.
- Использовать div onclick вместо ссылок href.
- Генерировать одинаковые title на клиенте после загрузки.
Инструменты
Пример
Плохой пример
Считать, что Google всегда идеально выполнит любой JS.
Хороший пример
Учебный пример. Без выполнения JavaScript в ответе видны заголовок, описание товара, цена и ссылки на разделы. Если текст присутствует только в данных скрипта, задача считается незавершенной до проверки фактически отрисованного HTML.
Шаблон
Протокол проверки HTML
Скачать рабочий лист этого урока
Выбрать рабочий шаблонРабочий артефакт
Технический аудит
Протокол проверки HTML
Учебный пример. Без выполнения JavaScript в ответе видны заголовок, описание товара, цена и ссылки на разделы. Если текст присутствует только в данных скрипта, задача считается незавершенной до проверки фактически отрисованного HTML.
- 200/3xx/4xx/5xx
- Индексируемые и закрытые URL
- Canonical/noindex/robots
- LCP, INP, CLS
Контроль качества
Панель технического здоровья
Основной контент и внутренние ссылки доступны в отрендеренной версии.
После релизов, изменений SERP, обновления целей проекта и заметных изменений спроса.
Проблему, доказательство, владельца, срок и критерий приемки.
Перед отметкой выполнено: Основной контент и внутренние ссылки доступны в отрендеренной версии.
Как применять
Начинайте с влияния на пользователя и бизнес. Затем проверьте техническую реализуемость и только после этого формулируйте задачу оптимизации. Хороший пункт чеклиста отвечает на три вопроса: какую проблему устраняем, как поймем, что стало лучше, и где команда увидит подтверждение результата.
Короткие ответы
Частые вопросы
Зачем выполнять пункт «Как проверить JavaScript-рендеринг»?
На SPA и сайтах с тяжелым JS контент может появляться только после выполнения скриптов. Это помогает связать работу с общей целью: рост органического трафика и его вклад в бизнес. Практический эффект виден, когда основной контент и внутренние ссылки доступны в отрендеренной версии.
С чего начать выполнение?
Сравните исходный HTML, rendered HTML и DOM в браузере.
Как понять, что пункт выполнен?
Основной контент и внутренние ссылки доступны в отрендеренной версии.
Какая ошибка чаще всего мешает результату?
Считать, что Google всегда идеально выполнит любой JS.
Режим обучения
Тест по теме
Проверка понимания
Ответьте на вопросы по материалу и получите итоговый отчет: что понято хорошо, а что стоит перечитать.
Для углубленного изучения
Редакция Ariol · Версия 2 · Обновлено
Независимая экспертная проверка не заявлена.
Что обновлено
- — Обновлено: Название, Шаблон результата, Пример, Плохой пример, Заголовок поиска, Описание поиска, Поисковые фразы.
Материал предназначен для обучения. Адаптируйте рекомендации к внутренним регламентам компании и условиям проекта.
Предложить исправление через контакты Ariol