Стисло

У 2026 Googlebot виконує JavaScript, але більшість AI-краулерів (ChatGPT, Perplexity, Claude) — ні. Щоб бути видимим і в пошуку, і у відповідях ШІ, віддавайте основний контент у серверному HTML, а не покладайтеся на клієнтський рендеринг.

Десять років питання JavaScript SEO звучало просто: "Чи відрендерить Googlebot мою сторінку?" У 2026 в нього з'явилася друга половина, не менш важлива: "А AI-краулери зможуть?" І для більшості з них відповідь — ні. Ось як насправді працює рендеринг зараз і що з цим робити.

Розрив у рендерингу між Google та AI-краулерами

Googlebot рендерить JavaScript. Він бере ваш HTML, ставить сторінку в чергу, запускає сучасний Chromium і індексує отриманий DOM. Цей двоетапний процес надійний уже роками, тож добре зроблений клієнтський застосунок може ранжуватися у звичайному пошуку Google.

З AI-краулерами історія інша. Боти, що живлять ChatGPT, Perplexity, Claude і власні AI-системи Google, здебільшого беруть сирий HTML і не виконують JavaScript. Їх створено для швидкості й масштабу на мільярдах URL, а запускати повноцінний браузер для кожної — дорого. Тож вони читають те, що віддає сервер, і рухаються далі.

Це створює розрив у рендерингу. Сторінка, яку Googlebot терпляче рендерить, може виглядати цілком порожньою для LLM-краулера. Якщо ваш контент, заголовки й посилання існують лише після виконання JavaScript, ви можете ранжуватися в Google, але бути невидимими у відповідях ШІ — саме там, де видимість у 2026 зростає найшвидше.

Дві родини краулерів, які варто розрізняти:

  • Краулери навчання/індексації (наприклад, GPTBot, ClaudeBot), що збирають контент для моделей і пошуку.
  • Живі retrieval-фетчери, що тягнуть сторінку в реальному часі для конкретного запиту. Вони найнетерплячіші з усіх і майже ніколи не чекають рендерингу.

SSR проти CSR: обирайте безпечний варіант за замовчуванням

Вибір архітектури вирішує, чи переживе ваш контент цей розрив.

  • Клієнтський рендеринг (CSR). Сервер віддає майже порожню HTML-оболонку плюс JavaScript-бандл; сторінку будує браузер. Чудово для інтерактивності рівня застосунку, небезпечно для доступності краулерам. Боти без рендерингу бачать порожню оболонку.
  • Серверний рендеринг (SSR). Сервер повертає повністю сформований HTML на кожен запит, а JavaScript потім гідратує його для інтерактивності. Кожен краулер одразу отримує контент.
  • Статична генерація (SSG). Сторінки пререндерені в HTML на етапі збірки. Найшвидший і найдружніший до краулерів варіант для контенту, що не змінюється щозапиту.

Моя рекомендація за замовчуванням пряма: віддавайте основний контент у початковому HTML, через SSR або SSG. Чистий CSR лишайте для справді інтерактивних, залогінених чи неіндексованих поверхонь. Якщо ваша цінність — це контент і ви хочете бачити його у відповідях ШІ, він має бути в HTML, який віддає сервер.

Пастки гідратації, що тихо ламають вам усе

Навіть команди, що впровадили SSR, спотикаються об гідратацію — крок, де клієнтський JavaScript "перебирає" серверний HTML. Стежте за таким:

  • Контент, що з'являється лише після гідратації. Якщо вкладки, акордеони чи блоки "читати далі" підвантажують справжній текст через JavaScript, краулери без рендерингу його не бачать. Кладіть повний текст у серверний HTML і керуйте видимістю через CSS.
  • Розбіжності гідратації. Коли серверний і клієнтський HTML не збігаються, деякі фреймворки відкидають серверну розмітку й перерендерюють на клієнті, на мить відтворюючи проблему CSR. Тримайте вивід сервера і клієнта ідентичним.
  • Крайні випадки стрімінгу й часткової гідратації. Сучасні фреймворки стрімлять HTML частинами. Переконайтеся, що змістовний контент іде в початковому документі, а не в асинхронному блоці, що прибуває пізно.
  • Клієнтська маршрутизація. Якщо внутрішня навігація відбувається повністю в JavaScript без справжніх <a href>, краулери не можуть за нею йти. Завжди рендеріть справжні теги-якорі з реальними URL.

Зробіть контент доступним для обох

Практичний чекліст, який я застосовую до кожного насиченого JavaScript сайту:

  1. Кладіть основний контент на сервер. Головний текст, H1–H3, деталі товару й внутрішні посилання мають бути в сирому HTML.
  2. Використовуйте справжні посилання. <a href="/real-url">, а не <div onclick>. Саме так і Google, і LLM-краулери знаходять ваш сайт.
  3. Рендеріть метадані на сервері. Title, meta description, canonical і структуровані дані (JSON-LD) мають бути присутні без JavaScript.
  4. Не блокуйте ресурси в robots.txt. Якщо ви покладаєтеся на рендеринг Googlebot, йому потрібні ваші CSS і JS. Блокування ламає рендер.
  5. Додавайте структуровані дані. Розмітка Schema.org допомагає кожному парсеру, а чистий, добре розмічений HTML — це те, що LLM витягують найнадійніше.
  6. Слідкуйте за доступом краулерів. Свідомо вирішуйте, чи пускати AI-краулерів. Блокування їх у robots.txt — це компроміс щодо видимості, а не нейтральний вибір за замовчуванням.

Як перевірити, що краулери справді бачать

Перестаньте довіряти рендереному вигляду в DevTools. Він показує DOM після JavaScript — те, що бачить Googlebot, але не сирі фетчери. Натомість:

  • Дивіться сирий код. Використовуйте curl -A "Mozilla/5.0" https://yoursite.com/page або Переглянути код сторінки в браузері (не Inspect). Переконайтеся, що ваш основний текст, заголовки й посилання присутні в цьому HTML.
  • Порівнюйте з рендереним DOM. Різниця між сирим кодом і рендереним DOM — це саме те, що пропускають краулери, залежні від JavaScript.
  • Використовуйте інструмент перевірки URL у Search Console, щоб побачити рендерений HTML Googlebot, і вимкніть JavaScript у браузері, щоб зімітувати бота без рендерингу.
  • Перевіряйте логи сервера на user-agent AI-краулерів, щоб дізнатися, хто вас справді фетчить і як часто.

Розрив між "Переглянути код" і рендереним DOM — це ваш ризик видимості в ШІ в одному вимірі. Якщо ваш контент живе лише в рендереному DOM, у вас є над чим працювати.

Що робити з наявним CSR-сайтом

Не кожна команда може переписати застосунок за квартал. Якщо ви вже на важкому клієнтському рендерингу, у вас є прагматичні проміжні кроки:

  • Динамічний рендеринг для ботів. Віддавайте краулерам пререндерений HTML, а користувачам — звичний застосунок. Google колись називав це обхідним рішенням, але для видимості в ШІ це часто рятує ситуацію, поки триває міграція.
  • Гібридний рендеринг за маршрутами. Переведіть на SSR або SSG спершу найважливіші контентні шаблони — головну, категорії, статті, — а панель керування чи особистий кабінет лишіть на CSR.
  • Прегенерація ключових сторінок. Навіть простий білд-крок, що зберігає статичний HTML для топових URL, робить їх доступними кожному краулеру.
  • Пріоритезація за цінністю. Почніть зі сторінок, які приносять трафік і фігурують у запитах, де ви хочете з'являтися у відповідях ШІ. Не мігруйте все одразу.

Мета — не архітектурна чистота, а те, щоб ваш справжній контент опинився в початковому HTML там, де це приносить гроші.

Головний висновок

У 2026 рендеринг більше не турбота лише Google. Googlebot виконає ваш JavaScript, але AI-краулери, що вирішують, чи з'явитеся ви у відповідях ChatGPT і Perplexity, зазвичай ні. Віддавайте справжній контент у серверному HTML, використовуйте справжні посилання й серверні метадані та тестуйте через "Переглянути код", а не DevTools. Зробіть це — і ви будете зрозумілими кожній системі, що має значення, а не лише тій, яка випадково запускає браузер.

FAQ

Чи виконують AI-краулери JavaScript у 2026?

Здебільшого ні. Googlebot рендерить JavaScript, але краулери ChatGPT, Perplexity і Claude зазвичай беруть сирий HTML і пропускають клієнтський рендеринг. Контент, що з'являється лише після виконання JS, часто для них невидимий.

Що краще для SEO та видимості в ШІ — SSR чи CSR?

Серверний рендеринг (SSR) або статична генерація безпечніші, бо повний контент є в початковому HTML для кожного краулера. Клієнтський рендеринг (CSR) ризикує порожніми сторінками для ботів без JS, зокрема більшості LLM-краулерів.

Як перевірити, чи контент доступний без JavaScript?

Дивіться сирий HTML через curl або "Переглянути код сторінки" у браузері, а не рендерений DOM у DevTools. Якщо основний текст, посилання й заголовки відсутні в цьому коді, краулери без JS їх не бачать.

Коментарі · 0