SPA и SEO: почему поиск может не видеть текст вашей страницы
Страница красиво выглядит в браузере, а в исходном HTML пусто. Как это проверить за минуту и что делать с сайтом на React или Vue.
Вы открываете страницу в браузере, и там есть заголовок, абзацы, кнопки и картинки. Вы запускаете проверку, и получаете сообщение «недостаточно текста». Так часто выглядит сайт на React, Vue или Angular, который собирает страницу в браузере уже после загрузки. Для человека разницы нет. Для сервиса, который читает исходный HTML, страница пуста.
Что такое SPA и где здесь проблема
SPA (single-page application) отдаёт браузеру почти пустой каркас, например один блок с идентификатором root и несколько скриптов. Текст появляется после того, как скрипты выполнятся и подтянут данные. Если робот читает только то, что пришло с сервера, он видит каркас и больше ничего.
Поисковые системы умеют выполнять JavaScript, но делают это не мгновенно и не одинаково надёжно. Страница сначала попадает в очередь на скачивание, потом, возможно, на отрисовку, и только после этого её текст может учесться. На практике это значит задержку, а иногда и потерю части контента. Про Google известно, что он отрисовывает страницы современным браузером. Про Яндекс надёжнее исходить из того, что готовый HTML лучше, чем HTML, собираемый скриптами.
Как проверить за минуту
- Откройте страницу и выберите в меню браузера «Просмотр кода страницы» (не «Инспектор элементов», а именно исходный код).
- Найдите там любую фразу из первого абзаца, например через поиск по странице.
- Если фраза есть, текст отдаётся сервером. Если её нет, а в коде почти только теги
script, это SPA без серверной отрисовки.
Второй способ: выключите JavaScript в настройках браузера и обновите страницу. Что останется на экране, то и увидит простой робот.
Что с этим делать
- Серверная отрисовка (SSR). Сервер собирает готовый HTML и отдаёт его сразу. У популярных фреймворков для этого есть штатные решения. Это самый надёжный вариант для страниц, которые должны ранжироваться.
- Статическая генерация. Если контент меняется редко, страницы можно собрать заранее и отдавать как обычные файлы. Это быстро и дёшево.
- Предрендеринг для роботов. Отдельный сервис отдаёт роботам уже собранную версию. Решение рабочее, но добавляет ещё одну часть, которую надо поддерживать и проверять, чтобы роботу и человеку не показывали разное.
- Только для продвигаемых страниц. Личный кабинет и интерфейсы под логином индексировать не нужно. Достаточно, чтобы лендинги, каталог и статьи отдавали текст в HTML.
Что ещё проверить на SPA-сайте
- Title и description. Они должны быть в исходном HTML каждой страницы, а не подставляться скриптом уже после загрузки.
- Адреса страниц. Каждая страница должна жить по своему адресу и отвечать кодом 200, а несуществующая отдавать 404, а не главную.
- Ссылки. Навигация должна состоять из обычных ссылок с адресом, а не из кнопок с обработчиками клика: по таким роботу не пройти.
- Заголовки. Один H1 и осмысленные H2 нужны в готовом HTML, иначе структура страницы для робота не существует.
Как мы с этим работаем в Textabra
Если в исходном HTML страницы слишком мало текста, Textabra открывает её в настоящем браузере, дожидается отрисовки и анализирует то, что увидел бы пользователь. Это нужно, чтобы вы могли проверить и такие сайты. Но это обход, а не решение: если поиск не видит текст так же, как мы, проблему стоит решать на стороне сайта.
Хороший тест для SPA: если сервис проверки видит у страницы текст только после отрисовки скриптами, у поисковых роботов могут быть те же трудности.