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

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

Россия +7 (495) 139-20-33
Шрифт:
0 9107
Подпишитесь на нас в Telegram

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

Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Примеры использования ChatGPT в SEO-стратегии
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если кто то хочет протестировать Cat GPT в SЕО проектах на базе нашего агенства, приглашаем наудалкнную работу Tg: @thegoodlink
Как онлайн-магазинам получать максимум трафика с помощью Поиска по товарам Яндекса
Гость из Тюмени
1
комментарий
0
читателей
Полный профиль
Гость из Тюмени - Производим пиломатериалы под заказ, от 1 до 14 дней. Яндекс постоянно банит наш яндекс фид по причине отсутствия товара на складе во время своих тайных проверок. Не возможно донести до модератора, что мы работаем под заказ, поэтому товара нет на складе, т.е. пришёл заказ - мы изготовили.
Особенности внутренней перелинковки для крупных сайтов
Злобная булочка
1
комментарий
0
читателей
Полный профиль
Злобная булочка - Ну это ж ингейт)
'SEO глазами клиентов 2023'
Валерия Власова
2
комментария
0
читателей
Полный профиль
Валерия Власова - Приветствую! На момент проверки сайтов клиентов получились такие показатели. Возможно, самостоятельно вы проверяете свои проекты по другим параметрам. Поэтому получились разные результаты.
Эффективное продвижение сайтов: 10 лет опыта в SEO в Рунете и Буржунете
Павел Горбунов
11
комментариев
0
читателей
Полный профиль
Павел Горбунов - Вы учтите, что за такие водные статьи хейтеры повалят жесткие. Сеошники воды не любят.
Как за месяц увеличить количество заявок в 1,7 раза, а их стоимость снизить в 1,6 раза. Кейс
Sputniki
1
комментарий
0
читателей
Полный профиль
Sputniki - Добрый день, Василий. Спасибо за вашу наблюдательность. На самом деле ошибки нет. Если вы сталкивались на практике с выгрузкой заявок из кабинета VK Рекламы, то заметите, что количество заявок не бьется с цифрами по рекламному кабинету (по статистике). Поэтому средняя цена заявки получается ниже чем у самых эффективных трех.
Приставы сняли все средства с банковских счетов российской «дочки» Google
Гостьываыявчаываычваы
2
комментария
0
читателей
Полный профиль
Гостьываыявчаываычваы - И ведь кто-то этому радуется, а потом скажут "были не правы", но будет поздно. Мда...
В поисках истины: разбираем 7 мифов о Telegram Ads
Konstantin Bulgakov
14
комментариев
0
читателей
Полный профиль
Konstantin Bulgakov - Жаль, про аналитику кампании ничего не сказано. А там всё очень непросто)
Топ-3 edtech-продукта для запуска в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Средняя зарплата 300 тысяч? автор обкурился или это инфоцыган с фантазией?
Как избавиться от нецелевых клиентов и увеличить количество заявок на 17%. Кейс
Олег
1
комментарий
0
читателей
Полный профиль
Олег - Константин, добрый день! На старте показатель CPL был 2730 руб , стал 1750 руб.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

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