Технический SEO

JavaScript SEO

JS SEO · Оптимизация сайтов на JavaScript

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

JavaScript SEO — это раздел технического SEO, который простыми словами отвечает за то, чтобы сайты на React, Vue или Angular корректно попадали в индекс Google. Направление оформилось после 2015 года, когда Googlebot начал рендерить JS, а массовый переход на SPA обнажил проблему: контент, собранный на клиенте, поисковик видел пустым.

Актуальность выросла с 2019 года, когда Google перевёл краулер на evergreen Chromium и подтвердил двухволновую индексацию. Что это значит для бизнеса: задержка рендера достигает нескольких дней, а Search Console и инструмент Mobile-Friendly Test показывают, что именно увидел робот.

§ 01Зачем нужен

JavaScript SEO решает разрыв между HTML, который отдаёт сервер, и DOM, который собирает браузер. Googlebot работает в две волны: сначала парсит исходный HTML, затем ставит страницу в очередь рендеринга — задержка по данным Мартина Сплитта (Google) занимает от секунд до недели. Оптимизация JS-сайтов отличается от классической: ссылки через onClick не передают вес, а контент, скрытый до взаимодействия, не индексируется.

§ 02Как настраивается

Базовый стек — SSR (Server-Side Rendering) или пререндеринг через Prerender.io, Rendertron, встроенные механизмы Next.js 14 и Nuxt 3. Для динамических страниц применяют гидратацию и Dynamic Rendering, хотя Google в 2024 году называет последний временным решением. Краулинговый бюджет (crawl budget) для JS-сайтов расходуется быстрее: каждый рендер стоит ресурсов, поэтому JavaScript SEO предписывает отдавать ботам готовый HTML.

Кейс e-commerce

индексация 38% → 92% — Интернет-магазин одежды на Next.js с 12k SKU перешёл с CSR на SSR через getServerSideProps и добавил prerender для фильтров. Доля проиндексированных URL выросла с 38% до 92% за 4 месяца. Замер через Google Search Console Coverage и логи Googlebot.

До и после

органика +63% за 8 мес — B2B SaaS-платформа на Vue 3 SPA внедрила Server-Side Rendering через Nuxt и динамический рендеринг для устаревших краулеров. Органический трафик вырос на 63% за 8 месяцев, видимость в Ahrefs +41%. Динамика по GA4 Acquisition и Ahrefs Site Explorer.

§ 03Где смотреть результат

Проверка проходит в URL Inspection Tool внутри Search Console — вкладка «Просмотреноe Google» показывает отрендеренный HTML и скриншот. Screaming Frog с режимом JavaScript Rendering эмулирует Googlebot и сравнивает raw vs rendered DOM. Что делает аудитор дополнительно: смотрит логи сервера на User-Agent Googlebot и сверяет с отчётом Coverage. Для метрики LCP ≤ 2.5 с используется CrUX и PageSpeed Insights.

§ 04Подводные камни

Частая ошибка — блокировка JS и CSS в robots.txt: робот не построит DOM и контент пропадёт. Lazy-loading без атрибута loading="lazy" и нативного IntersectionObserver скрывает изображения от индекса. Роутинг через хеш (#/page) Google игнорирует с 2015 года — нужен History API. JavaScript SEO также страдает от soft 404: SPA отдаёт код 200 на несуществующих URL, поэтому продвижение требует серверной проверки маршрутов и корректных редиректов.

Частые ошибки
01
Подмена серверного рендера клиентским по умолчанию. Команда отдаёт боту пустой HTML-каркас, а контент дорисовывается в браузере. Googlebot ставит страницу во вторую очередь рендеринга — индексация задерживается на дни, трафик проседает. Как правильно: Внедрите SSR или гибридный рендер через Next.js, Nuxt или Angular Universal. Проверяйте отдачу через curl без JS.
02
Проверка индексации только в Chrome DevTools. Разработчики смотрят DOM в браузере и считают, что бот видит то же самое. Реальный рендер Googlebot отличается — это видно только в Search Console через инструмент 'Проверка URL' и сравнение с CrUX. Как правильно: Замеряйте видимость через Search Console URL Inspection и Mobile-Friendly Test. Сравнивайте rendered HTML с исходным.
03
Установка canonical и meta robots через JS. Теги добавляются скриптом после загрузки, но Googlebot обрабатывает их в первом проходе по сырому HTML. По заявлению John Mueller (2021), директивы в JS часто игнорируются — страницы уходят из индекса. Как правильно: Указывайте canonical, robots и hreflang в исходном HTML до выполнения JS. Удалите динамическую вставку этих тегов.
Часто спрашивают

JavaScript SEO: ответы на популярные вопросы

JavaScript SEO простыми словами — что это?

+

JavaScript SEO — это набор практик, помогающих поисковикам корректно рендерить и индексировать сайты на React, Vue, Angular и других JS-фреймворках. Без такой оптимизации Googlebot видит пустой

вместо контента, а Яндекс часто не индексирует SPA вовсе.

Googlebot обрабатывает страницу в две волны: сначала HTML, затем через очередь — JS-рендеринг в Web Rendering Service на движке Chromium. Задержка между волнами достигает от нескольких часов до недели, поэтому критичный контент выносят в SSR или prerender.

Классическое техническое SEO работает с готовым HTML от сервера, а оптимизация JS-сайтов добавляет слой работы с клиентским рендерингом, гидратацией и hydration-ошибками. Дополнительно учитываются Core Web Vitals — INP и LCP, которые на SPA ухудшаются на 30–50% без оптимизации бандла.

Да, напрямую. Если робот не дождался выполнения скриптов, страница уйдёт в индекс пустой и потеряет позиции по ключам из динамического блока. По данным Onely 2024, до 25% URL на SPA-сайтах не попадают в индекс Google из-за ошибок рендеринга.

Начните с аудита: проверьте страницу через Google URL Inspection и режим ‘View rendered HTML’ в Screaming Frog. Если контент отсутствует — подключите SSR (Next.js, Nuxt) или динамический рендеринг через Prerender.io. По опыту GUSAROV, базовая настройка занимает 2–4 недели для среднего проекта.

Не нашли ответ?

Спросите Андрея Гусарова — отвечаю в течение 1-2 рабочих дней.

Нажимая, вы соглашаетесь с обработкой данных.