Как настроить SEO для сайта на React.js (и других JavaScript фреймворках)

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

Одностраничное приложение (SPA)

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

Как SPA будет индексироваться поисковыми роботами?

Проблема использования SPA основана сложностях с которыми сталкиваются подобные сайты при индексации. Исторически поисковые роботы не могли индексировать данные полученные с помощью javascript кода. Тем не менее на сегодняшний день существуют методы решения этой проблемы.
Разработчики Google еще с 2004 года утверждают, что поисковый робот индексирует javascript:

Сегодня, если вы не закрываете доустп робота Googlebot к сканированию ваших файлов JavaScript или CSS, мы, как правило, можем отображать и понимать веб-страницы, также и как современные браузеры. Мы недавно обновили наши технические рекомендации для веб-мастеров, чтобы недопустить запрета Googlebot на сканирование CSS или JS-файлов вашего сайта.

Но тут необходимо сделать ряд оговорок:

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

Тем не менее, другие поисковые роботы не так сильно продвинулись в индексации JS скриптов. Поэтому создавая SPA нельзя быть уверенным, что Яндекс, Bing, Baidu и другие поисковые системы смогут их прочесть. Именно с этой проблемой сталкивается большинство сайтов на React.js. Есть два способа решить эту проблему:

  1. Настроить отображение страницы на сервере, который сведет все преимущества быстрой загрузки React на нет.
  2. Создать параллельные HTML версии страницы для поисковых роботов.

Более подробно рассмотрим каждый из вариентов.

Отображение на стороне сервера (Server Side Rendering)

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

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

Преимущества:

  1. Сайт доступен поисковым роботам;
  2. Сайт доступен пользователям со старыми браузерами.

Недостатки:

  1. Теряются некоторые преимущества SPA связанные со скоростью работы сайта;
  2. Увеличивается нагрузка на сервер.

Формирование HTML-копий странц (HTML snapshot)

У всех поисковых систем, в том числе и у Google до сих пор есть рекомендации как показать роботу HTML версию страницы, которая рендерится с помощью JS. Эти руководства еще были сделаны для AJAX сайтов с динамической подгрузкой контента. Вот ссылки на руководства для Google и Яндекс. Как можно видеть - они одинаковые, что существенно упрощает работу с обеими поисковыми системами.

При использовании этого метода пользователям всегда отображается SPA версия сайта, а поисоквый робот всегда может себя проверить, обратившись к HTML версии страницы.

Преимущества:

  1. Сохраняются преимущества по быстрой загрузке сайта для пользователей;
  2. Поиковые роботы корректно индексируют страницы сайта.

Недостатки:

  1. Фактически приходится поддерживать две версии сайта и постоянно проверять корректно ли отправляется HTML версии страницы для роботов. Если что-то сломается, это не сразу заметят, а индексация упадет.

Выводы

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

Святослав

Святослав

Управляющий партнер, эксперт в digital-маркетинге

Как настроить SEO для сайта на React.js (и других JavaScript фреймворках)