JavaScript SEO: індексація JS-сторінок Google

Індексація відбувається у дві хвилі

Googlebot спочатку отримує ваш сирий HTML і може майже одразу проіндексувати будь-який контент, уже присутній у цій початковій відповіді. Усе, що з'являється лише після виконання JavaScript, ставиться в чергу для другого проходу — рендерингу, — який використовує окремі ресурси й може відставати від початкового сканування від кількох секунд до, на сайті з обмеженим бюджетом сканування, значно довше. Якщо ваш контент чи внутрішні посилання існують лише після цього другого проходу, ви покладаєтеся на повільніший, менш надійний шлях до індексації взагалі.

Що насправді ламає індексацію

• Основний контент або внутрішні посилання, що відображаються лише після клієнтського запиту, без нічого суттєвого в початковому HTML.
• Контент, доступ до якого закритий дією користувача — кліком, прокручуванням, наведенням, — яку Googlebot не має причин виконувати.
• JS- чи CSS-файли, заблоковані в robots.txt, необхідні сторінці для коректного рендерингу; див. robots.txt проти noindex, як блокування може дати зворотний ефект.
• Маршрутизація на стороні клієнта, що ніколи не змінює фактичний HTTP-статус, — зламаний маршрут може відображатися порожнім або показувати повідомлення «не знайдено», продовжуючи повертати 200, що проявляється як м'який 404.
• Помилки гідратації чи рендерингу, що трапляються лише в середовищі headless-браузера і залишаються непоміченими при звичайному ручному тестуванні.

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

Інструмент перевірки URL-адрес Search Console має вигляд «Перевірена сторінка», що показує відрендерений HTML і знімок екрана після роботи рендерера Google — а не лише сиру відповідь. Порівняйте це з вихідним HTML: якщо критичний контент чи посилання відсутні в сирій відповіді, але присутні після рендерингу, ви повністю покладаєтеся на чергу рендерингу, а не на швидке початкове сканування.

Що справді допомагає

• Рендерте на сервері (або генеруйте статично) контент і навігаційні посилання, важливі для SEO, замість отримання їх на стороні клієнта після завантаження.
• Використовуйте справжні елементи <a href> для внутрішніх посилань, а не обробники кліків на елементах, що не є посиланнями, — Googlebot переходить за href-атрибутами, а не за довільними прив'язками подій JavaScript.
• Не блокуйте JS/CSS-пакети, від яких залежить рендеринг сторінки, — Google має отримати їх, щоб узагалі відрендерити сторінку.
• Коли сторінку виправлено, не просто чекайте на наступний прохід рендерингу — запросіть повторну індексацію напряму або надішліть URL-адресу через IndexNow, щоб виправлену версію було враховано за вашим графіком, а не графіком черги рендерингу.

Нотатки щодо окремих фреймворків

• Клієнтські застосунки на React: звичайний односторінковий застосунок надсилає майже порожню HTML-оболонку. Для сторінок, які мають ранжуватися, використовуйте фреймворк із серверним рендерингом або статичною генерацією.
• Next.js і Nuxt: серверний рендеринг і статична генерація за замовчуванням розміщують контент у початковому HTML. Стежте за важливим контентом, який завантажується лише в клієнтських ефектах.
• Angular і Vue: використовуйте серверний рендеринг Angular або Nuxt для Vue, щоб сторінки надходили з контентом, уже присутнім у HTML.
• Нескінченне прокручування: поєднуйте його з пагінованими URL-адресами, що завантажуються самостійно, щоб сканери могли дістатися елементів за межами першого екрана.

Швидкий тест, який можна провести сьогодні

Відкрийте сторінку, виберіть View Page Source (а не Inspect) і знайдіть речення з основного контенту та кілька URL-адрес внутрішніх посилань. Якщо у вихідному коді їх немає, вони залежать від JavaScript. Потім запустіть безкоштовну перевірку можливості індексації, щоб переконатися, що сторінка повертає 200, не позначена як noindex і має правильний канонічний тег.