5 ошибок, которые могут погубить ваш проект на SPA

5 февраля 2022 года в Санкт-Петербурге состоялась очередная встреча клуба SEO-специалистов, вебмастеров и маркетологов SEO CLUB SPB. На конференции наше агентство kite. представляло доклад «5 критических ошибок, которые могут погубить ваш проект на SPA».

Делимся опытом работы с проектами на SPA и объясняем, как исправить часто встречающиеся ошибки.

SPA или Single Page Application (одностраничное приложение) — web-приложение, которое написано на языке JavaScript. Его компоненты — JavaScript-файлы, модули, CSS-файлы — загружаются один раз на одной странице, а контент подгружается по мере необходимости в ходе взаимодействия пользователя с системой. Trello, Gmail, GitHub, Meduza — все это одностраничные приложения.

JavaScript — один из наиболее востребованных языков программирования. Число проектов, которые используют JS-технологии и фреймворки, продолжает расти в геометрической прогрессии.

Преимущества:

☑ Высокая скорость загрузки. SPA загружают весь необходимый код в браузере пользователя, а не на сервере. Поэтому нагрузка на сервер и скорость загрузки сайта остаются минимальными. Когда пользователь совершает действия, данные на странице меняются, а не перезагружаются полностью.

☑ Гибкость пользовательского интерфейса. На единственной веб-странице удобнее создавать динамически обновляемый контент, хранить информацию о сеансе, управлять мультимедиа и анимировать изображения.

☑ Простая разработка. Код для SPA начинают писать с файла file://URL. При этом разработчику не нужен сервер.

Недостаток одностраничных приложений заключается в том, что они нарушают принципы индексации:

Чтобы перевести JavaScript-код в понятный поисковикам HTML, используют рендеринг. Поискового бота переадресовывают с SPA-сайта на специальный сервер, где находится статический контент, заранее подготовленный для индексации.

Выбор метода рендеринга зависит от масштабов проекта и поисковых систем, в которых вы планируете его продвигать. Об этом расскажем далее и покажем примеры из наших кейсов.

На странице отсутствует контент для поисковых роботов, поэтому она не индексируется.

Как проверить, есть ли рендеринг? Зайдите в исходный код страницы (Ctrl + Shift + U) и посмотрите, как он выглядит. В нем должны быть, как минимум, Title, Description и заголовки. Если их нет, сайт не рендерится.

Не путайте исходный код с консолью разработчика, в которой код уже отрендерен.

Что делать, если на SPA-сайте нет рендеринга? Мы в kite. решаем проблему так:

При выборе метода рендеринга отталкиваемся от того, где должна индексироваться страница:

☑ Только в Google → ничего не делаем, оставляем WRS. Это технология рендеринга, основанная на обработке JS с помощью браузера Google Chrome.

Google-бот не умеет действовать, как настоящий пользователь: не скроллит страницы, не кликает по ссылкам. При этом он старается оптимизировать краулинговый бюджет: если время отрисовки первичного HTML превышает 5 секунд, он не проиндексирует страницу.

☑ В Google + Яндексе, небольшой проект до 100 тыс страниц → используем аутсорс-сервисы (например, Prerender.io).

☑ В Google + Яндексе, большой проект → используем SSR (Server Side Rendering). Это рендеринг кода за счет мощностей вашего сервера — «золотой стандарт» в работе со SPA. В большинстве JS-фреймворков предусмотрена поддержка SSR — например, React, Angular и Vue.

Может «сломаться» рендеринг чего угодно: метатегов, заголовков, блоков с контентом, пагинации, микроразметки, ссылок в блоках, меню или футере.

Пример: на сайте MyBook отключился рендеринг блока отзывов. Поисковый бот не видел цитаты, заголовки и ссылки. В дополнение к этому отключился блок рендера перелинковки.

Разница в контенте негативно сказалась на ранжировании страниц.

Как понять, что контентные блоки не отдаются в рендер?

☑ Если есть доступ к панели вебмастеров:

Шаг 1: посмотрите код нужной страницы через Google Search Console или Яндекс.Вебмастер, используйте инструмент «Проверка ответа сервера». В блоке «Содержимое страницы» отображаются первые 50 тысяч символов кода. Если нужно, обратитесь в поддержку Яндекс попросите, чтобы они отправили вам полный код страницы.

К сожалению, большой объём страниц с помощью техподдержки проверить не получится, нам удавалось получить до 5 страниц шаблонов в сутки в том, виде, в котором их "видит" поисковой робот Яндекса.

Шаг 2: Проверьте, отображаются ли нужные блоки в HTML-формате. Вручную (в любом блокноте) или через визуализатор кода: он «отрисует» код в таком виде, в каком его получает поисковая система.

☑ Если нет доступа к панели вебмастеров, используйте следующие инструменты. Мы расположили их в порядке убывания точности результатов.

Итак, мы выяснили, какие блоки не отдаются в рендер. Далее составляем список элементов, которые влияют на качество SEO сайта, и указываем их статус — есть рендеринг или нет. Передаем этот список разработчикам — они исправляют ошибки.

Варианты ошибок:

Во всех этих случаях видимость страниц падает, и они не индексируются.

Столкнувшись с этой проблемой, мы начали вытягивать код страницы через валидатор микроразметки Search Console, Bertal.ru и Яндекс.Вебмастер. Все было нормально до тех пор, пока мы не решили посмотреть кэш-копии по выборке страниц. Там обнаружили баг: на странице про рыбалку в Pompano Beach были метатеги, предназначенные для страницы про рыбалку в Cancun.

Мы сообщили об ошибке разработчикам, и они выяснили, что скрипт, отвечающий за переадресацию страницы, работал некорректно. Мы это исправили, и видимость страницы восстановилась.

Мы столкнулись с этой проблемой на сайте MyBook.

Часть скриптов были заблокированы, и поисковые роботы Google и Яндекс не видели содержимое страницы.

Решили проблему просто: отключили блокировку скриптов в robots.txt. После этого следили, чтобы никакие скрипты больше не блокировались.

Важно, чтобы робот имел возможность отрендерить JavaScript и получить первичный HTML-код не более чем за 5 секунд. В противном случае он уйдет, не просканировав страницу.

Пример: мы работали с сервисом по проверке контрагентов 1cont.ru. На момент начала работ у нас была проблема с индексацией: из 20 млн страниц Яндекс проиндексировал 1,2 млн, а Google — всего 70 тысяч.

Мы выписали все скрипты, которые тормозили скорость загрузки страниц, отдали их разработчикам, которые оптимизировали загрузку этих скриптов (часть была сжата, часть загружалась асинхронно, загрузку наименее значимых для отрисовки страниц скриптов отложили до полной отрисовки страницы. Результат: Яндекс проиндексировал 20 млн страниц, а Google — 17 млн.

Важно в процессе оптимизации случайно не снести скрипты метрики и аналитики. Так случилось у нас: в итоге индексация начала расти в геометрической прогрессии, а трафик стоял на месте.

Чтобы выявить объемные скрипты, мы используем сервис Google PageSpeed Insights. Он составляет список скриптов и указывает их размер. Аналоги — GTmetrix.

Чтобы упростить мониторинг скриптов, регулярно проверяйте:

Используйте инструмент «Мониторинг важных страниц» в Яндекс.Вебмастере: он умеет отслеживать метатеги, канонические URL и код ответа серверов. Минус — не умеет следить за рендерингом конкретных блоков.

Это умеет делать «Радар» Топвизора. Инструмент показывает ответ сервера, метатеги, контент. В нем можно размечать блоки, и если рендеринг по ним отключится, «Радар» об этом оповестит.

Технология SPA становится всё популярнее, и шанс, что вы с ней встретитесь (особенно, на больших проектах) возрастает с каждым годом. Большие плюсы для разработки и пользователей компенсируют минусы для SEO — отсутствие рендеринга “из коробки” и особое внимание к технической оптимизации.

Есть несколько самых популярных видов рендеринга (подробнее про обоснование типа рендеринга в нашей статье). «Золотым стандартом» является SSR (Server Side Rendering) — обработка JS кода в HTML за счет мощностей вашего сервера.

Самое важное при работе с сайтами на JS: регулярно обращать внимание на кеш страниц в поисковиках и настроить мониторинг корректного рендеринга всех критичных для SEO текстовых блоков блоков.