Hola, Amigos!
Меня зовут Дмитрий Тарасов, я генеральный директор компании Amiga. В этой статье я расскажу об особенностях настройки SEO в SPA, и почему привычный подход не работает.
Статья написана на основе моего выступления на конференции по интернет-маркетингу Optimization 2021.
Кажется, что с включением SEO-специалиста в разработку все понятно: после создания дизайн-макетов он приходит, составляет требования по SEO-оптимизации, контролит итоговый результат на сайте и уходит. И так правда работает для классической разработки сайтов. Но что делать с SPA?
Если вы SEO-специалист, вы в курсе, почему важна ваша работа. Но не все владельцы бизнеса это осознают. Поэтому хочу акцентировать внимание, что грамотная SEO-настройка может принести от 30 до 50 процентов всей конверсии на сайте.
Что такое SPA и почему с ним сложно?
SPA (single page application) – одностраничное приложение или сайт, которые завязаны на одном HTML-документе. Если открыть исходный код классического SPA, вы не увидите там ничего кроме подключения JavaScript и иногда CSS-файлов. Весь HTML, который понадобится пользователю, уже лежит внутри JS-файлов.
Самая главная проблема SPA, из-за которой при неправильной реализации можно потерять большую долю органического трафика на сайт, состоит в том, что одностраничные JS-приложения не индексируются большинством поисковых систем. Роботы Яндекса работают на основе устаревшего движка Chromium 41, который не поддерживает технологию CSR (Client-Side Rendering, рендеринг на клиенте). Именно эта технология обеспечивает «сбор» страницы в браузере пользователя. Заходя на сайт, робот поисковой системы видит лишь белый экран.
Выход в том, чтобы проводить рендеринг заранее, до обращения браузера к серверу, напрямую на сервере. Для этого используется технология SSR: Server-Side Rendering, (серверный рендеринг). На сервере эмулируется браузер, поддерживающий CSR, в нём рендерится HTML-страница и отдается в браузер пользователю, а также индексирующему роботу.
К примеру, на gosuslugi.ru SSR нет. На их сайте, как и на любом SPA, при первом посещении пользователь не получает никакой HTML-разметки. Вместо этого он получает один или несколько JavaScript-файлов, которые уже содержат в себе весь необходимый HTML и иногда CSS-код. Параллельно с этим делается запрос к серверу, чтобы получить динамические данные. А вот OZON работают на SSR. Это позволяет им отдавать множество страниц в поисковую выдачу и накапливать ссылочную массу. Пользователи получают сразу готовую разметку и не ждут пока страница “нарисуется” через JS.
SPA выбирают за скорость работы сайта для пользователя и быструю разработку. Разница в загрузке страниц между обычным сайтом и SPA может достигать 6-7 секунд. Особенно это касается огромных e-com. К тому же, для разработки SPA уже готовы библиотеки и фреймворки, а работа над frontend и backend может вестись параллельно. На основе готового кода в дальнейшем можно построить мобильное приложение, и это тоже ускоряет разработку. Только быстро не равно просто. У SPA есть свои тонкости. Если не знать, как правильно, можно совершить архитектурные ошибки, которые в будущем могут стоить миллионы рублей.
Но в чем же сложность для SEO в работе с SPA? Для оптимизации важны уникальные URL. В SPA URL-страницы практически не меняются, а данные подгружаются динамически. Поисковым ботам сложно просканировать SPA. Запомним эту особенность.
Как настроить SEO в SPA?
В идеальной картине мира в SPA рендеринг – генерация статичных страниц, которые содержат DOM (дерево тегов HTML) – происходит на сервере. Там страницы сформированы заранее в HTML-копии и отдаются роботам поисковых систем максимально быстро. При обращении робота к серверу URL готов заранее. Это позволит ускорить первоначальную загрузку страницы и уменьшить время ответа сервера.
Как же настроить оптимизацию так, чтобы оно работало без дальнейших правок? Если по-простому – поменять подход. Место SEO в классической разработке понятно: мы указали требования в плане, учли в ТЗ, разработали. Но это происходит после аналитики продукта, когда сформирован бэклог задач и создан дизайн-макет. В SPA так не работает – специалист должен присутствовать с самого начала, еще до того, как к работе приступил дизайнер. SEO-специалист сформирует документ, в котором будут прописаны все требования. Дальше проводится грамотная работа с дизайнером, чтобы на этапе дизайна сделать макеты и посмотреть, соблюдены ли все требования. От дизайнера переходим к разработке, и даже там SEO-специалист будет контролировать процесс правильного понимание SEO-требований.
Внедрение SЕО на ранних этапах разработки продукта позволяет ужесточить контроль верстки по параметрам семантики,построить правильную архитектуру подключения шрифтов, стилей и скриптов, оптимизировать изображения для увеличения показателей PageSpeed Insights.
Можно ли как-то по-другому? Конечно, можно. Стоит ли как-то по-другому? Нет. Если вы будете подключать SEO-специалиста в работе с SPA после создания дизайн-макета или (ну вдруг?) на этапе разработки – SEO-настройки не принесут никаких результатов. Если вы везучий, то потратите лишнее время и деньги на правку багов. Но, скорее всего, всю структуру нужно будет переделывать с нуля. Оно вам надо?
Лайфхаки для настройки SEO
При создании или переезде SPA-сайта всегда приглашайте SEO-специалистов на этапе планирования и проводите тестирование технических ошибок, работы скриптов и SEO-метрик.
Перед началом работы разложите проект на блоки, составьте чек-лист, по которому можно проверять элементы, выберите метод рендеринга, согласуйте SEO-структуру и список дополнительных элементов дизайна.
Для оптимизации изображений можно использовать технологию lazyload. «Ленивую подгрузку» поисковые системы рекомендуют использовать только для контента, который не понадобится пользователю в настоящий момент. Например, если он не доскроллил до конца страницы, изображения в самом низу загружать не требуется. Внедряя технологию, важно соблюдать требования поисковых систем, описанные в документации для разработчиков.
Краткий чек-лист по внедрению SEO в SPA:
- Подключить SEO-специалиста до начала работы дизайнера, во время формирование бэклога задач;
- Получить документ с требованиями по SEO-настройке;
- Передать требования дизайнерам;
- Включать SEO-специалиста во все этапы разработки, чтобы он контролировал правильное выполнение требований.
Итоги.
SEO это классно. SPA тоже. Чтобы они работали в тандеме и приносили прибыль компании вместо потраченных нервных клеток и отсутствия клиентов, включайте SEO-спецов на начальных этапах разработки. Сначала кажется, что вы переплачиваете за дополнительное время специалиста, но это работает ровно наоборот.
Делитесь своим опытом и мнениями в комментариях, буду рад подискутировать.