SEO оптимизация SPA-сайтов

Разберемся с понятиями

SPA-сайты (Single Page Application) — это одностраничное приложение, в котором есть один HTML-документ, используемый как некая оболочка, а все ресурсы по типу файлов js/css загружаются (рендерятся) вместе с загрузкой этой страницей.

Таким образом, взаимодействие пользователя со страницей происходит через динамическую подгрузку нужного содержимого (шапка и подвал остаются неизменными), обновляя его с помощью технологии AJAX, чтобы пользователи могли иметь более быстрый опыт взаимодействия.

Рендиренг — это процесс отрисовки страницы поисковым ботом, например, Googlebot.

AJAX (Asynchronous JavaScript and XML) – это технология, которая позволяет динамически (асинхронно) загружать отдельное содержимое страницы. И при обновлении данных страница не загружается повторно (нет ее перезагрузки).

Поэтому, SPA-сайты работают по такой схеме:

1. Когда пользователь хочет перейти с одной страницы на другую, браузер использует уже загруженные данные для отображения.
2. И если требуется, он динамически загружает с сервера необходимый контент без перезагрузки всей страницы.

А обычные сайты (т.н. MPA) состоят из множества HTML-страниц. Когда пользователь кликает по ссылкам, браузер загружает новые страницы. В таком случае, каждая страница сайта представляет собой отдельный документ с кодом.

SPA сайты любят разработчики за более упрощенную архитектуру, а пользователи — за более удобный опыт взаимодействия, где они могут проводить много времени на одной странице (например, соцсети, электронная почта), но не SEO-специалисты. А нам, SEO-специалистам, для эффективного продвижения, нужно подружить такие сайты с SEO.

Плюсы SPA-сайтов

1. Пользовательский опыт (UX): СПА сайты обеспечивают более быструю загрузку страниц (кроме первого взаимодействия) и более плавное взаимодействие с сайтом, что улучшает пользовательский опыт.
2. Более низкая нагрузка на сервер: Поскольку страница обновляется динамически, серверу не нужно постоянно отдавать полные и новые HTML-страницы, что уменьшает нагрузку на него.

Минусы SPA-сайтов

1. Плохая индексируемость: Поисковые роботы могут иметь проблемы с индексацией СПА сайтов, так как они не могут нормально отрисовать страницу и делают это с ошибками. Тесты показали, что если рендеринг страницы ботом превышает 5 секунд, то он покидает ее.
2. Замедленный первый контент: При первом посещении СПА сайта может быть заметно замедление загрузки, так как изначально, весь контент должен быть загружен целиком.

То есть, основная проблема заключается в том, что Googlebot иногда с ошибками рендерит SPA сайты, потому как есть определенные ограничения, которые препятствуют сканированию и индексированию контента, даже не смотря на то, что в мае 2019 году они поменяли браузерный движок рендеринга с Chromium версии 41 на 78, который поддерживает множество новых функций, используемых в SPA.

Как поисковый бот обрабатывает JavaScript

Он делает это в 3 этапа:

1. Сканирование информации (на основе ссылок). Советую проверить, оформлены ли ваши ссылки в соответствии с рекомендации Google для того, чтобы Googlebot мог по ним перейти, добавить их в очередь на сканирование и просканировать в дальнейшем.
2. Рендеринг (отрисовка), за которую отвечает сервис отрисовки веб-страниц (Web Rendering Service, WRS), который является компонентом Googlebot.
3. Индексирование (занесение в базу данных).

Как проверить, как Googlebot видит отрисованную страницу

Чтобы понять, как Google сканирует и отрисовывает тот или иной URL, нужно провести:

1. проверку оптимизации для мобильных или 
2. проверить страницу инструмент проверки URL в Google Search Console. Так вы сможете увидеть отрисованные объекты, загруженные ресурсы, сообщения и исключения в консоли JavaScript и т. д.

Внимание! 

Для отладки страниц рекомендуется использовать не ссылки на кеш, а именно инструмент проверки URL, чтобы проверять последние версии страниц.

Как проверить корректный рендеринг страницы в Google Search Console

Шаг №1. Ввести урл-адрес проверяемой страницы в поле поиска в Google Search Console и после нажать на появившуюся кнопку Проверить страницу на сайте.

Шаг №2. Нажимаете на кнопку Посмотреть проверенную страницу.

Шаг №3. Проверяете, как бот видит отрендеренную страницу, перейдя на вкладку HTML для проверки наличия в коде страницы мета-тегов, текста, атрибута rel-canonical, и после переходите на вкладку Скриншот (для проверки отрисовки).

Шаг №4. Если часть содержимого не отображается, то переходите на вкладку Подробнее — Ресурсы страницы и включаете фильтр «Незагруженные ресурсы» для поиска тех ресурсов, которые боту не удалось отрендерить.

Шаг №5. Открываете доступ к файлам через файл robots.txt к заблокированным ресурсам, если у вас MPA, как у меня этот блог, или выполняете рекомендации из раздела ниже для SPA: Как подружить SEO и SPA-сайт (быстрый ответ: настраиваем SSR — Server-Side Rendering — Отрисовка на стороне сервера).

Шаг №6. Проводите проверку рендеринга страницы ботом повторно по шагам выше, чтобы убедиться, что все рендерится ОК.

Использование ленивой загрузки изображений

Также советую проверить, чтобы Googlebot имел возможность загружать изображения без ошибок. Если есть проблемы, то советую реализовать так называемый лейзи лоад по рекомендациям, описанным тут, а именно, добавить атрибут “loading=lazy” в тег <img>.

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

Что еще важно сделать!

Открыть файл js, css и картинки для сканирования поисковыми ботами в файле robots.txt, чтобы Googlebot смог корректно отрендерить страницу. Поэтому, рекомендую добавить разрешающие директивы в этот файл:

Allow: /*.js
Allow: /*.css
Allow: /*.gif
Allow: /*.jpg
Allow: /*.png
Allow: /*.webp

Что такое DOM и как его посмотреть?

DOM — это «Document Object Model» (модель объектов документа), которая представляет собой структуру веб-страницы в виде дерева объектов или иерархии. Каждый элемент HTML-документа (такие как заголовки, параграфы, изображения, ссылки и т.д.) представлен в DOM в виде узла (node) объекта)).

Например, вот так будет выглядеть структура определенной HTML-страницы.

Чтобы посмотреть DOM, нужно:

1. Выделить часть текста на странице, который хотите исследовать.
2. Нажать правой кнопкой мышки и выбрать «Посмотреть элемент» прямо в браузере.

Как подружить SEO и SPA-сайт

Ответ: Использовать SSR и CSR

То есть, нужно реализовать рендеринг клиентской части в HTML-формат на сервере (SSR), чтобы отрисовка страницы происходила на сервере, а боту отдавалась уже готовая страница для индексации.

Если же запрос на получение страницы осуществляется со стороны пользователя (CSR), а не бота, то мы осуществляем рендеринг на стороне клиента (в браузере), например, с помощью уже известного нам DOM.

Такой подход называется динамический рендеринг, когда сервер распознает, кто именно осуществляет запрос — поисковый бот или клиент.

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

Таким образом, скрипты, которые поисковые системы не смогут отрендерить, не окажут никакого влияния на ранжирование сайта по продвигаемым запросам, так как поиск увидит текстовое описание в HTML.

Но когда таких элементов становится много, вот тогда и можно подключать SSR.

Практическое задание

1. Проверьте продвигаемые страницы вашего сайта через Google Search Console на корректность наличия и отрисовки всех элементов.
2. Если к каким-то элементам боту заблокирован доступ, то откройте его через файл robots.txt.
3. Реализуйте ленивую загрузку для изображений.
4. Если у вас SPA сайт — реализуйте динамический рендеринг.

Какую помощь по SEO могу еще предложить