JavaScript SEO: серверный рендеринг и индексация сайта
Может ли JavaScript-сайт ранжироваться в поиске? Что даёт серверный рендеринг, откуда берутся проблемы индексации и какие ошибки отнимают видимость.
Команда rabbitclipПубликация: 6 мин чтения
Коротко
Сайт, построенный на JavaScript, может появляться в поиске, но ранжирование и индексация у него более хрупкие, когда содержимое рисуется в браузере: поисковая система сначала получает страницу как сырой HTML, а выполнение JavaScript для того, чтобы увидеть настоящее содержимое, происходит отдельным и более поздним шагом. Если контент, заголовки, ссылки и мета-теги уже есть в первом HTML, эта задержка перестаёт иметь значение. Путь к этому лежит через серверный рендеринг или заранее собранные страницы.
Проблема не в самом JavaScript, а в контенте, который от него зависит. Два сайта на одном и том же фреймворке могут вести себя в поиске совершенно по-разному, потому что один готовит страницу на сервере, а другой присылает пустую оболочку и оставляет наполнение браузеру.
Ниже мы объясняем, как поисковая система обрабатывает JavaScript-страницу, какой способ рендеринга подходит какому бизнесу и какие ошибки мы встречаем чаще всего.
Как поисковая система обрабатывает JavaScript-страницу?
Процесс состоит примерно из трёх шагов. Поисковая система обходит адрес и получает сырой HTML, страница попадает в очередь на рендеринг, а когда подходит её черёд, JavaScript выполняется, чтобы получить итоговую страницу, и уже она попадает в индекс. Google делает этот рендеринг на актуальном движке браузера, но шаг выполняется отдельно, и между шагами может возникнуть ожидание.
Поэтому страница, в сыром HTML которой ничего нет, с первого взгляда выглядит пустой. Контент приходит позже, но время в очереди отличается от страницы к странице. Для новостной страницы или страницы с остатками, которая часто меняется, такое ожидание означает, что содержимое появляется с опозданием.
Не каждая поисковая система и не каждый ИИ-краулер рендерит одинаково хорошо. Некоторые вообще не выполняют JavaScript или выполняют лишь его часть. Контент, который появляется только после рендеринга, ставит под риск не одну поисковую систему, а все инструменты, которые читают ваш сайт.
Чем отличаются клиентский рендеринг, серверный рендеринг и заранее собранные страницы?
При клиентском рендеринге сервер присылает пустую оболочку страницы, а браузер строит содержимое с помощью JavaScript. При серверном рендеринге страница готовится на сервере в момент запроса и приходит уже заполненной; затем JavaScript берёт на себя взаимодействие в браузере. При предварительной сборке страница генерируется один раз во время публикации и отдаётся как готовый файл.
Для страниц, которые редко меняются, предварительная сборка остаётся самым быстрым и самым надёжным вариантом: страницы компании, страницы услуг, статьи. Страницы с ценами, остатками или персонализированными данными лучше подходят для серверного рендеринга. Области, которые поисковые системы всё равно не должны видеть, например личный кабинет после входа, вполне могут использовать клиентский рендеринг.
Большинство современных фреймворков позволяет смешивать все три способа на одном сайте. Решение принимается по типу страницы; выбирать один-единственный способ для всего сайта не нужно.
Как понять, что JavaScript вредит вашему сайту?
Самая простая проверка заключается в том, чтобы открыть исходный код страницы. Если вы видите там заголовок, основной текст и ссылки, принципиальной проблемы нет. Если вы видите только пустой корневой элемент и теги скриптов, содержимое строится в браузере.
Вторая проверка выполняется инструментом проверки URL в Google Search Console, который показывает полученный HTML и страницу такой, какой её видит поисковая система после рендеринга. Любое расхождение между настоящей и отрендеренной страницей проявляется именно там. Заголовки, описания и структуру содержимого вашего сайта можно также быстро проверить с помощью нашего бесплатного аудита внутристраничного SEO.
Третий признак виден в отчётах об индексе: множество страниц со статусом «просканировано, сейчас не в индексе» или результаты, у которых заголовок и описание не совпадают с настоящим содержимым, могут указывать на проблему рендеринга.
- Видны ли основной текст и ссылки в исходном коде страницы
- Совпадает ли отрендеренный HTML в проверке URL с настоящей страницей
- Находятся ли заголовок и мета-описание в первом HTML или добавляются позже
- Построены ли меню и ссылки внутри текста на настоящих тегах ссылок
- Не заблокированы ли файлы скриптов и стилей в robots.txt
Какие ошибки часто встречаются на JavaScript-сайтах?
Самая частая ошибка заключается в том, что ссылки строят из элементов, которые работают по событию клика, а не из настоящих тегов ссылок. Поисковые системы переходят только по ссылкам, которые содержат адрес; структура, в которой страницу меняет кнопка, не даёт обнаружить эти страницы. Родственная ошибка состоит в том, чтобы прятать страницы за хеш-фрагментом в адресе, из-за чего разные страницы сжимаются в один URL.
Вторая ошибка в том, что контент привязывают к действиям пользователя. Контент, который загружается, когда кто-то нажимает на вкладку, прокручивает страницу вниз или нажимает кнопку «показать ещё», это контент, которого поисковая система не видит. Основной текст страницы никогда не должен находиться за такими действиями.
Третья ошибка заключается в блокировке файлов скриптов и стилей в robots.txt: поисковая система не может отрендерить страницу и неверно трактует вёрстку или содержимое. Четвёртая ошибка в том, что для несуществующих страниц не возвращается корректный статус ошибки: одностраничные приложения могут отвечать на неверный адрес кодом успеха и сообщением «страница не найдена», а поисковая система принимает её за настоящую страницу и пытается проиндексировать.
Можно ли добавлять заголовки, мета-теги и структурированные данные с помощью JavaScript?
Можно, если понимать риск. Google умеет читать заголовки и мета-теги после рендеринга, но если их нет в первом HTML, увидят их не все краулеры и не все инструменты предпросмотра в социальных сетях. Пустая карточка предпросмотра при публикации ссылки часто возникает именно по этой причине.
Та же логика действует и для структурированных данных. Добавлять их можно с помощью JavaScript, но в первом HTML они надёжнее и несут меньше зависимостей. Критичные теги, такие как канонический адрес и директива robots, должны находиться в первом HTML; директива, изменённая после рендеринга, может противоречить значению, которое поисковая система прочитала первым.
Читают ли ИИ-ассистенты JavaScript-контент?
Эта область быстро меняется, и единого ответа нет. Краулеры, которыми пользуются ИИ-ассистенты и поисковые сводки, как правило, рендерят не так умело, как классическая поисковая система, а некоторые довольствуются сырым HTML. Поэтому держать важный контент в первом HTML самый надёжный путь для всех вероятных читателей.
Если вы нацелены на видимость в ИИ, поместите главный ответ страницы и ключевые факты в HTML, отрендеренный на сервере. Как ваш сайт выглядит для этих инструментов, можно проверить с помощью нашей бесплатной проверки видимости в ИИ.
Когда переход на серверный рендеринг не нужен?
Не каждый JavaScript-сайт нужно переписывать. Клиентскому порталу, инструменту записи или приложению за входом поисковый трафик не нужен, поэтому клиентского рендеринга достаточно. Эти области вы всё равно захотите держать вне поиска.
Если на вашем нынешнем сайте содержимое видно в исходном коде страницы, используются настоящие теги ссылок, а проверка URL не вызывает вопросов, причин менять способ рендеринга нет. Перестраивать работающую систему из-за тревог о поиске значит создавать новые ошибки. Сначала измерьте, потом решайте.
JavaScript не враг видимости в поиске; враг тот контент, который появляется только после выполнения JavaScript. Поместите содержимое, ссылки и теги важных страниц в первый HTML, а остальное взаимодействие оставьте браузеру. Если вы хотите вместе посмотреть, как ваш сайт выглядит для поисковых систем сегодня, вы можете назначить ознакомительную встречу с rabbitclip.
Частые вопросы
Индексирует ли Google JavaScript-сайты?
Да. Сначала он получает сырой HTML, затем выполняет JavaScript на шаге рендеринга. Этот шаг может задерживаться, и не каждый краулер его выполняет, поэтому надёжнее держать важный контент в первом HTML.
Плох ли для SEO сайт, написанный на React или Vue?
Нет. Проблема не в фреймворке, а в том, как отдаётся контент. При серверном рендеринге или предварительной сборке на том же фреймворке контент приходит в первом HTML, и проблема исчезает.
Как проверить, как страница выглядит для поисковой системы?
Откройте исходный код страницы и воспользуйтесь инструментом проверки URL в Search Console. Оба способа показывают, видны ли основной текст, заголовок и ссылки.
Является ли динамический рендеринг решением?
Выдача поисковым системам отдельной, заранее отрендеренной версии использовалась как временная мера, но её трудно поддерживать, и долгосрочной рекомендацией она не считается. Устойчивое решение это серверный рендеринг или предварительная сборка.
Влияет ли медленный JavaScript-сайт на позиции?
Косвенно. Тяжёлые скрипты ухудшают скорость отклика и время загрузки, а это ослабляет и пользовательский опыт, и показатели опыта работы со страницей.
