SPA

Также: одностраничное приложение, single page application

Сайт, который загружается один раз, а дальше перерисовывает содержимое скриптами без перезагрузки страницы. Работает быстро для человека, но требует внимания к тому, что видят поисковые роботы.

В чём подвох для поиска

Пока скрипты не выполнились, страница пустая. Поисковые роботы такие страницы обрабатывают медленнее, а часть краулеров — например, у ИИ-сервисов — не выполняет скрипты вовсе и получает пустоту.

Проверить это просто: `curl -s https://example.ru/stranica | wc -c`. Несколько килобайт означают пустую оболочку, десятки килобайт — что содержимое отдаётся сразу. Проверять надо вложенную страницу, а не только главную.

Кто выполняет скрипты
Кто заходитВыполняет JavaScript
Обычный посетительда
Поисковый робот Яндекса и Googleда, но медленнее и не всегда
Краулеры ИИ-сервисов (GPTBot и подобные)нет
Превью ссылки в мессенджеренет

Почему так вообще делают

У подхода есть настоящие достоинства, ради которых его и выбирают. Переходы между разделами происходят мгновенно: браузер не запрашивает страницу заново, а перерисовывает нужную часть. Сложные интерфейсы — личный кабинет, конструктор, панель управления — так работают гораздо отзывчивее. Поэтому все веб-приложения устроены именно так, и это оправданно.

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

Что ещё ломается в одностраничных приложениях

  • Несуществующий адрес отдаёт главную с кодом 200 вместо 404 — поисковик видит бесконечные дубли.
  • Заголовок и описание одинаковые на всех страницах, если их не подменять при переходе.
  • Кнопка «назад» в браузере работает не так, как ожидает человек.
  • Превью ссылки в мессенджере пустое: сервис не выполняет скрипты.
Лечится пререндером: страницы заранее отрисовываются в готовый HTML, и робот получает текст сразу.

Частые вопросы

SPA хуже для поиска?

Сам по себе — нет, если содержимое отдаётся готовым HTML. Плохо, когда страница до выполнения скриптов пустая: тогда часть роботов видит вместо текста пустой контейнер, а поисковые системы индексируют такие страницы медленнее.

Как понять, что у меня SPA?

Посмотрите исходный код страницы через «просмотр кода» в браузере, а не через инструменты разработчика: первый показывает то, что пришло с сервера, второй — уже собранную страницу. Если в исходном коде почти нет текста, значит содержимое рисуется скриптами.

Нужно ли переделывать сайт, если он SPA?

Обычно нет: достаточно включить пререндер. Переделка оправдана, только если проблем много и они системные — например, каждый раздел приходится чинить отдельно.

Влияет ли SPA на скорость?

Двояко: первая загрузка тяжелее, потому что браузер скачивает весь код приложения, зато последующие переходы быстрее. Для сайта, куда приходят из поиска на одну страницу, важнее именно первая загрузка.

14 дней бесплатно

Проще один раз собрать,
чем разбираться в теории

Домен, HTTPS, формы и аналитика подключаются в одном кабинете — без сервера и кода.

Создать сайт