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

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

• Для 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 и рассказали, почему один получился успешным, а второй — нет, и как избежать ошибок, которые лишили успеха второй проект.

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

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

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

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

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

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

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

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

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

Антикейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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