Влияние javascript на продвижение сайта

Влияние javascript на продвижение сайта сводится к одному практическому вопросу: попадёт ли ваш текст в индекс или робот увидит пустой каркас. Всё остальное — производные от него. Сайт может быть красивым, быстрым по ощущениям и удобным для человека, но если содержимое страницы появляется только после выполнения кода в браузере, поисковая система имеет дело с документом, где нет ни текста, ни ссылок, ни заголовков. Такой сайт месяцами висит без показов, а владелец ищет причину в текстах и ссылках.

Ниже — механика: как робот на самом деле обрабатывает скрипты, что ломается чаще всего, четыре способа проверить свой сайт за полчаса, какие решения существуют и что заложить в задание разработчику, чтобы не переделывать потом. Я веду проекты в поиске с 2005 года, и доля случаев, где причиной «непонятного отсутствия трафика» оказывалась именно эта, за последние годы заметно выросла — вместе с популярностью фреймворков.

Как робот на самом деле обрабатывает скрипты

Обработка идёт в два прохода, и это ключ ко всему остальному.

Первый проход. Робот запрашивает адрес и получает HTML — ровно тот, что отдал сервер. Он разбирает то, что есть в этом ответе прямо сейчас: текст, заголовки, ссылки, метатеги, разметку. Никакого выполнения кода на этом шаге нет. Всё, что попало в первый проход, гарантированно доступно системе.

Второй проход. Страница ставится в очередь на отрисовку: специальный компонент загружает её как браузер, выполняет скрипты и смотрит, что получилось. Только после этого система видит содержимое, добавленное кодом. Проблема в том, что очередь не бесплатна и не мгновенна: между проходами проходит от часов до недель, а при большом объёме страниц часть из них может не дождаться очереди вовсе.

Google выполняет отрисовку регулярно и относительно предсказуемо. Яндекс умеет это делать, но не гарантирует и не обещает сроков. Для проектов, которые живут на российском трафике, вывод однозначный: рассчитывать на второй проход нельзя, содержимое должно быть в первом.

Отдельный нюанс — метатеги. Даже когда текст в итоге отрисовывается, заголовок и описание, подставленные кодом, учитываются неохотно и не всегда. Сниппет собирается из того, что робот получил сразу.

Что ломается чаще всего

Как сделано	Что происходит с индексацией
Текст подгружается после загрузки страницы	Страница индексируется пустой, в поиске находится только по адресу
Меню и ссылки строятся кодом	Робот не находит внутренние страницы и не обходит сайт дальше главной
Каталог с бесконечной прокруткой	В индекс попадает только первая партия товаров
Метатеги подставляются кодом	Учитываются частично, сниппет собирается из чего попало
Переходы без смены адреса	Индексируется одна страница вместо сотен
Содержимое за кнопкой «показать ещё»	Учитывается частично или не учитывается
Отзывы и характеристики подтягиваются со стороннего сервиса	Не попадают в текст страницы, уникальность теряется
Цены отрисовываются кодом	Не попадают ни в индекс, ни в товарные выгрузки

Две последние строки стоят отдельного внимания, потому что встречаются даже на технически грамотных сайтах. Отзывы, подключённые через сторонний виджет, для поиска не существуют: страница выглядит бедной, хотя человек видит сотню мнений. Цена, подставляемая кодом из внешнего источника, не попадает в разметку товара — и карточка теряет расширенный сниппет.

Тему разбирал отдельно: «Влияние карты сайта на SEO продвижение».

Четыре способа проверить свой сайт

Проверка не требует специальных инструментов и занимает полчаса. Идём от простого к точному.

1. Отключить выполнение скриптов в браузере. В настройках или в панели разработчика. Откройте главную, страницу категории и карточку товара или услуги. Всё, что осталось на экране, робот видит гарантированно. Если осталось пустое поле с логотипом, дальше можно не искать.
2. Посмотреть исходный код страницы. Сочетание Ctrl+U показывает то, что отдал сервер, до выполнения кода. Найдите поиском по коду характерную фразу из вашего текста. Важно не перепутать: «Просмотреть элемент» в панели разработчика показывает уже собранную браузером страницу, и там текст будет виден всегда, независимо от реального положения дел.
3. Инструмент проверки ответа сервера в панели вебмастера. Он показывает страницу ровно так, как её получает робот, и это самый достоверный источник для конкретной поисковой системы.
4. Поиск по точной фразе. Возьмите характерное предложение со страницы, заключите в кавычки и найдите в поиске. Если страница не находится — текст до индекса не дошёл. Проверьте так пять-семь разных страниц: иногда часть сайта индексируется, а часть нет, и это подсказывает, где именно проблема.

Пятый способ, который стоит применить при подозрении на масштабную проблему: сравните число страниц в индексе с числом страниц в карте сайта. Если в карте полторы тысячи адресов, а в индексе десяток, вопрос закрыт — дело не в текстах.

Что делать, если содержимое живёт в скриптах

• Серверный рендеринг. Страница собирается на сервере и отдаётся роботу и человеку готовым HTML. Самое надёжное решение для проектов на современных фреймворках: содержимое попадает в первый проход, а интерактив продолжает работать в браузере. Требует работы разработчика и обычно перестройки части проекта.
• Предварительный рендеринг. Готовые HTML-версии страниц генерируются заранее и хранятся статически. Проще в реализации, подходит для сайтов, где содержимое меняется редко: услуги, статьи, небольшие каталоги. Слабое место — актуальность: если цены меняются ежедневно, статику надо пересобирать по расписанию.
• Гибридный подход. Основной текст, заголовки, ссылки и метатеги отдаются в HTML, а кодом делается только интерактив: фильтры, калькуляторы, галереи, всплывающие окна. Самый частый и самый дешёвый вариант для обычных сайтов, где фреймворк используется только ради удобства интерфейса.
• Постраничная навигация вместо бесконечной прокрутки. Либо дублирование прокрутки обычными страницами с собственными адресами, доступными по ссылке.
• Возврат содержимого из сторонних сервисов на свою сторону. Отзывы, характеристики и цены, которые важны для поиска, должны отдаваться вашим сервером, а виджет пусть остаётся дополнением.
• Сниппет

Чего делать не надо: отдавать роботу отдельную версию сайта, а человеку другую. Этот подход устарел, воспринимается как попытка обмана и создаёт больше проблем, чем решает. Правильная логика — один документ для всех, просто собранный на сервере.

Навигация и адреса: самая дорогая ошибка

Даже когда текст индексируется нормально, сайт может оставаться невидимым из-за навигации. Робот ходит по ссылкам — по тегу a с атрибутом href. Элемент, который выглядит как ссылка, но реагирует на клик обработчиком и никуда не ведёт, для обхода не существует.

Отсюда три требования, которые проверяются за пять минут:

• Каждый пункт меню, каждая карточка в списке и каждая кнопка пагинации — обычная ссылка с адресом. Проверьте: наведите курсор и посмотрите, показывает ли браузер адрес в углу окна.
• Каждая страница открывается по прямому адресу в новой вкладке. Скопируйте адрес карточки товара, откройте в чистом окне — должна открыться именно эта карточка, а не главная.
• Адрес меняется при переходах. Если вы кликаете по разделам, а строка адреса стоит на месте, у сайта одна страница вместо сотен, и никакие тексты этого не исправят.
• Сниппет

Последний пункт — характерная примета одностраничных приложений, сделанных без маршрутизации. Владелец видит полноценный каталог, поиск видит одну страницу. Лечится только доработкой: каждой сущности свой адрес, свой ответ сервера с кодом 200, свои метатеги.

Скрипты и скорость: вторая сторона вопроса

Допустим, с индексацией всё в порядке. Тяжёлый код всё равно бьёт по результату, только через другой механизм — через поведение людей. Браузер должен скачать файл, разобрать его и выполнить, и всё это время страница либо пустая, либо не реагирует на нажатия. На недорогом телефоне разбор мегабайта кода занимает секунды, и человек уходит, не увидев предложения.

Смежный материал по теме — «Мобильное SEO — влияние на продвижение сайта».

• Атрибут defer для всего, что не нужно для первой отрисовки. Это самая дешёвая мера с самым заметным эффектом.
• Загрузка по действию. Чат, карта, галерея, калькулятор подключаются, когда человек до них добрался, а не при открытии страницы.
• Отказ от лишних библиотек. Регулярная находка при разборе: целый фреймворк подключён ради одного эффекта, который делается десятью строками.
• Подключение только там, где нужно. Код формы обратной связи не нужен на карточке товара, код слайдера — на странице контактов.
• Ревизия сторонних сервисов. Каждый счётчик, виджет и пиксель тянет свою цепочку запросов к чужим доменам. Проверьте список — обычно половина подключена когда-то и давно не используется.
• Сниппет

Проверять скорость надо на мобильном соединении и на обычном телефоне, а не на рабочем компьютере с быстрым интернетом. Разница в цифрах бывает трёхкратной, и решения, принятые по «офисному» замеру, оказываются неверными.

Чем Яндекс отличается от Google в этом вопросе

Аспект	Яндекс	Google
Выполнение кода	Умеет, но не гарантирует	Выполняет регулярно
Задержка второго прохода	Может быть значительной и непредсказуемой	От часов до недель, зависит от размера сайта
Метатеги из кода	Учитываются ненадёжно	Учитываются, но с задержкой
Инструмент проверки	Проверка ответа сервера в панели вебмастера	Инспектор адреса в консоли
Практический вывод	Содержимое обязано быть в исходном HTML	Серверный рендеринг для крупных проектов

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

Чек-лист проверки: восемь пунктов, полчаса работы

1. Отключите выполнение скриптов и откройте пять типовых страниц — содержимое видно?
2. В исходном коде каждой из них найдите характерную фразу вашего текста.
3. Меню и карточки в списках сделаны обычными ссылками с адресами?
4. У каждой страницы каталога свой адрес, который открывается напрямую в чистом окне?
5. Товары ниже первой партии доступны по отдельным адресам, а не только прокруткой?
6. Метатеги присутствуют в исходном коде и различаются между страницами?
7. Инструмент проверки в панели вебмастера показывает ваше содержимое?
8. Характерная фраза находится в поиске по точной фразе в кавычках?

Если хотя бы на трёх пунктах ответ отрицательный, у сайта есть скрытая проблема с видимостью, которую не решить ни текстами, ни ссылками, ни бюджетом на продвижение. Сначала чинится это, потом всё остальное.

Что заложить в задание разработчику заранее

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

• У каждой страницы собственный адрес, открывающийся напрямую и отдающий код 200.
• Основное содержимое присутствует в исходном HTML без выполнения кода.
• Метатеги формируются на сервере, различаются по страницам и не дублируются.
• Навигация — обычные ссылки; кнопки-обработчики только там, где перехода нет.
• Пагинация каталога работает без скриптов и доступна по адресам.
• Карта сайта формируется автоматически и обновляется при изменении каталога.
• Несуществующие адреса отдают код 404, а не пустую страницу с кодом 200.
• Микроразметка товаров и организации отдаётся сервером, а не подставляется в браузере.
• Есть тестовый режим, в котором можно посмотреть страницу глазами робота.
• Сниппет

Эти пункты стоит внести в договор отдельным разделом, а приёмку проводить по ним же. Разработчик, для которого поиск не является зоной ответственности, сделает так, как ему привычнее, — и формально будет прав.

Частые вопросы

Индексирует ли Яндекс javascript? Умеет, но не гарантирует и делает это отдельным проходом с непредсказуемой задержкой. Строить продвижение на этом допущении нельзя — содержимое должно приходить в первом ответе сервера.

Если нужны детали, смотрите «Влияние слов паразитов на SEO продвижение сайта».

А Google? Справляется заметно лучше и выполняет отрисовку регулярно. Но и там это второй проход: на большом сайте очередь растягивается, и часть страниц ждёт неделями. Для крупных проектов серверный рендеринг остаётся рекомендацией и здесь.

Нужна ли отдельная версия сайта для роботов? Нет, это устаревший и рискованный подход. Правильно — один документ для всех, собранный на сервере или заранее сгенерированный.

Влияет ли количество подключённых скриптов на позиции? Напрямую нет, косвенно да — через скорость первой отрисовки и через поведение людей, которые не дожидаются загрузки.

Что делать, если сайт уже написан как одностраничное приложение? Подключать серверный рендеринг и раздавать адреса каждой сущности. Это работа разработчика, часто на несколько недель, но без неё сайт для поиска почти не существует, и любые вложения в тексты и ссылки уходят впустую.

Можно ли обойтись без переделки, если сайт небольшой? Иногда да. Если страниц несколько десятков, дешевле сгенерировать их статические версии и отдавать их, оставив интерактив как есть. Решение зависит от того, как часто меняется содержимое.

Как быстро вернётся трафик после исправления? Индексация занимает от нескольких недель до пары месяцев в зависимости от размера сайта и частоты обхода. Ускорить помогает карта сайта, отправка адресов на переобход и внутренние ссылки на новые разделы с уже посещаемых страниц.

Коротко

• Робот работает в два прохода: сначала разбирает HTML от сервера, потом, если дойдёт очередь, выполняет код. Полагаться на второй проход нельзя.
• Проверка занимает полчаса: отключите скрипты, посмотрите исходный код, сверьтесь с панелью вебмастера и поищите точную фразу.
• Навигация должна быть обычными ссылками с адресами, иначе внутренние страницы не находятся и не обходятся.
• Решения три: серверный рендеринг, предварительная генерация, гибрид с текстом в HTML и кодом только для интерактива.
• Тяжёлый код бьёт по результату и без проблем с индексацией — через скорость первой отрисовки на телефоне.
• Требования к адресам, метатегам и разметке дешевле внести в задание разработчику до старта, чем переделывать после запуска.
• Сниппет

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

5:49