Продвигаем бизнес в Интернете с 2001 года

Роль SEO в разработке SPA-сайтов

Сайты, построенные по принципу одностраничного приложения (SРA), работают быстрее и удобнее для пользователя. Поэтому их начинают использовать в разные нишах, в том числе для интернет-магазинов. Рассказали о методах работы с SPA-сайтами и показали пример успешного кейса и антикейса Mybook.

Последнее обновление: 21 июля 2024 года
10505
Время прочтения: 7 минут

Тэги: Optimizationинтернет-магазиныSEO


О чем статья?

  • Как работать с SPA-сайтами?
  • Опыт проекта Mybook: успешный кейс и антикейс.
  • Как не допустить ошибок из антикейса?

Для кого эта статья?

  • Для SEO-специалистов.
  • Для разработчиков.
  • Для менеджеров продукта.

SPA-сайты (Single Page Application) — это одностраничные сайты, созданные на языке JavaScript, которые загружают весь код вместе с загрузкой самой страницы. Навигация и переход между страницами на таких сайтах осуществляется быстрее: когда пользователь открывает страницу, вся статическая часть сайта отображается в его браузере, с сервера подгружается только динамический контент. Покупатель может оплачивать покупку, добавлять товар в корзину, возвращаться в каталог, просматривать и искать товары намного быстрее, чем на классическом многостраничном сайте. Поэтому SPA-сайты могут стать одним из самых конверсионных решений для интернет-магазинов. Однако существуют некоторые особенности в SEO-продвижении SPA-сайтов.

На конференции Optimization-2021 Алексей Шашко (руководитель SEO в ГК «ЛитРес») и Владимир Короленко (управляющий партнер, Head of SEO в «Kite. Digital Agency») рассказали, в чем сложность работы с SPA-сайтами и поделились опытом работы над проектом электронной библиотеки MyBook. Ознакомиться с программой и купить видеозапись докладов можно на сайте конференции.

В чем особенности SEO для SPA-сайтов?

Сложность работы с SPA-сайтами в том, что они нарушают принципы индексации, что критично для SEO. А именно:

  • на SPA-сайтах только один URL — нет перезагрузки страниц;
  • одностраничные приложения не содержат контента в пригодном для сканирования виде;
  • поисковые системы, кроме Google, не способны обрабатывать JavaScript, на котором написан сайт;
  • SEO-рекомендации от Яндекс и Google по работе с SPA-сайтами противоречат друг другу.

Мнение эксперта

Владимир Короленко, управляющий партнер, Head of SEO в «Kite. Digital Agency»:

Владимир Короленко
«Если говорить о том, с какими сайтами проще работать — классическими или SPA, то это зависит от опыта. При работе с SPA-сайтами нужно учитывать множество дополнительных процессов и следить, чтобы контент правильно индексировался поисковыми системами».


Варианты SEO-оптимизации SPA-проектов:

  1. Для зарубежного проекта — если из поисковых систем требуется только Google, можно не вносить никаких изменений. У Google есть своя технология WRS для обработки файлов JavaScript и их перевода в HTML (рендеринга).
  2. Для небольшого международного проекта — для небольшого проекта, требующего присутствия и в Google, и в Яндексе, можно использовать сторонние сервисы, которые возьмут на себя обработку JavaScript и отдадут поисковым системам нужную страницу в HTML, например prerender.io.
  3. Для большого международного проекта — для продвижения крупного сайта в Google и Яндекс используйте SSR (Server Side Rendering) или серверный рендеринг. Обработка скриптов происходит на стороне клиентского сервера с помощью специальных библиотек.

Опыт проекта Mybook

Спикеры поделились опытом работы с SPA-сайтами в виде двух кейсов для Mybook и рассказали, почему один получился успешным, а второй — нет, и как избежать ошибок, которые лишили успеха второй проект.

spa_2.jpg

Успешный кейс


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

Какую стратегию выбрали? Изменить верстку и дизайн, но не потерять при этом пользователей из органического трафика. Для разработки нового сайта решили использовать инструмент для разработки приложений Redux и JavaScript-библиотеку React.

На первом этапе проекта были подготовлены требования к критичным для SEO элементам:

  1. Разложить проект на составляющие и создать чек-листы из блоков, по которым могли бы ориентироваться и SEO-специалисты, и тестировщики. Например, разделить разные типы страниц, важные текстовые блоки, подзаголовки, мета-теги, выделить микроразметку.
  2. Заранее выбрать метод рендеринга и объяснить команде его плюсы и минусы.
  3. Согласовать нужную SEO-структуру и список дополнительных элементов дизайна (например, новые блоки, экраны или дополнительный функционал).

Мнение эксперта

Владимир Короленко, управляющий партнер, Head of SEO в «Kite. Digital Agency»:

Владимир Короленко
«Еще на этапе выбора инструментов для разработки мы подготовили рекомендации по выбору фреймворка, пообщались с разработчиками и пришли к выводу, что будет работать с технологическим стеком React+Redux. Первые этапы прошли гладко, так как у нас было достаточно времени на планирование и хорошая коммуникация с разработчиками. На месяц-полтора мы стагнировали, но потом начали активный рост: трафик из Яндекса начал активно расти, в мобильной версии рост тоже был существенный».

Новую мобильную версию тестировали на «живых» пользователях в условиях, близких к реальным. Технический поддомен открыли для индексации в Google и закрыли от индексации в Яндексе. Тестовый домен позволил проанализировать продуктовые метрики, SEO-метрики, отработку скриптов и исправить ошибки перед запуском.

spa_3.jpg

Антикейс


С чем работали? Текущий фреймворк имел ограничения, была необходима локализация для выхода на зарубежный рынок — не только перевод интерфейса, но и новый ассортимент и условия работы с сервисом.

Какую стратегию выбрали? Было решено использовать новый фреймворк NextJS.

Мнение эксперта

Алексей Шашко, руководитель SEO в ГК «ЛитРес»:

Алексей Шашко
«Команда разработчиков уже было готова приступить к выполнению плана, но мы получили новые рекомендации, требования и замечания к сайту от продакт-менеджеров, поэтому план пришлось изменить. Разработка проекта заняла два года, сроки затянулись и нам пришлось запускать сайт без тестирования. Без предварительного тестирования и исправления ошибок на тестовом домене трафик упал, искать и чинить ошибки пришлось «наживую», кроме того, в какой-то момент мы остались без аналитики — счетчик случайно выпал из рендера страниц. Мы не видели динамики и фиксировали проблемы, когда они уже доходили до индексации».

Асинхрон в работе продуктовой команды и команды разработки нарушил методологию правильного этапа тестирования. Из-за спешки появились технические ошибки: потеря счетчика, микроразметки, мета-тегов, изменение алгоритма отработки 404 страниц.

spa_4.jpg

Когда и где:
10 октября – онлайн-день
17-18 октября – офлайн-дни в Сколково

Optimization-2024 – крупнейшее практическое мероприятие, которое целиком и полностью посвящено продвижению бизнеса в интернете.

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

На конференции вас ждёт 20 секций и более 70 докладов от ведущих экспертов отрасли!

Как не допустить ошибок из антикейса?

Важные моменты, которые необходимо учесть:

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

Мнение эксперта

Алексей Шашко, руководитель SEO в ГК «ЛитРес»:

Алексей Шашко

«SEO-требования к переезду сайта должны исходить от бизнеса, а не разработки. В нашем успешном кейсе SEO-специалисты давали рекомендации на каждом этапе — это помогло избежать просадок трафика, в отличие от антикейса, где мы исправляли все технические ошибки на готовом запущенном сайте».

Перед запуском сайта обязательно нужно проверить корректность работы шаблонов мета-тегов и рендеринга на всех разделах и блоках, убедиться в отсутствии скриптов и ресурсов, заблокированных в robots.txt. Также количество страниц в индексе должно совпадать с необходимым.

После запуска сайта нужно помнить, что сломаться может что угодно и когда угодно, поэтому необходимо постоянно мониторить доступность страниц и контент на странице. Видимость сайтов в тематике e-commerce можно наблюдать при помощи динамического рейтинга.

Выводы

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

Ольга Бучнева
Лого АиП
Ольга Бучнева
Редактор блога
Закончила факультет журналистики, работала младшим редактором журнала, копирайтером в отделе online-продвижения, участвовала в запуске и развитии проектов в сфере digital-маркетинга.

Вам будет интересно

Хотите обсудить ваш проект?
Напишите нам о своих бизнес-задачах, и мы предложим проверенные решения.

Доставляем экспертный контент

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

Нажимая на кнопку «Подписаться», я даю согласие на обработку персональных данных и соглашаюсь c политикой конфиденциальности

Спасибо за подписку!

Мы отправили вам проверочое письмо — пожалуйста, подтвердите адрес электронной почты, перейдя по ссылке внутри письма.

Произошла ошибка

Пожалуйста, попробуйте еще раз