Для начала выясним, что же такое SPA.
SPA (Single Page Application), или одностраничные приложения, представляют собой веб-сайты, построенные на языке JavaScript. Их ключевое архитектурное отличие — полная загрузка кода при первом посещении ресурса. Вся статическая оболочка сайта сразу попадает в браузер пользователя, а при навигации сервер отправляет только необходимые динамические данные.
✅Преимущества SPA-сайтов
Главное преимущество SPA — скорость. Переходы между разделами, открытие карточек и работа с корзиной происходят без перезагрузки страницы. Всё работает плавно и быстро.
Пользователь может быстро фильтровать каталог, искать товары и оформлять заказ — заметно быстрее, чем на классическом многостраничном сайте.
Высокая скорость загрузки контента — лишь верхушка айсберга. Технология SPA предлагает еще три важных преимущества:
- Гибкий интерфейс. Управление состояниями, анимацией и данными сессии реализуется проще, так как приложение не привязано к множеству отдельных страниц. Можно создавать по-настоящему насыщенные пользовательские сценарии.
- Ускоренная разработка. Готовые фреймворки и возможность параллельной работы над клиентской и серверной частями ускоряют создание продукта. Полученный код легко адаптировать под мобильные платформы.
- Автономность. Благодаря кэшированию критических данных, пользователь может взаимодействовать с приложением при отсутствии интернета, а при появлении связи — синхронизировать изменения.
⛔Недостатки архитектуры одностраничных приложений
Несмотря на технологичность и скорость, у SPA есть ахиллесова пята — поисковая оптимизация. И здесь есть много серьезных ограничений.
Как видят SPA поисковые системы
Архитектура поисковых ботов исторически заточена под статичные HTML-страницы. Когда робот попадает на SPA, он видит лишь базовый каркас, а большая часть внутренних ссылок и контента генерируется динамически и не заложена в исходный код. Из-за этого бот получает доступ только к ограниченному числу URL, а глубокая индексация становится проблемой.
Эволюция индексации: Google vs Яндекс
Западные поисковые системы адаптировались быстрее: Google научился более-менее адекватно обрабатывать SPA-сайты еще в 2017 году. А вот у Яндекса ситуация сложнее: проблемы с индексацией динамических (AJAX) страниц сохраняются до сих пор. Для стабильной выдачи в Яндексе часто требуется создавать отдельные HTML-версии для каждой страницы.
Человеческий фактор
Ситуацию усугубляют и сами разработчики. Сложный, запутанный JavaScript-код, написанный без оглядки на поисковых роботов, может привести к тому, что бот просто прекратит обработку страницы, посчитав затраты ресурсов на ее парсинг неоправданно высокими.
Помимо проблем с поисковой оптимизацией, стоит учитывать и технологические недостатки одностраничных приложений:
- Высокая нагрузка на клиентское устройство
Современные JavaScript-фреймворки имеют немалый «вес». Поскольку вся обработка кода ложится на браузер пользователя, слабые или устаревшие устройства могут не справляться с такой нагрузкой. В итоге вместо ожидаемой скорости сайт начинает тормозить, долго загружаться и подвисать при навигации.
- Зависимость от поддержки JavaScript
Архитектура SPA полностью построена на работе скриптов. Если посетитель сознательно отключил JavaScript в настройках браузера (например, для ускорения загрузки или блокировки рекламы), приложение становится полностью неработоспособным. Пользователь видит пустую страницу вместо контента.
- Уязвимости в безопасности
JavaScript-приложения подвержены риску утечек памяти. Эта проблема не только приводит к постепенному замедлению работы сайта, но и создает потенциальные бреши в системе защиты, через которые злоумышленники могут получить доступ к данным пользователей.
Позиция поисковых систем по JS-сайтам: краткий обзор
Чтобы продвигать SPA, нужно учитывать, как поисковые системы обрабатывают JavaScript-контент. Разберём, как это устроено у основных игроков.
➡️ Яндекс: обещания vs реальность
Технически Яндекс заявляет о возможности самостоятельного рендеринга JavaScript. Но есть нюанс: функция работает в тестовом режиме, применяется выборочно и доступна далеко не для всех сайтов. Большинство проектов остаются за бортом — Яндекс попросту не умеет их корректно обрабатывать. Вывод: без настройки внутреннего рендеринга на стороне сервера рассчитывать на понимание со стороны Яндекса сложно.
➡️ Google: продвинутый подход
Google использует технологию WRS (Web Rendering Service) — специальный механизм рендеринга на базе браузера Google Chrome. Это позволяет достаточно качественно обрабатывать JavaScript-контент. Более того, через Google Webmaster Tools (Search Console) можно наглядно проверить, как именно Googlebot видит ваш сайт.
➡️ Исследование MOZ: кто еще в игре
Компания MOZ провела масштабное исследование возможностей поисковых систем по обработке JS-фреймворков. Результаты оказались показательными: полноценно работать с современным JavaScript умеют только Google и Ask (последний использует технологии Google). Остальные поисковики, увы, пока не справляются с этой задачей.
От теории к практике
Наш проект — интернет-магазин цифровой техники в Кемерово, преимущественно бренда Apple.
Первая задача по проекту — определить какие решения по загрузке контента используются на сайте. Изучаем HTTP-заголовки, которые отправляет сервер. Видим, что используется серверный рендеринг и кэширование страниц:
Далее проверяем доступность контента для индексации. Смотрим сохраненные копии, а также используем цитатный поиск.
Для всех основных типов страниц контент индексируется корректно. Переходим к базовым задачам:
- Диагностика на фильтры и проблемы безопасности
Тут нас ожидает первый звоночек: в вебмастере фиксируется критичная ошибка долгого ответа сервера:
Оперативно формируем ТЗ, запускаем доработку. Пока задачу реализуют, двигаемся дальше:
- Настраиваем региональную привязку сайта
- Ищем ошибки в текстовой релевантности на уровне шаблонов документа
- Ищем близких конкурентов и их трафиковые страницы, выгружаем семантическое ядро
- Настраиваем базовую оптимизацию шаблонов тегов и мета-тегов
Второй звоночек: самописная админка без возможности корректировки тегов. Оперативно формируем ТЗ, запускаем доработку, двигаемся дальше.
В первый месяц работ не проводим глобальный технический аудит — выявляем критичные ошибки, формируем ТЗ и сразу внедряем. Не ищем keywords или короткие description на внутренних страницах, берем в работу только те задачи, которые способны значимо повлиять на результат. В первый месяц работ было реализовано:
- настройка постраничных 301-редиректов;
- настройка 404 кода ответа несуществующих страниц;
- замена в коде ссылок с http на https (все ссылки вели на старые версии с http);
- добавление в хабовые разделы листинги товаров;
- добавление в листинги и страницы товаров тега h1;
- добавление тематических вхождений, таких как “Смартфон” и “Apple”, на карточки товаров в листингах.
После реализации базовых задач видимость и кол-во запросов в ТОП-10 начинают расти. SEO живо, вот доказательства:
Радостно говорим себе: “Поехали!” и на следующий съем видим динамику:
Нужно оперативно искать причину отрицательного роста.
Возвращаемся в самое начало: проверяем HTTP-заголовки, индексацию страниц, доступность контента для индексации. И видим это:
Листинги товаров не индексируются или индексируются частично: только меню, заголовок и информация в футере, товары отсутствуют. Ошибка возникла при решении проблемы долгого ответа сервера: страницы были ускорены, но индексация пострадала.
Обращаемся в техподдержку — на следующий день ошибка устранена.
Большой вклад в развитие проекта внесла техподдержка владельца бизнеса. Все наши ТЗ реализовывались за 1-2 дня! Это предел мечтаний любого SEO-специалиста и хорошая мотивация для работы.
После устранения ошибки видимость снова продолжила рост:
Заканчиваем базовые SEO-работы первого месяца:
- Проверка работоспособности конверсионного функционала
- Поиск проблем с выводом цен на страницах сайта
- Анализ наличия и корректности микроразметки schema.org для основных типов страниц
Выполняя пост-аналитику внесенных ранее корректировок выявляем новую проблему:
❗разным User-Agent отдаются разные варианты тегов. Пользователь видит один title, поисковый робот — другой.
Анализируем эту проблему в моменте и видим, что все листинги на сайте недоступны, отдают 404 код ответа сервера. Отправляем запрос в техподдержку. Ответ: проблема связана с обновлением сайта. При выпуске обновлений все страницы всегда отдают 404 код, обновление происходит регулярно…
Но! При переезде сайта на новый домен будет настроен балансировщик, чтобы избежать подобных проблем. Переезд будет выполнен в этом месяце.
Выдыхаем…и формируем ТЗ для корректного переезда на новый домен.
Итоги за первый месяц SEO-продвижения SPA сайта:
- 15 сформированных и реализованных ТЗ. Это идеальный пример продуктивной коллаборации подразделения SEO и бизнес-команды.
- Дополнительно подготовлено около 10 файлов рекомендаций, задачи по которым приоритизированы, добавлены в скоринг.
- Поисковый трафик вырос на 3000 визитов по сравнению с предыдущим периодом:
- На проекте запланирован большой пул задач, реализация которых позволит кратно увеличить результаты.
Общие выводы
SEO SPA сайтов требует особого внимания к техническим деталям. Необходима планомерная систематическая работа, формирование новых алгоритмов и чек-листов для работы, регулярный контроль индексации страниц и контента.Продвигая SPA, SEO и команда разработки должны быть в плотной синергии, превращая технические ограничения технологии в преимущества для ранжирования.
Старший менеджер по работе с клиентами
Лидер направления SEO
