×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 5324

Текст во многом вдохновлен прошедшим 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-сайта

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

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

Минусы SPA 

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

Подытожим: 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-версию страницы. Выбор технологии в данном вопросе должен идти от команды разработки.

(Голосов: 22, Рейтинг: 4.27)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Медицинская тематика в SEO: исследование спроса
МКСмедиа
6
комментариев
0
читателей
Полный профиль
МКСмедиа - Медицина - это такая тематика, где у клиентов всегда много вопросов и сомнений. Поэтому информационный контент на сайтах медицинской и других сложных тематик - просто необходим. Он не только приводит трафик, но и отрабатывает возражения.
Товары, которые не стоит продавать на Wildberries: типичные ошибки новичков
Николай
1
комментарий
0
читателей
Полный профиль
Николай - Похоже wildberries-edu.ru/
10 сервисов для работы с текстом в 2022 году
Никита
1
комментарий
0
читателей
Полный профиль
Никита - Обратите внимание, кто захочет пользоваться сервисом Retext.ai В пользовательском соглашении (который вы принимаете при регистрации) они прописали автосписания с карты сразу после первого платежа за тариф с увеличенным лимитом символов. Потом вам никто ничего не вернет, даже если вы написали в поддержку в день списания, и даже если вы не воспользовались тарифом ни на один символ. Работает Retext не на репутацию и хорошее отношение к клиентам, а на прибыль и автосписания.
SEO-продвижение монобрендового интернет-магазина. Кейс Casio
Mike
11
комментариев
0
читателей
Полный профиль
Mike - Яндекс сам не знает, что рекомендует. Каноникал они игнорируют все равно. А вот в гугле четко сказано, что если у страниц разный контент, то каноникал ставить не правильно.
«Ашманов и партнёры» создали нейросеть, которая генерирует нешаблонные описания для страниц сайтов
Алексей
1
комментарий
0
читателей
Полный профиль
Алексей - Функционал есть, но он не отдельный. Он идёт в дополнение к LSI-анализу, интегрирован в него. Можете увидеть сгенерированные мета-теги на вкладке "Текст" в результатах LSI-анализа. Они будут указаны с пометкой (авто). Также сгенерированные мета-теги указаны в ТЗ для копирайтера, которое формируется по итогам анализа конкурентов.
Реклама в Google Ads и AdSense в России работает нестабильно
Гость
2
комментария
0
читателей
Полный профиль
Гость - У тебя трафик с поиска уменьшился?
Медицинская тематика в SEO: исследование выдачи
УточняюВопросы
1
комментарий
0
читателей
Полный профиль
УточняюВопросы - не очень понятен ваш запрос, можете чуть детальнее расписать? у нас же РУ-семантика, соответственно и язык сайтов в выдаче РУ конечно могуть быть какие то случайные выбросы, но вряд ли значимые
Внедрение и тестирование поиска по товарам в интернет-магазине инструментов
Геннадий IQAD.RU
2
комментария
0
читателей
Полный профиль
Геннадий IQAD.RU - На текущий момент достаточно часто (через 2-3 фида находятся проблемы). Причина в том, что инструмент пока находится в бета-версии и фиды проходят ручную модерацию через асессоров Яндекса. Тем не менее, как правило, правки минимальны.
Прирост трафика почти на 2000% только за счет внутренней перелинковки – разбор кейса
Геннадий IQAD.RU
2
комментария
0
читателей
Полный профиль
Геннадий IQAD.RU - Да, всё верно. Есть большой потенциал в использовании в качестве первой хлебной крошки именно ключевого слова сайта.
Как продвинуть лендинг в ТОП: 9 особенностей
dotaidi
98
комментариев
0
читателей
Полный профиль
dotaidi - Обилие разговорной лексики превращает текст о SEO в коллегиальный междусобойчик, а не серьезную статью: "заморачиваться с сайтом", "упор на запросы", "на лендинг сажают", "не лезем туда, где нет шансов". Пару лет назад писал статью о лендингах, с тех пор, отошел от СЕО, оказалось, что за это время ничего нового не появилось. Не верится...
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
115
Комментариев
98
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!