JavaScript SEO: CSR и SSR

Сайт на React выглядит в браузере отлично, но если открыть исходный код страницы, там почти пусто: один div и ссылки на скрипты. Всё содержимое достраивает JavaScript уже у пользователя. Человек этого не замечает, а поисковый робот может увидеть пустую страницу.

CSR и SSR

Есть и промежуточные варианты: статическая генерация страниц заранее (SSG) и гидратация, когда сервер отдаёт готовый HTML, а браузер оживляет его скриптами.

Как поисковики обрабатывают JavaScript

Google рендерит JavaScript, но в две волны: сначала индексирует исходный HTML, а рендер ставит в очередь. Яндекс тоже умеет выполнять JS, но надёжнее, когда основной контент есть в HTML сразу. Для важных коммерческих страниц мы не рекомендуем полагаться на рендеринг поисковика.

Чек-лист для JS-сайта

• Текст, заголовки, title и description есть в исходном HTML или отдаются сервером.
• Все ссылки: обычные теги a с атрибутом href.
• У каждой страницы свой адрес без решётки # в пути.
• Несуществующие адреса отдают 404, а не 200 с пустым шаблоном.
• Проверка URL в Search Console показывает на скриншоте весь контент.

Частые ошибки JS-сайтов

• Title и description одинаковые на всех страницах, потому что меняются только скриптом.
• Бесконечная прокрутка без адресов страниц: робот видит только первые товары.
• Контент в табах подгружается по клику и отсутствует в HTML.
• Файлы JS закрыты в robots.txt, и поисковик не может отрисовать страницу.

Пререндер как компромисс

Если переписать SPA на SSR дорого, есть промежуточное решение, пререндер. Специальный сервис заранее рендерит страницы в готовый HTML и отдаёт его поисковым роботам, а люди получают обычное приложение. Google называет этот подход динамическим рендерингом и считает его временным обходным путём, а не рекомендацией. Для долгосрочного проекта лучше закладывать SSR или статическую генерацию страниц ещё на этапе выбора технологии.

Как проверить сайт за 5 минут

1. Откройте любую важную страницу, нажмите Ctrl+U и найдите в исходном коде кусок основного текста. Нет, значит, контент рендерится скриптом.
2. Проверьте, что в исходном коде есть title и description, уникальные для этой страницы.
3. Найдите ссылки на другие разделы: это должны быть теги a с атрибутом href.
4. Введите несуществующий адрес и посмотрите код ответа: должен быть 404.
5. Прогоните страницу через проверку URL в Search Console и посмотрите скриншот, который видит Google.

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

Что спросить у разработчиков

• Где рендерится страница: на сервере или в браузере?
• Как формируются title, description и canonical для каждой страницы?
• Что отдаёт сервер на несуществующий адрес?
• Как будет формироваться sitemap.xml?

Вопросы про JavaScript SEO

Разработку сайтов с учётом SEO делаем в услуге разработки сайтов, а проверку индексации JS-сайтов, в техническом аудите.

Источники

• Google Search Central: «Основы JavaScript SEO»
• Google Search Central: «Рендеринг в интернете» (обзор CSR, SSR, SSG)
• Яндекс Справка для вебмастера: «Сайты на JavaScript»

См. также: Индексация сайта, Скорость сайта, Коды ответов сервера.