руководитель SEO-отдела КИНЕТИКА
В сфере веб-разработки между программистами и SEO-специалистами идет вечный спор — что круче: iOS или Android обычный сайт или СПА.
SPA — это одностраничное приложение. Говоря простым языком, сайт, для работы которого не требуется обновление страницы, поскольку все данные загружаются с помощью скриптов.
SPA очень любят программисты, но такие сайты не хотят дружить с SEO. Сайт, конечно, должен быть красивым и удобным, но ранжирование и видимость в ПС пока хромает.
Тема непростая, но мы постараемся в ней разобраться — в статье я расскажу об особенностях SPA-сайтов: почему они конфликтуют с SEO и как разрешить и без того вечный спор и создать SPA, который будет виден и понятно поисковой системе.
Почему PS не ранжирует сайт с отличным юзабилити?
Вспомните, как вы пользуетесь десктопной версией ВКонтакте. Вы перемещаетесь по страницам сайта, но заголовок и боковая панель никогда не обновляются и не мигают. Происходит это потому, что при первом входе браузер загружает сразу все на сайте, а потом просто показывает ту часть, которую вы планировали увидеть.
Так работают SPA-сайты: когда человек хочет перейти с одной страницы на другую, браузер берет уже загруженные данные и показывает их ему. А при необходимости динамически подгружает нужный контент с сервера без перезагрузки страницы.
А типичный сайт (MPA) состоит из множества HTML-страниц. Пользователь переходит по ссылкам, браузер загружает новые страницы. Условно каждая страница сайта представляет собой отдельный документ с кодом.
Если бы вы попросили MPA и SPA раскрасить картинки в разные цвета, это выглядело бы примерно так:
SPA идеально подходит для сайтов, где человек долго сидит и что-то делает на одной странице, например:
- сканирует почту и помечает письма как спам;
- пишет посты и комментарии к другим;
- смотреть сериалы;
- выбирает квартиру;
- смотрит на картинки и собирает их в тематические доски.
SPA взаимодействует с сервером без перезагрузки страницы, поэтому содержимое сайта теперь меняется динамически. Например, раньше в ВК нужно было перезагружать страницу, чтобы увидеть новые сообщения, а теперь они появляются автоматически.
Программисты всегда выступают за SPA-сайты — они намного опережают MPA, хотя и имеют свои недостатки.
Сайт красивый, работает быстрее, юзабилити на высоте — конечно, все считают, что это идеальное решение. Но почему SEO SPA терпит неудачу? На это есть несколько причин — о них ниже.
Роботы не справляются с рендерингом — и страница превращается в «пустышку»
Основная проблема в том, что основной контент SPA-сайтов формируется на JavaScript, и если его убрать, страница превращается в «шаблон» — полную копию остальных.
Чтобы этого не произошло, скрипты должны быть предварительно отрендерены. PS может это сделать, но не всегда делает.
Да, еще в 2015 году Google объявил, что теперь он понимает JS и ему достаточно открывать скрипты для индексации. Но что происходит на самом деле? Боты просто не отрисовывают страницы: то ли из-за большой нагрузки на сервер, то ли из-за экономии ресурсов.
Эти проблемы возникают, когда роботы сканируют веб-сайты.
Сначала робот сканирует исходный код и видит, как выглядит страница. Он должен понимать, что на сайте есть все, что нужно пользователю. Но в SPA-версии он не видит основную часть контента, поэтому может просто не понять, что содержится на странице. Чтобы увидеть больше, боту необходимо выполнять сценарии и отображать их. И здесь есть два варианта: бот уходит и помечает страницу как неинтересную или дает сайту шанс и приглашает второго бота.
И даже если второй робот все-таки пришел, он не всегда справляется. Если на сайте одновременно много пользователей и время загрузки увеличилось, человек может немного подождать или даже не заметить изменений. А вот с ботом все понятно: не загрузили страницу за пять секунд — до свидания. Бывает, отрендерил первую страницу и увидел, что на ней все как надо, а значит, можно переходить к следующей. А вот на втором нужно рисовать все заново, а у бота уже нет на это ни времени, ни сил, ни желания. Потом он уходит, а сайт остается непроиндексированным.
Суммируя:
Но почему мы просто открываем сайт в браузере и видим полную картинку, а ПС не может ее увидеть без рендеринга самостоятельно?
Думайте о сайте JavaScript как о киноленте. Вы приходите со своим проектором — браузер играет за вас свою роль — вставляете пленку и смотрите фильм. Но у поисковика нет такого проектора. Она тоже смотрит на пленку, видит, что там какие-то картинки, но не может включить пленку. Бот заскучает и, скорее всего, уйдет, не попытавшись самостоятельно вклеить изображения в видео. Поэтому роботу нужен HTML-код: ПС может читать его как книжку с картинками и не терять интереса.
Как это выглядит технически. На первой картинке какой СПА сайт на самом деле, на второй — как его видит робот.
Что такое SPA-сайт на самом деле
Как робот видит SPA-сайт
Из-за того, что бот помечает страницу как неудобную, в индекс не попадает контент, который мог бы принести вам высокие позиции в поиске и значительный трафик.
Боты не видят контент на страницах — и сайт получает только брендированный трафик
Проблема еще и в том, что если у сайта хорошая посещаемость, многие просто не обращают внимания на такие ошибки в индексации. При этом часто ранжируются только брендовые запросы, и сайт стабильно теряет 80% трафика в своей нише.
Так было и на нашем проекте крупной интернет-аптеки. Сайт посещало более 8000 пользователей в день, но трафика по карточкам товаров не было вообще. Для аптечной ниши это особенно странно: основной аптечный трафик — лекарства. Нет наркотиков, которые люди не гуглили бы. На первый взгляд сайт красивый, удобный, с большим ассортиментом и кучей сертификатов. Поэтому мы копнули немного глубже, чтобы найти проблему.
Сайт был полностью заскриптован. Затем в первую очередь мы проверили, как робот PS видит страницы. Как и ожидалось, на экране появилось только белое полотно.
Когда мы начали искать контент в HTML-коде, который получает робот, то увидели, что текстового описания нет. Поэтому продукт никак не мог ранжироваться — у бота нет информации: ни названия препарата, ни состава, ни инструкции.
Робот просканировал страницу и даже отметил как удобную, но текстового описания не увидел
Получается, что ПС видит сайт и значительный трафик на нем, но не может просканировать ссылки в меню, блоки ссылок, ключевые слова и даже заголовок.
Например, мы ищем антисептики, а в результатах поиска появляется каталог лекарств. PS видит название «антисептики» в описании и URL. Видит, что люди, которые искали этот продукт, удовлетворяют свои намерения. Но когда нет релевантного заголовка, фильтров, товаров и прочего контента, сайт выпадает из топ-50.
По идее, ПС догадывается, что на этой странице есть антисептики, но не будет «кидать» пользователя в поисковую выдачу сайта, в котором не уверен на 100%. Именно поэтому приходит только брендированный трафик, несмотря на 8-летнюю историю домена с отличной типизацией.
Как быть с JavaScript, чтобы роботы сканировали весь сайт?
Отдаем на сервер рендеринг, чтобы получать небрендовый трафик
Боты не были настроены на работу и выведение аптеки в топ, поэтому мы немного облегчили им задачу.
Решение для SPA-сайтов — SSR. Он рендерит страницу вместо бота и «подсовывает» ему готовый рисунок, чтобы он точно все проиндексировал.
Получается, что когда пользователь Googlebot появлялся на сервере аптеки, готовая картинка автоматически отправлялась ему. С такой настройкой можно не рисковать и думать, что бот может что-то не увидеть на странице и отказаться ее индексировать — теперь все под контролем 😉
Я рекомендую использовать динамический рендеринг, когда сервер распознает, кто делает запрос. Если это пользователь, то браузер сам рендерит страницу, он с этим всегда справляется. Если поисковый робот — сервер отправляет ему уже готовую HTML-страницу во избежание «недоразумений».
Вот как технически выглядит динамический SSR
До настройки SSR на проекте поисковый бот отказывался индексировать тонну страниц. А сразу после переноса рендеринга на сервер ситуация значительно улучшилась: количество проиндексированных страниц увеличилось почти в 4 раза.
Ниже указано количество проиндексированных страниц до и после установки SSR.
Количество проиндексированных страниц — до
Количество проиндексированных страниц — после
Пишите контент в необработанном HTML, чтобы неотрендеренные скрипты не мешали ранжированию.
Не все сайты полностью написаны на JavaScript — есть страницы с частичной динамической загрузкой. На таких сайтах весь контент пишется в виде HTML-кода, но на нескольких страницах появляется анимация или выпадающий список, реализованный на JS.
Пример частичной динамической нагрузки
Если динамически загружаются только отдельные элементы, это не проблема. Главное — прописать недостающий содержательный контент в HTML-коде. Так что скрипты, которые не рендерит ПС, ни на что не повлияют — он увидит текстовое описание в HTML и сможет ранжировать сайт по ключевым словам.
Это то, что мы сделали для службы помощи студентам. На сайте был блок FAQ, который открывался по клику. Боты увидели вопросы «Как быстро авторы могут помочь с решением задач?», «Как выбрать автора?» и другие, но не смог прочитать ответы. Из-за этого часть страницы не попала в индекс и ранжировалась хуже.
Поэтому мы добавили контент в сыром HTML и дали понять боту, что пользователь увидит ответы на странице FAQ. Теперь ПС может читать содержимое блоков и учитывать его в ранжировании сайта 😉
Но когда динамических элементов слишком много, можно не беспокоиться о верстке и сразу подключать SSR.
В противном случае это может занять слишком много времени: программисты перепечатают → PS снова обойдёт сайт → SEO-специалисты проверят, зафиксировал ли он изменения → если нет, то придётся перепечатывать. На первую такую итерацию уйдет не менее 2-3 недель, на вторую — столько же. Зачем ждать так долго и упускать потенциальных клиентов, если вы можете настроить SSR и привлечь трафик на свой сайт прямо сейчас? 😉
Всем высоких продаж!
Подборка статей о продвижении сайта в интернет. Обучение востребованным профессиям в сфере IT. Маркетинг. Анализ рынка. Полезные секреты проведения рекламных кампаний. Подпишитесь на нас в социальных сетях, что бы не пропустить важное.
Специальная подборка для Вас