Сайты, построенные по принципу одностраничного приложения (SРA), работают быстрее и удобнее для пользователя. Поэтому их начинают использовать в разные нишах, в том числе для интернет-магазинов.Рассказали о методах работы с SPA-сайтами и показали пример успешного кейса и антикейса Mybook.
Тэги: Optimization, интернет-магазины, SEO
О чем статья?
Для кого эта статья?
SPA-сайты (Single Page Application) — это одностраничные сайты, созданные на языке JavaScript, которые загружают весь код вместе с загрузкой самой страницы. Навигация и переход между страницами на таких сайтах осуществляется быстрее: когда пользователь открывает страницу, вся статическая часть сайта отображается в его браузере, с сервера подгружается только динамический контент. Покупатель может оплачивать покупку, добавлять товар в корзину, возвращаться в каталог, просматривать и искать товары намного быстрее, чем на классическом многостраничном сайте. Поэтому SPA-сайты могут стать одним из самых конверсионных решений для интернет-магазинов. Однако существуют некоторые особенности в SEO-продвижении SPA-сайтов.
На конференции Optimization-2021 Алексей Шашко (руководитель SEO в ГК «ЛитРес») и Владимир Короленко (управляющий партнер, Head of SEO в «Kite. Digital Agency») рассказали, в чем сложность работы с SPA-сайтами и поделились опытом работы над проектом электронной библиотеки MyBook.
Видеозапись выступления спикеров можно купить по ссылке, скачать презентацию доклада — здесь.
Сложность работы с SPA-сайтами в том, что они нарушают принципы индексации, что критично для SEO. А именно:
Спикеры поделились опытом работы с SPA-сайтами в виде двух кейсов для Mybook и рассказали, почему один получился успешным, а второй — нет, и как избежать ошибок, которые лишили успеха второй проект.
С чем работали? Присутствовал устаревший дизайн в мобильной и десктопной версии, а также в приложениях. К этому прибавлялись устаревшая верстка и проблемы с синхронизацией версий. Делать новый дизайн на старую верстку дорого, оставлять в существующем виде тоже нельзя.
Какую стратегию выбрали? Изменить верстку и дизайн, но не потерять при этом пользователей из органического трафика. Для разработки нового сайта решили использовать инструмент для разработки приложений Redux и JavaScript-библиотеку React.
На первом этапе проекта были подготовлены требования к критичным для SEO элементам:
Новую мобильную версию тестировали на «живых» пользователях в условиях, близких к реальным. Технический поддомен открыли для индексации в Google и закрыли от индексации в Яндексе. Тестовый домен позволил проанализировать продуктовые метрики, SEO-метрики, отработку скриптов и исправить ошибки перед запуском.
С чем работали? Текущий фреймворк имел ограничения, была необходима локализация для выхода на зарубежный рынок — не только перевод интерфейса, но и новый ассортимент и условия работы с сервисом.
Какую стратегию выбрали? Было решено использовать новый фреймворк NextJS.
Асинхрон в работе продуктовой команды и команды разработки нарушил методологию правильного этапа тестирования. Из-за спешки появились технические ошибки: потеря счетчика, микроразметки, мета-тегов, изменение алгоритма отработки 404 страниц.
Важные моменты, которые необходимо учесть:
Перед запуском сайта обязательно нужно проверить корректность работы шаблонов мета-тегов и рендеринга на всех разделах и блоках, убедиться в отсутствии скриптов и ресурсов, заблокированных в robots.txt. Также количество страниц в индексе должно совпадать с необходимым.
После запуска сайта нужно помнить, что сломаться может что угодно и когда угодно, поэтому необходимо постоянно мониторить доступность страниц и контент на странице. Видимость сайтов в тематике e-commerce можно наблюдать при помощи динамического рейтинга.
Вам будет интересно
Доставляем экспертный контент
Мы делимся с подписчиками экспертным контентом: отправляем полезные статьи, советы от специалистов, приглашаем на вебинары. Подпишитесь, чтобы узнать больше о продвижении бизнеса в Интернете, наших мероприятиях и репортажах с крупных отраслевых событий. Выберите наиболее удобную платформу для вас и наслаждайтесь контентом!
Нажимая на кнопку «Подписаться», я даю согласие на обработку персональных данных и соглашаюсь c политикой конфиденциальности
Мы отправили вам проверочое письмо — пожалуйста, подтвердите адрес электронной почты, перейдя по ссылке внутри письма.
Пожалуйста, попробуйте еще раз