JavaScript SEO помогает понять, почему Google видит сайт не так, как пользователь. Узнайте, как работает рендеринг, где теряется контент и как проверить страницу.
Современный сайт часто загружает контент через JavaScript. Пользователь открывает страницу и видит товары, тексты и меню. Поисковый робот сначала получает HTML, а затем может выполнить JavaScript. Если скрипт работает с ошибкой, часть страницы может не попасть в индекс.
Разберём процесс на практике. Покажем типовые проблемы и способы проверки. В конце дадим чек-лист для технического SEO.
JavaScript SEO: как Google обрабатывает страницу
Google обрабатывает JavaScript-сайты в несколько этапов:
- Crawling — робот получает URL и загружает страницу.
- Rendering — Google запускает JavaScript и формирует DOM.
- Indexing — система анализирует полученный контент.
- Serving — подходящая страница появляется в результатах поиска.
Google прямо описывает такую модель обработки. Для рендеринга используется современная версия Chromium. При этом Google не гарантирует индексацию каждой страницы.
Что получает Google сначала
Представим страницу товара:
<div id="product"></div>
<script>
fetch('/api/product/123')
.then(response => response.json())
.then(product => {
document.querySelector('#product').innerHTML = `
<h1>${product.name}</h1>
<p>${product.description}</p>
`;
});
</script>
В исходном HTML нет названия товара. Есть только пустой контейнер.
Пользователь запускает браузер. JavaScript обращается к API. Затем скрипт добавляет данные в DOM.
Google также может выполнить этот JavaScript. Но между загрузкой HTML и рендерингом есть отдельный этап. Поэтому динамический контент требует дополнительной проверки.
Что поисковик видит после рендеринга
Главный вопрос JavaScript SEO звучит так:
Есть ли нужный контент в отрендеренном HTML?
Если после выполнения JavaScript Google получает:
<div id="product">
<h1>Профессиональный аудит сайта</h1>
<p>Проверяем техническое SEO и индексацию.</p>
</div>
поисковик может обработать этот текст.
Если контейнер остаётся пустым, ситуация другая:
<div id="product"></div>
Проблема может возникнуть из-за нескольких причин:
- ошибка JavaScript;
- недоступный API;
- блокировка ресурса;
- неправильный роутинг;
- авторизация для получения данных;
- некорректная работа браузерного API;
- ошибка в lazy loading;
- неверная обработка HTTP-статусов.
Google рекомендует проверять такие ситуации через URL Inspection и Rich Results Test. Эти инструменты показывают отрендеренный DOM и помогают находить ошибки JavaScript.
JavaScript SEO и динамический контент
Динамический контент сам по себе не является проблемой.
Google давно умеет обрабатывать JavaScript. В обновлениях документации Google отдельно уточняет, что JavaScript уже много лет используется при рендеринге страниц.
Проблема появляется, когда важный контент зависит от нестабильного сценария.
Пример: каталог интернет-магазина
Вы столкнулись с проблемой.
Категория содержит 100 товаров. Пользователь видит их после загрузки JavaScript.
Но исходный HTML содержит только:
<div id="catalog"></div>
<script src="/assets/catalog.js"></script>
Мы проверяем страницу через инструменты Google.
После рендеринга оказывается, что API возвращает ошибку. Список товаров не появляется.
Для пользователя проблема заметна сразу. Для поискового робота она означает отсутствие значительной части контента.
Как решить проблему
Есть несколько подходов:
- отдавать основной контент через сервер;
- использовать SSR;
- использовать SSG для статичных страниц;
- исправить клиентский JavaScript;
- сделать API доступным для робота;
- проверить HTTP-статусы;
- добавить корректные внутренние ссылки.
Для SEO особенно важны страницы, которые должны стабильно индексироваться. Это категории, карточки товаров, услуги и статьи.
SSR, CSR и SSG: что выбрать для SEO
Архитектура сайта влияет на процесс индексации.
| Подход | Где формируется HTML | Особенности SEO |
|---|---|---|
| CSR | В браузере | Требует проверки JavaScript |
| SSR | На сервере | Контент доступен уже в HTML |
| SSG | При сборке | Хорошо подходит для статичных страниц |
| Гибрид | Сервер + клиент | Позволяет сочетать подходы |
CSR удобен для сложных интерфейсов. Но важный контент нельзя оставлять только на клиенте без проверки.
SSR формирует HTML на сервере. Поэтому робот получает основной контент сразу.
SSG заранее создаёт страницы. Такой вариант подходит для блогов, документации и части корпоративных сайтов.
Google также отмечает пользу серверного или предварительного рендеринга. Он улучшает скорость и помогает роботам, которые не выполняют JavaScript.
Какие элементы JavaScript SEO проверять
Рендеринг касается не только текста.
Title и meta description
JavaScript может менять:
<title>...</title>
и:
<meta name="description" content="...">
Google допускает такой подход. Но для важных SEO-элементов лучше использовать предсказуемую генерацию HTML.
Canonical
Особое внимание уделите rel="canonical".
Базовый вариант:
<link
rel="canonical"
href="https://example.ru/services/seo/"
>
Google рекомендует задавать canonical в HTML. Если JavaScript меняет его, значение не должно конфликтовать с исходной страницей.
Внутренние ссылки
Поисковый робот должен находить страницы через обычные ссылки:
<a href="/services/seo/">
SEO-продвижение
</a>
Проблемный вариант выглядит иначе:
<button onclick="openService('seo')">
SEO-продвижение
</button>
Такой элемент не заменяет полноценную HTML-ссылку.
Для SPA Google рекомендует использовать URL и History API. Фрагменты вида #/catalog не подходят как надёжный способ организации отдельных страниц.
Lazy loading: когда контент пропадает из индекса
Lazy loading ускоряет загрузку страницы. Но неправильная реализация может скрыть контент от Google.
Например, скрипт загружает текст только после клика:
button.addEventListener('click', () => {
loadMoreContent();
});
На такой сценарий нельзя рассчитывать для SEO-контента.
Google не взаимодействует со страницей как обычный пользователь. Поэтому важный контент должен загружаться без обязательного клика.
Лучше использовать механизмы, которые реагируют на видимость элемента. Например, IntersectionObserver.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
loadMoreContent();
observer.disconnect();
}
});
observer.observe(document.querySelector('#more'));
После реализации всё равно нужна проверка отрендеренного HTML.
JavaScript SEO и HTTP-статусы
SPA часто создают отдельную проблему.
Пользователь открывает:
/catalog/nonexistent-product
Приложение показывает:
Товар не найден.
Но сервер отвечает:
200 OK
Получается soft 404.
Для поисковой системы URL формально существует.
Google рекомендует решать проблему через корректный серверный 404 либо через подходящий noindex для страницы ошибки.
Для SEO-архитектуры это принципиально важно.
Страница товара должна отвечать 200. Несуществующая страница должна возвращать 404.
Как проверить рендеринг JavaScript
Проверку стоит проводить по конкретным URL.
Шаг 1. Откройте исходный HTML
Посмотрите:
- есть ли
<title>; - есть ли основной
<h1>; - присутствует ли текст;
- есть ли canonical;
- доступны ли ссылки;
- подключаются ли нужные скрипты.
Важно понимать разницу между View Source и DOM после выполнения JavaScript.
Шаг 2. Проверьте URL в Google Search Console
Откройте Проверку URL.
Инструмент позволяет понять, как Google видит страницу.
Особенно важны:
- доступность URL;
- статус индексации;
- отрендерированный HTML;
- загруженные ресурсы;
- ошибки JavaScript.
Google рекомендует URL Inspection именно для диагностики JavaScript-проблем.
Шаг 3. Используйте Rich Results Test
Этот инструмент полезен для проверки отдельных страниц.
Сравните результат с тем, что видит пользователь.
Если пользователь видит текст, а в отрендеренном DOM его нет, ищите проблему в JavaScript.
Шаг 4. Проверьте ошибки браузера
Откройте DevTools.
Перейдите в Console и Network.
Ищите:
404
403
500
CORS error
Failed to fetch
Uncaught TypeError
Одна ошибка API может убрать с страницы весь основной контент.
JavaScript SEO: частые ошибки
На практике проблемы обычно повторяются.
Ошибка №1. Контент есть только после клика
Проблема: робот не получает основной текст.
Решение: отдавайте важный контент без пользовательского действия.
Ошибка №2. API закрыт от Googlebot
Проблема: JavaScript запускается, но данные не загружаются.
Решение: проверьте доступность API и сетевые ограничения.
Ошибка №3. Неправильные URL в SPA
Проблема: разные страницы используют один URL.
Решение: создайте отдельные индексируемые URL.
Ошибка №4. Soft 404
Проблема: несуществующая страница отдаёт 200.
Решение: настройте корректный 404.
Ошибка №5. SEO-метаданные меняются хаотично
Проблема: title или canonical не соответствуют URL.
Решение: определите единую логику генерации метаданных.
Ошибка №6. Контент появляется слишком поздно
Проблема: API или скрипты работают нестабильно.
Решение: сократите цепочку зависимостей. Критический контент лучше формировать на сервере.
Чек-лист JavaScript SEO
Перед публикацией страницы проверьте:
- URL отдаёт корректный HTTP-статус.
- Основной контент доступен после рендеринга.
- Есть уникальный
<title>. - Есть корректное описание страницы.
- Есть один основной
<h1>. - Canonical соответствует URL.
- Внутренние ссылки используют
<a href>. - Важный текст не появляется только после клика.
- API не блокирует загрузку контента.
- Нет критических ошибок JavaScript.
- Страница корректно работает без нестандартных браузерных API.
- Проверена версия страницы в Search Console.
- Для важных страниц сформирован sitemap.
Что делать, если Google не видит контент
Вы столкнулись с падением органического трафика. При этом пользователь видит страницу нормально.
Не начинайте сразу менять метатеги.
Сначала проверьте рендеринг.
Мы рекомендуем такой порядок:
- Сравнить исходный HTML с DOM.
- Проверить URL Inspection.
- Посмотреть ошибки JavaScript.
- Проверить API-запросы.
- Проверить robots.txt.
- Проверить
noindex. - Проверить canonical.
- Проверить HTTP-статус.
- Проверить внутренние ссылки.
- Повторно отправить URL на проверку.
Такой подход помогает найти техническую причину. Он лучше случайного изменения SEO-настроек.
Почему JavaScript SEO стоит проверять до запуска сайта
Поисковая оптимизация начинается не после публикации.
Архитектура влияет на индексацию ещё на этапе разработки.
Если проект использует React, Vue, Next.js или другой JavaScript-стек, SEO нужно учитывать заранее.
Команда разработки должна понимать:
- какие страницы должны индексироваться;
- какой контент критичен для SEO;
- как формируются URL;
- где создаётся HTML;
- как работает API;
- какие страницы возвращают
404; - как генерируются метатеги;
- как Google получает контент.
Это снижает количество переделок после запуска.
Итоги
JavaScript SEO не означает отказ от динамических технологий. Google умеет выполнять JavaScript и индексировать отрендеренный контент. Но критические страницы должны оставаться доступными для стабильного рендеринга.
Главное правило простое: проверяйте не только то, что видит пользователь, но и то, что получает поисковик.
Если сайт теряет страницы из индекса, не отображает контент или использует сложную SPA-архитектуру, специалисты студии «Компьюти» помогут провести технический аудит. Мы проверим рендеринг, индексацию, JavaScript и SEO-архитектуру. Затем подготовим список конкретных исправлений.
Обратитесь в «Компьюти», если хотите проверить JavaScript SEO до запуска или найти причину проблем с индексацией.
