JavaScript SEO: как рендеринг ломает индексацию и рост

Проблема не в React и не в Vue — проблема в паттерне: критичный SEO-контент недоступен в исходном HTML и появляется только после JavaScript-рендеринга, который бот может не выполнить.

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

Как Googlebot обрабатывает JavaScript

Googlebot понимает JavaScript. Но не так, как браузер пользователя, и не мгновенно.

Упрощённая модель процесса:

WRS и Яндекс: рендеринг JS на стороне бота

Здесь важно понять одно: поисковая система физически не может увидеть JS-контент в момент краулинга. Рендеринг — отдельный этап, который происходит асинхронно и не гарантирован при каждом обходе.

CSR, SSR, ISR — какой режим когда выбирать

Топ-5 паттернов, которые ломают JS SEO

Таблица диагностики: симптом → причина → что проверить

Три шага диагностики + код для консоли

Простой тест для проверки расхождения между ботом и пользователем. Никакого специального инструмента не нужно:

Код диагностики рендеринга для консоли браузера

Запускать в DevTools (F12 → Console). Показывает состояние страницы в текущем режиме — отдельно для ПК и мобильной версии. Для сравнения: откройте DevTools → Toggle Device Toolbar (Ctrl+Shift+M), переключитесь на мобильный UA, перезагрузите страницу и запустите снова. Разница в количестве текста, ссылок, H2 — это и есть проблема мобильного индекса.

Рендер-диагностика: ПК vs Мобильная — вставить в Console (F12)(function(){
  const W = window, D = document;
  const vw = W.innerWidth, vh = W.innerHeight;
  const ua = navigator.userAgent;
  const isMobile = /Mobile|Android|iPhone|iPad/i.test(ua);

  // ── Мета-теги ────────────────────────────────────────────────────────────
  const h1 = D.querySelector('h1');
  const h2s = D.querySelectorAll('h2');
  const title = D.title;
  const desc = D.querySelector('meta[name="description"]');
  const canonical = D.querySelector('link[rel="canonical"]');
  const robots = D.querySelector('meta[name="robots"]');
  const viewport = D.querySelector('meta[name="viewport"]');

  // ── Контент ──────────────────────────────────────────────────────────────
  const allText = D.body ? D.body.innerText.trim().length : 0;
  const lazyImgs = D.querySelectorAll('img[loading="lazy"],img[data-src]').length;
  const allImgs = D.querySelectorAll('img').length;

  // ── JSON-LD ──────────────────────────────────────────────────────────────
  const ldScripts = D.querySelectorAll('script[type="application/ld+json"]');
  const ldTypes = [];
  ldScripts.forEach(s => {
    try {
      const data = JSON.parse(s.textContent);
      const t = data['@type'] || (data['@graph'] && data['@graph'].map(x=>x['@type']).join('+'));
      if(t) ldTypes.push(t);
    } catch(e){}
  });

  // ── Ссылки ───────────────────────────────────────────────────────────────
  const links = D.querySelectorAll('a[href]');
  const internal = Array.from(links).filter(a => a.href.startsWith(location.origin)).length;
  const external = links.length - internal;

  // ── CSR-детекция ─────────────────────────────────────────────────────────
  const csrMark = ['#root','#app','#__nuxt','app-root'].some(m => D.querySelector(m));

  // ── Производительность ───────────────────────────────────────────────────
  let renderMs = 'н/д';
  if(W.performance && W.performance.timing) {
    const t = W.performance.timing;
    renderMs = (t.domComplete - t.navigationStart) + ' мс';
  }

  // ── Медиа-брейкпоинт ────────────────────────────────────────────────────
  const bp = vw <= 480 ? 'small-mobile ≤480px'
           : vw <= 640 ? 'mobile ≤640px'
           : vw <= 768 ? 'tablet ≤768px'
           : 'desktop >768px';

  // ── Вывод ────────────────────────────────────────────────────────────────
  const mode = isMobile ? '📱 МОБИЛЬНЫЙ' : '🖥  ПК';
  console.group(`%c🔍 РЕНДЕР [${mode}] [${vw}×${vh}px] ${bp}`,
    'font-size:13px;font-weight:bold;color:#2dd4a8');

  console.group('📄 Мета');
  console.log('Title:', `"${title}"`, `(${title.length} симв.)`);
  console.log('H1:', h1 ? `"${h1.innerText.trim().slice(0,80)}"` : '❌ НЕТ H1');
  console.log('H2:', h2s.length, '|', Array.from(h2s).map(h=>h.innerText.trim().slice(0,40)));
  console.log('Description:', desc ? desc.content.slice(0,100) : '❌ НЕТ');
  console.log('Canonical:', canonical ? canonical.href : '❌ НЕТ');
  console.log('Robots:', robots ? robots.content : '(не задан)');
  console.log('Viewport:', viewport ? '✅ ' + viewport.content : '❌ НЕТ — проблема на мобильных');
  console.groupEnd();

  console.group('🖼 Контент');
  console.log('Текст:', allText + ' симв.' + (allText < 500 ? ' ⚠️ МАЛО — возможно CSR без рендеринга' : ' ✅'));
  console.log('Изображений:', allImgs, '| lazy:', lazyImgs);
  console.groupEnd();

  console.group('🔗 Ссылки');
  console.log('Внутренние:', internal, '| Внешние:', external);
  console.groupEnd();

  console.group('🤖 JS / CSR');
  console.log('CSR-маркеры:', csrMark ? '⚠️ ОБНАРУЖЕНЫ (#root/#app) — проверьте View Source' : '✅ не найдены');
  console.log('Время рендеринга:', renderMs);
  console.groupEnd();

  console.group('📊 Schema.org JSON-LD');
  console.log(ldScripts.length + ' блоков | Типы:', ldTypes.join(', ') || '❌ нет');
  console.groupEnd();

  console.group('📐 Адаптивность');
  console.log('Брейкпоинт:', bp);
  console.log('%c💡 Для сравнения ПК vs Мобильный:', 'color:#ffd166');
  console.log('%c   F12 → Ctrl+Shift+M → выберите iPhone/Pixel → перезагрузите → запустите снова', 'color:#ffd166');
  console.log('%c   Сравните: текст, ссылки, H2 — разница = проблема мобильного индекса', 'color:#ffd166');
  console.groupEnd();

  console.groupEnd();
})();

Приоритетный план исправлений

Кириченко Станислав

20+ лет в SEO, сложные технические аудиты, second opinion, AI-автоматизация · Подробнее обо мне