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

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

Россия +7 (495) 139-20-33
Шрифт:
0 12767
Подпишитесь на нас в 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-версию страницы. Выбор технологии в данном вопросе должен идти от команды разработки.

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
Алексей Романенков (Rookee): как обеспечить проекту видимость в интернете и какими инструментами ее наращивать
Rookee
3
комментария
0
читателей
Полный профиль
Rookee - Добрый день. Взяли на заметку, спасибо. Чтобы не пропустить материал на тему репутационной стратегии от Алексея, следите за Rookee в соцсетях :)
Михаил Сливинский (Яндекс): об алгоритмах качества в поиске, сгенерированных текстах и накрутке ПФ
Анна Макарова
389
комментариев
0
читателей
Полный профиль
Анна Макарова - Владимир, спасибо за комментарий! Если вдруг Михаил сюда не придет, то мнением и мыслями можно напрямую поделиться в ТГ амбассадора. В этой новости оставляли контакт: www.seonews.ru/events/vebmasterskaya-2024-v-yandekse-poyavilsya-ambassador-internet-ploshchadok-v-poiske/
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
Контекстная реклама, таргет и SEO вошли в топ-3 каналов продвижения бизнеса в 2023 году
Сергей
1
комментарий
0
читателей
Полный профиль
Сергей - Например, так {censored} - продвижение карточки в органике Google :) Также в Яндекс.Директ есть направление контекста для маркетплейсов.
Как продвигать сайт на Tilda: особенности продвижения и рекомендации специалистов
Konstantin Bulgakov
15
комментариев
0
читателей
Полный профиль
Konstantin Bulgakov - Спасибо за рекомендации, полезно. Но кажется, что тематика в кейсе не самая конкурентная + часть запросов в продвижение брендовые, там и без сео позиции будут в топе.
23 сервиса для эффективного экспресс-аудита любого сайта
Илья
3
комментария
0
читателей
Полный профиль
Илья - Lighthouse - работаю пока с ним, не подводит
Зачем вам доверие поисковиков, как его укреплять и привлекать клиентов на сайт
Rookee
3
комментария
0
читателей
Полный профиль
Rookee - Рекомендуем задуматься как можно скорее, потому что даже только что созданный сайт чаще всего нуждается в оптимизации. Битые ссылки, лишние редиректы, низкая скорость загрузки - от всего этого нужно избавляться, чтобы сайт успешно продвигался в поиске и удерживал внимание пользователей. Тарифы на оптимизацию бывают разные, в Rookee базовая техническая оптимизация стоит 13 090, а в рамках Комплексного продвижения может обойтись дешевле или дороже в зависимости от потребностей сайта.
Яндекс встроил нейросети в свой Браузер
RasDva
12
комментариев
0
читателей
Полный профиль
RasDva - О дааааа)
Яндекс Маркет представил собственный бренд велосипедов Raskat
Анна Макарова
389
комментариев
0
читателей
Полный профиль
Анна Макарова - Для городского велосипеда 14-16 кг - вполне ок, можно сказать легкий. Почему нет? )) Понятно, что есть варианты и легче, но они уже скорее всего будут спортивного плана, где каждый грамм имеем значение.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
389
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

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