⚙️
БЕСПЛАТНО
+55 XP
JavaScript SEO и рендеринг
⚛️
React-разработчик
«Наш сайт — современный SPA на React. Всё рендерится на клиенте. Быстро, красиво, современно!»
🤖
Googlebot
«Я зашёл. Получил пустой HTML с <div id="root"></div>. Контент загружается через JS. Я добавляю вашу страницу в очередь рендеринга и возвращаюсь через несколько дней...»
⚠️ Проблема JavaScript SEO: Googlebot умеет рендерить JavaScript, но делает это с задержкой — через очередь рендеринга (rendering queue). Контент, недоступный до выполнения JS, индексируется позже или неполностью.
Типы рендеринга страниц
| Тип | Как работает | SEO |
|---|---|---|
| SSR (Server-Side) | HTML готов на сервере | ✅ Лучший вариант |
| SSG (Static Gen) | HTML генерируется при сборке | ✅ Отлично |
| CSR (Client-Side) | HTML строится в браузере | ⚠️ Риски задержки |
| ISR (Incremental) | SSG + обновление по запросу | ✅ Хороший компромисс |
Что проверить на JS-сайте
Диагностика JavaScript SEO:
☐ URL Inspection в GSC → посмотри рендеренный HTML
☐ Все ссылки меню в <a href>, не в JS-обработчиках
☐ Контент виден в "View Source" (не только в DevTools)
☐ Нет бесконечной пагинации без URL-состояния
☐ Мета-теги присутствуют в SSR-ответе
☐ Использование Next.js/Nuxt/Gatsby вместо чистого SPA
☐ URL Inspection в GSC → посмотри рендеренный HTML
☐ Все ссылки меню в <a href>, не в JS-обработчиках
☐ Контент виден в "View Source" (не только в DevTools)
☐ Нет бесконечной пагинации без URL-состояния
☐ Мета-теги присутствуют в SSR-ответе
☐ Использование Next.js/Nuxt/Gatsby вместо чистого SPA
🧑💻
Алекс диагностирует SPA
«Открыли URL Inspection в GSC. Рендеренный HTML пустой — контент не проиндексирован. Мигрировали с CSR на SSR через Next.js. За месяц 800 страниц появились в индексе.»
🎯 Рекомендация: для новых проектов выбирай SSR или SSG (Next.js, Nuxt, Gatsby, Astro). Для существующих SPA — добавь pre-rendering или гибридный режим рендеринга.
🎮 Проверь себя: почему JavaScript-сайты могут создавать проблемы для SEO?
Задание к уроку
Проверьте понимание и получите +20 XP