JavaScript SEO: оптимізація рендерингу для пошукових систем

Оптимізація рендерингу JavaScript для пошукових роботів

Випадок: інтернет-магазин на React з 10 000 товарів — Google індексував лише 200 сторінок. Причина: контент генерувався JS, а бот не дочекався повного рендерингу. Рішення: впровадили ISR (Incremental Static Regeneration) на Next.js. Через два тижні кількість проіндексованих сторінок зросла до 8000, органічний трафік подвоївся. Ми навчилися вирішувати такі проблеми: після аудиту впроваджуємо SSR або статичну генерацію, і індексація відновлюється за кілька днів.

Google Search Central: "JavaScript SEO — це набір технік, що забезпечують індексацію контенту, створеного за допомогою JavaScript."

Googlebot обробляє JavaScript через headless Chrome (WRS — Web Rendering Service), але із затримкою: HTML індексується одразу, а JS-рендеринг потрапляє в чергу. Для SEO це означає, що контент, доступний лише після виконання JS, може затриматися на дні або тижні. Особливо критично для SPA та сайтів з динамічним контентом. Різниця в швидкості індексації між SSR і CSR може досягати 3–5 разів. Середня затримка індексації для CSR становить 2–3 тижні, для SSR — 1–2 дні.

Як Google обробляє JavaScript?

Етап 1: Crawling — Googlebot завантажує вихідний HTML.

Етап 2: Rendering queue — сторінка поміщається в чергу для JS-рендерингу. Затримка: від кількох годин до кількох тижнів.

Етап 3: Indexing after render — контент після виконання JS потрапляє в індекс.

Яндекс, Bing, DuckDuckGo рендерять JS значно гірше або взагалі не рендерять. Тому важливо заздалегідь підготувати контент для ботів.

Як діагностувати проблеми з рендерингом?

Використовуємо Google Search Console → URL Inspection → View Crawled Page. Якщо важливий контент присутній у фінальному DOM, але не індексується — проблема не в рендерингу, а в самій розмітці.

Screaming Frog з JS-рендерингом — порівнюємо HTML source з rendered DOM. Приклад скрипта для порівняння:

# Порівняти source HTML з rendered (через curl vs puppeteer) curl -s https://site.com/page | grep -c "product-title" # vs node -e "const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://site.com/page'); await page.waitForSelector('.product-title'); const count = await page.$$eval('.product-title', els => els.length); console.log(count); await browser.close(); })()" 

Чому SSR — найкращий вибір для SEO?

SSR — рендеринг сторінки на сервері, бот отримує готовий HTML без необхідності виконувати JS. Це стандарт для SEO-орієнтованих проєктів. SSR дозволяє індексувати контент у 3–5 разів швидше, ніж CSR.

Next.js:

// getServerSideProps — рендеринг на кожен запит export async function getServerSideProps({ params }) { const product = await fetchProduct(params.id) return { props: { product } } } // getStaticProps — збірка при деплої (швидше) export async function getStaticProps({ params }) { const product = await fetchProduct(params.id) return { props: { product }, revalidate: 3600 // ISR: оновлювати раз на годину } } 

SSG за інших рівних знижує навантаження на сервер у 5–10 разів порівняно з SSR.

Коли використовувати SSG?

Для контенту з нечастими оновленнями SSG дає кращу продуктивність та швидкість завантаження. Incremental Static Regeneration (ISR) дозволяє оновлювати сторінки без повної перезбірки.

Як prerendering може допомогти SPA?

Якщо SSR неможливо впровадити, prerendering генерує статичні HTML-знімки для ботів.

# nginx: віддавати prerendered HTML ботам, SPA — людям map $http_user_agent $is_bot { ~*(googlebot|bingbot|yandex|baiduspider|facebookexternalhit) 1; default 0; } server { location / { if ($is_bot = 1) { proxy_pass http://prerender-service:3000; break; } try_files $uri /index.html; } } 

Порівняння методів рендерингу

Типові проблеми та їх вирішення

Критичні правила JS SEO

Вміст у вихідному HTML важливіший за вміст у JS. Наприклад, title має бути в HTML, а не генеруватись скриптом. Посилання оформлюйте через <a href>, а не лише через onClick. Lazy loading застосовуйте тільки для зображень — текстовий контент має бути доступний одразу. Використовуйте JSON-LD для структурованих даних.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "iPhone 15 Pro", "offers": { "@type": "Offer", "price": "99999", "priceCurrency": "UAH" } } </script> 

// Lazy loading тільки для зображень, не для тексту <img src="product.jpg" loading="lazy" alt="Оптимізація JavaScript SEO"> 

Що входить у роботу?

1. Аудит поточного рендерингу та виявлення проблем з індексацією — використовуємо Search Console, Lighthouse, Puppeteer.
2. Вибір оптимального методу: SSR, SSG, ISR або prerendering — з урахуванням вашої архітектури.
3. Впровадження рішення на стеку Next.js або Nuxt.js — з налаштуванням кешування та ревалідації.
4. Оптимізація Core Web Vitals — знижуємо TBT та LCP.
5. Тестування через Google Search Console та Rich Results Test — переконуємось, що контент в індексі.
6. Документація та передача доступів.

Наш досвід — 5+ років у веб-розробці, понад 20 успішних проєктів з покращення індексації. Гарантуємо, що після впровадження контент буде індексуватися протягом тижня. Клієнти економлять на рекламі за рахунок органічного трафіку.

Терміни виконання: аудит та впровадження SSR/ISR під ключ — від 3 до 10 робочих днів. Точну оцінку дамо після аналізу вашого проєкту. Отримайте консультацію — безкоштовно оцінимо поточну ситуацію. Зв'яжіться з нами, щоб обговорити деталі. Замовте безкоштовний аудит рендерингу вашого сайту.