Как настроить индексацию SPA-сайта

Текст во многом вдохновлен прошедшим Optimization 2021, на котором были интересные доклады по продвижению SPA-сайтов, и предназначен в первую очередь для начинающих специалистов (или разработчиков, которые хотят понять, что же от них хочет SEO-специалист). 

Перед тем, как разбирать вопрос, нужно разобраться, что скрывается под аббревиатурой SPA и как работает. 

Что такое SPA-сайт 

SPA (Single Page Application) или одностраничное приложение – технология создания веб-сайта из одного HTML-документа, контент и внешний вид которого изменяются с помощью JavaScript. Весь рендеринг при этом происходит полностью на стороне браузера пользователя. 

Возможно, звучит не очень понятно, поэтому давайте разберем на примере типового интернет-магазина. 

Схема работы классических сайтов (иногда их называют MPA – Multi Page Application) 

1. Браузер пользователя запрашивает страницу https://site.ru/catalog/. 
2. Сервер сайта отправляет в браузер пользователя страницу целиком (HTML + CSS + JS + медиаконтент). 
3. Браузер отрисовывает страницу с помощью полученных материалов. 
4. Дальше пользователь переходит в другую категорию сайта. 
5. Браузер запрашивает страницу https://site.ru/catalog/holodilniki/. 
6. Сервер сайта отправляет в браузер пользователя страницу целиком (HTML + CSS + JS + медиаконтент). 
7. Браузер отрисовывает страницу с помощью полученных материалов. 
8. … 

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

 

Схема работы SPA-сайтов: 

1. Браузер пользователя запрашивает страницу https://site.ru/catalog/. 
2. Сервер сайта отправляет в браузер пользователя пустую (в классическом понимании) HTML-страницу со скриптами. 
3. Браузер пользователя начинает выполнять эти скрипты и загружает соответствующий странице контент (текст, медиа и т.д.). 
4. Дальше пользователь переходит в другую категорию сайта. 
5. Браузер запрашивает только изменившийся контент. 
6. Сервер отправляет данные (как правило в формате json), которые заменяются с помощью уже загруженного JavaScript. 
7. Браузер подставляет новые данные на страницу. 
8. … 

ВАЖНО: так как контент подменяется скриптами, технически перезагрузки окна браузера не происходит. Схематично можно изобразить так: 

Плюсы использования SPA 

1. Снижение нагрузки на сервер – код выполняется в браузере клиента. 
2. Высокая скорость разработки – есть много готовых фреймворков (React, Angular, Vue, Ember), frontend и backend сайта пишутся на JavaScript и могут быть написаны одним человеком.  
3. Высокая скорость работы – все важные для работы данные загружаются в первую загрузку сайта, дальше идет только обновление изменяющихся данных. 

Минусы SPA 

1. Из-за того, что данные загружаются динамически, они практически недоступны поисковым ботам и, следовательно, без дополнительных доработок сайт будет ранжироваться хуже или не ранжироваться вообще. 
2. Могут возникнуть сложности с аналитикой – SPA-сайт не перезагружает окно браузера при смене страниц, из-за чего многие счетчики могут неправильно фиксировать ваше поведение на сайте. 
3. Создают большую нагрузку на устройство пользователя, так как весь код выполняется в браузере. 
4. Первая загрузка сайта может быть долгой, так как загружается большое количество необходимых для работы скриптов.  

Как поисковые системы индексируют SPA 

Почти никак.  

Вы скажете, что Googlebot умеет выполнять JavaScript-код и, следовательно, у него не должно быть проблем с индексацией SPA. Теоретически да, но нет. Проблема кроется в том, как именно Google индексирует JavaScript: если поисковый бот понимает, что страница отрисовывается с помощью скриптов, СНАЧАЛА он добавляет в индекс ее HTML-версию (без контента). И уже ПОТОМ, когда у него освободятся ресурсы, выполнит код и сохранит в индекс уже полную версию страницы. 

Схематично это выглядит так: 

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

При этом стоит помнить, что чтобы Googlebot правильно отрисовал вашу страницу, ее код должен быть идеальным: не должно быть никаких ошибок в выполнении скриптов (проверяем по консоли в Chrome Dev Tools), код должен быстро исполняться (Googlebot ждет от 5 до 20 секунд, пока исполнятся все скрипты, прежде чем добавлять страницу в индекс). 

Из современных поисковых систем только Google (и ask.com, который использует поисковую выдачу Google) индексирует JavaScript-содержимое. А что остальные поисковые системы? 

Яндекс пишет в своей справке, что содержимое страницы будет проиндексировано только при наличии ее HTML-копии. Bing (и Yahoo, который использует его поисковую выдачу) на словах перешел на новый движок и может индексировать JavaScript, но на деле этого практически не происходит. По DuckDuckGo официальной информации нет, но из практики он также не индексирует JavaScript.  

Как сделать SPA-сайт индексируемым поисковыми системами  

Есть несколько вариантов решения проблемы. Глобально они все сводятся к одному: поисковым системам нужно отдавать HTML-версию страницы в том виде, как она выглядит после исполнения всех скриптов.  

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

SSR (Server Side Rendering) 

SSR – это технология, которая позволяет выполнять все скрипты на стороне сервера (а не в браузере, как это делает классический SPA-сайт) и готовую HTML-страницу отправлять в браузер пользователя.  

Когда использовать SSR? Если в User-agent пользователя есть нужные вам поисковые боты (Yandexbot, Googlebot и т.д.). Дополнительно можно использовать проверку через обратный DNS-запрос (для Яндекс, для Google), чтобы убедиться, что на сайт перешел действительно поисковый бот. В иных случаях вы можете отдавать пользователю SPA-версию сайта. 

Пререндеринг 

По сути это тот же самый SSR, но HTML-версии страниц создаются раз в определенный период (час, шесть часов, день). Для этого можно использовать как специализированные сервисы, так и подключаемые библиотеки. Дальше алгоритм работы такой же, как был описан выше: поисковикам отдаем HTML, живым пользователям SPA. 

Изоморфный JavaScript 

Суть состоит в том, что один и тот же JavaScript-код может исполняться как в браузере пользователя, так и на сервере. В каком-то смысле является тем же SSR, только это не добавленный «сверху» сервис, а вы изначально проектируете и пишете сайт определенным образом. 

Какой вариант выбрать? 

С точки зрения SEO – не принципиально, потому что суть всех трех вариантов сводится к одному и тому же – отдавать поисковым ботам готовую HTML-версию страницы. Выбор технологии в данном вопросе должен идти от команды разработки.