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

SPA и SEO: как продвигать React/Vue-приложение?

Александр Тригуб - частный SEO-специалист
Александр Тригуб Частный SEO-специалист · с 2010 · 500+ аудитов · 1092 заказа · 4.9★

SPA на React/Vue/Angular - головная боль для SEO. Роботы видят пустой div, контент генерируется JS. Googlebot рендерит с задержкой, Яндекс - нестабильно.

SSR - основное решение

Server-Side Rendering: сервер отдаёт готовый HTML. Next.js для React, Nuxt.js для Vue. Робот получает полную страницу. Мой стандартный совет для коммерческих проектов.

SSG - для статичного контента

Страницы генерируются при сборке. Для блогов, документации, каталогов до 10 000 страниц.

Dynamic rendering - костыль

Роботам - HTML, пользователям - SPA. Google отказался от рекомендации в 2024. Только как временное решение.

Что проверить

Отключите JS в Chrome - если пусто, роботы видят то же. cache:url в Google. В Яндекс Вебмастере - «Проверить URL».

Если SPA проседает - технический аудит покажет что не индексируется.

Для SSR обязательно настройте кеширование HTML на CDN - это снизит нагрузку на сервер при индексации. Я использую Cloudflare или Varnish с TTL 1-4 часа. Проверьте, чтобы мета-теги и заголовки H1-H2 попадали в первоначальный HTML-ответ сервера (View Page Source в браузере). Для динамического контента добавьте data-seo атрибуты, которые SSR-движок подхватит при рендеринге. Например, для интернет-магазина: <ProductCard data-seo-title="{product.name} купить" />.

Если выбираете SSG, разбейте сборку на этапы при большом количестве страниц. Мой чеклист: 1) Генерация основных страниц (до 1000) в первую очередь 2) Инкрементальные сборки для обновлённого контента 3) Фоновую генерацию второстепенных страниц через очередь. Для VuePress/Gatsby добавьте плагин типа critical-css-webpack-plugin - он ускорит отрисовку контента для роботов. Проверяйте в Search Console отчёт «Эффективность» - фильтруйте по «HTML-страницам», чтобы отловить проблемы с JS-контентом.

Не нашли ответ? Спросите!

Отвечаю лично в течение 24 часов. Лучшие вопросы публикую в этом разделе.

Другие вопросы

Кто ведёт проект

Александр Тригуб - частный SEO-специалист. В поисковом маркетинге с 2010 года, предприниматель с 2001-го. Строил сайты клиентам с 2007-го - понимаю сайт изнутри, не только как продвигать, но и как он устроен. В SEO пришёл из собственного бизнеса - знаю, как устроены продажи не из учебников, а из собственной выручки и расходов.

Публичные примеры разработки: royal-pier.ru · monolitkapstroy.ru · med-expres.ru · arnikacenter.ru · kairoscity.ru

1 000+заказов · 728 отзывов 4.9★
300+сайтов разработано
500+видео-аудитов в открытом доступе
13+лет - самые долгие проекты
27+модулей аналитики и мониторинга