Настройка SEO в 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-страница и отдается в браузер пользователю, а также индексирующему роботу.

В идеальной картине мира в SPA рендеринг – генерация статичных страниц, которые содержат DOM (дерево тегов HTML) – происходит на сервере. Там страницы сформированы заранее в HTML-копии и отдаются роботам поисковых систем максимально быстро. При обращении робота к серверу URL готов заранее. Это позволит ускорить первоначальную загрузку страницы и уменьшить время ответа сервера.

Как же настроить оптимизацию так, чтобы оно работало без дальнейших правок? Если по-простому – поменять подход. Место SEO в классической разработке понятно: мы указали требования в плане, учли в ТЗ, разработали. Но это происходит после аналитики продукта, когда сформирован бэклог задач и создан дизайн-макет. В SPA так не работает – специалист должен присутствовать с самого начала, еще до того, как к работе приступил дизайнер. SEO-специалист сформирует документ, в котором будут прописаны все требования. Дальше проводится грамотная работа с дизайнером, чтобы на этапе дизайна сделать макеты и посмотреть, соблюдены ли все требования. От дизайнера переходим к разработке, и даже там SEO-специалист будет контролировать процесс правильного понимание SEO-требований.

Внедрение SЕО на ранних этапах разработки продукта позволяет ужесточить контроль верстки по параметрам семантики,построить правильную архитектуру подключения шрифтов, стилей и скриптов, оптимизировать изображения для увеличения показателей PageSpeed Insights.

Можно ли как-то по-другому? Конечно, можно. Стоит ли как-то по-другому? Нет. Если вы будете подключать SEO-специалиста в работе с SPA после создания дизайн-макета или (ну вдруг?) на этапе разработки – SEO-настройки не принесут никаких результатов. Если вы везучий, то потратите лишнее время и деньги на правку багов. Но, скорее всего, всю структуру нужно будет переделывать с нуля. Оно вам надо?

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

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

Для оптимизации изображений можно использовать технологию lazyload. «Ленивую подгрузку» поисковые системы рекомендуют использовать только для контента, который не понадобится пользователю в настоящий момент. Например, если он не доскроллил до конца страницы, изображения в самом низу загружать не требуется. Внедряя технологию, важно соблюдать требования поисковых систем, описанные в документации для разработчиков.