Как настроить индексацию SPA-сайта
Текст во многом вдохновлен прошедшим Optimization 2021, на котором были интересные доклады по продвижению SPA-сайтов, и предназначен в первую очередь для начинающих специалистов (или разработчиков, которые хотят понять, что же от них хочет SEO-специалист).
Перед тем, как разбирать вопрос, нужно разобраться, что скрывается под аббревиатурой SPA и как работает.
Что такое SPA-сайт
SPA (Single Page Application) или одностраничное приложение – технология создания веб-сайта из одного HTML-документа, контент и внешний вид которого изменяются с помощью JavaScript. Весь рендеринг при этом происходит полностью на стороне браузера пользователя.
Возможно, звучит не очень понятно, поэтому давайте разберем на примере типового интернет-магазина.
Схема работы классических сайтов (иногда их называют MPA – Multi Page Application)
Тут важно, что при открытии каждой новой страницы происходит перезагрузка окна браузера пользователя. Схематично можно изобразить так:
Схема работы SPA-сайтов:
ВАЖНО: так как контент подменяется скриптами, технически перезагрузки окна браузера не происходит. Схематично можно изобразить так:
Плюсы использования SPA
Минусы SPA
Подытожим: SPA-cайт подходит большим или высоконагруженным проектам, где важна скорость работы. Ключевое отличие от классических сайтов – браузер пользователя загружает только изменяющийся контент, что увеличивает скорость работы сайта.
Как поисковые системы индексируют 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-сайта. Единственное исключение – ваш целевой трафик идет только из Google и у вас не очень большой / сложный сайт (но тогда зачем вам SPA?)
Как сделать SPA-сайт индексируемым поисковыми системами
Есть несколько вариантов решения проблемы. Глобально они все сводятся к одному: поисковым системам нужно отдавать HTML-версию страницы в том виде, как она выглядит после исполнения всех скриптов.
При этом получается забавный парадокс: вы выбрали SPA-технологию (суть которой в том, что отрисовку сайта вы перекладываете с сервера на браузер), чтобы сделать классный, удобный, готовый к высоким нагрузкам сайт. Но для того, чтобы этот самый пользователь пришел к вам на сайт с поиска, вы возвращаетесь к отрисовке страницы на сервере.
SSR (Server Side Rendering)
SSR – это технология, которая позволяет выполнять все скрипты на стороне сервера (а не в браузере, как это делает классический SPA-сайт) и готовую HTML-страницу отправлять в браузер пользователя.
Когда использовать SSR? Если в User-agent пользователя есть нужные вам поисковые боты (Yandexbot, Googlebot и т.д.). Дополнительно можно использовать проверку через обратный DNS-запрос (для Яндекс, для Google), чтобы убедиться, что на сайт перешел действительно поисковый бот. В иных случаях вы можете отдавать пользователю SPA-версию сайта.
Тут важно: HTML-копии страниц создаются «на лету», в момент запроса пользователя или поискового бота. Если вам не подходит такой вариант, возможно стоит посмотреть в сторону пререндеринга страниц.
Пререндеринг
По сути это тот же самый SSR, но HTML-версии страниц создаются раз в определенный период (час, шесть часов, день). Для этого можно использовать как специализированные сервисы, так и подключаемые библиотеки. Дальше алгоритм работы такой же, как был описан выше: поисковикам отдаем HTML, живым пользователям SPA.
Изоморфный JavaScript
Суть состоит в том, что один и тот же JavaScript-код может исполняться как в браузере пользователя, так и на сервере. В каком-то смысле является тем же SSR, только это не добавленный «сверху» сервис, а вы изначально проектируете и пишете сайт определенным образом.
Какой вариант выбрать?
С точки зрения SEO – не принципиально, потому что суть всех трех вариантов сводится к одному и тому же – отдавать поисковым ботам готовую HTML-версию страницы. Выбор технологии в данном вопросе должен идти от команды разработки.
Источник: www.seonews.ru