Single Page Applications (SPA), созданные на базе современных фреймворков вроде React, Vue или Angular, обеспечивают пользователям невероятно плавный и быстрый опыт взаимодействия. Страница не перезагружается полностью, а данные подтягиваются динамически. Однако то, что идеально для пользователя, часто становится кошмаром для SEO-специалиста.
Проблема заключается в Client-Side Rendering (CSR) — клиентском рендеринге. По умолчанию сервер отдает поисковому роботу пустой HTML-документ с одним тегом (например, <div id=»root»></div>) и ссылкой на увесистый JavaScript-файл. Если поисковик не сможет правильно или вовремя выполнить этот JS-код, страница просто не попадет в индекс.
При анализе того, как машины и скрипты воспринимают сложный контент, важно учитывать множество технических нюансов. Любопытные примеры анализа данных и работы с информацией можно найти, изучив данный источник, но в рамках веб-разработки наша главная задача — убедиться, что поисковый бот получает готовую HTML-разметку.
Для решения проблем с индексацией SPA обычно используют Server-Side Rendering (SSR), Static Site Generation (SSG) или динамический рендеринг (Dynamic Rendering). Но как проверить, что внедренное решение работает корректно? Вот 5 надежных способов проверки.
1. Просмотр исходного кода (Ctrl+U) vs Инспектор кода (F12)
Это базовый, но самый важный шаг для понимания того, что именно ваш сервер отдает в сеть.
- Исходный код страницы (Ctrl + U или Command + Option + U на Mac): Это тот сырой HTML, который сервер прислал в ответ на первый запрос. Именно его видят поисковые роботы в первую очередь. Если здесь вы не видите контента статьи, заголовков (H1, H2) и метатегов, а только пути к .js скриптам — у вас проблемы с SEO.
- Инспектор кода (F12 -> вкладка Elements): Это DOM-дерево, которое браузер построил после выполнения JavaScript. Если контент есть здесь, но его нет по нажатию Ctrl+U, значит, сайт рендерится исключительно на клиенте.
2. Отключение JavaScript в браузере
Простой способ поставить себя на место «слабого» или устаревшего поискового бота, не умеющего выполнять сложные скрипты.
- Откройте Google Chrome.
- Нажмите F12, чтобы открыть DevTools.
- Нажмите Ctrl + Shift + P (или Cmd + Shift + P), введите Disable JavaScript и нажмите Enter.
- Обновите страницу (F5).
Если страница стала абсолютно белой или пропал весь текстовый контент, навигация и ссылки, значит, поисковики «увидят» ваш сайт точно так же, если их механизм рендеринга JS не сработает или закончится краулинговый бюджет.
3. Эмуляция User-Agent поисковых роботов
Если ваш проект использует динамический рендеринг (например, через Prerender.io), сервер отдает обычным пользователям JS-код, а поисковым ботам — заранее сгенерированный HTML. Чтобы это проверить, нужно притвориться ботом.
Через Chrome DevTools:
- Откройте DevTools (F12).
- Нажмите на три точки в правом верхнем углу панели -> More tools -> Network conditions.
- В нижнем блоке снимите галочку с Use browser default в строке User-Agent.
- В выпадающем списке выберите или впишите вручную User-Agent Googlebot (Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)) или YandexBot.
- Обновите страницу и нажмите Ctrl+U. Теперь вы должны увидеть полный HTML-код с контентом.
Через консоль (cURL):
Откройте терминал и выполните команду:
curl -A «Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)» https://ваш-сайт.com
В ответе терминала должен быть полноценный HTML-код с текстом и ссылками, а не пустой каркас.
4. Инструменты поисковиков (GSC и Яндекс.Вебмастер)
Нет ничего надежнее, чем спросить у самих поисковых систем, как они видят ваш SPA.
- Google Search Console: Перейдите в раздел «Проверка URL», вставьте адрес страницы SPA. Нажмите «Проверить страницу на сайте» (Test Live URL). Когда тест завершится, нажмите на «Посмотреть проверенную страницу». На вкладке HTML вы увидите код, который Googlebot смог собрать. Проверьте валидность Title, Description и наличие основного текста.
- Яндекс.Вебмастер: Используйте инструмент «Проверка ответа сервера». Введите URL, выберите робота (Основной робот Яндекса) и нажмите «Проверить». В поле «Исходный код» вы увидите то, что получил Яндекс.
Примечание: Яндекс исторически хуже справляется с клиентским рендерингом, чем Google, поэтому для рунета внедрение SSR (через Next.js/Nuxt.js) является почти обязательным требованиям для SPA.
5. Использование SEO-краулеров (Screaming Frog SEO Spider)
Если вам нужно проверить не одну страницу, а весь сайт, на помощь приходят парсеры.
- Запустите Screaming Frog.
- Перейдите в Configuration -> Spider -> Rendering.
- Выберите Text Only и запустите сканирование.
- Если программа не найдет ничего, кроме главной страницы, или не увидит контента (пустые Title, H1) — сайт не готов для SEO.
- Переключите режим на JavaScript, настройте таймауты и повторите скан. Зачастую краулер найдет контент, но это лишь подтвердит, что для индексации поисковику придется тратить ресурсы на выполнение JS. Если на сайте настроен SSR/динамический рендеринг, режим «Text Only» тоже должен успешно спарсить все данные.
Заключение
SPA и SEO созданы для разных целей, но их можно и нужно «подружить». Регулярно проверяйте, как ваш сайт отдается поисковикам: просматривайте исходный код, подменяйте User-Agent и используйте консоли вебмастеров. Убедившись, что роботы получают полноценный HTML, вы защитите свой бизнес от потери органического трафика.