React

React створює віртуальне представлення сторінки в пам'яті та узгоджує зміни з реальним DOM. Сама сторінка може бути доставлена у трьох основних форматах: клієнтський рендеринг, коли браузер отримує майже порожній HTML-файл і створює контент за допомогою JavaScript; серверний рендеринг, коли сервер повертає готовий HTML на кожен запит; і генерація статичного сайту, коли готовий HTML створюється один раз під час збірки. Фреймворки, такі як Next.js та Remix, додають маршрутизацію, отримання даних і кешування поверх цих режимів. Режим, який обирає сайт, змінює те, що краулер отримує на першому байті, тому стратегія рендерингу — це рішення для пошуку та видимості в AI, а не лише перевага розробника.

Перевірте режим рендерингу для кожного важливого URL за допомогою такого інструменту, як звіт "Перевірка URL" у Google Search Console, а потім перегляньте той самий URL через краулер із вимкненим JavaScript. Якщо перегляд із вимкненим JavaScript порожній або містить мало контенту, сторінка покладається на клієнтський рендеринг, і краулер виконує додаткову роботу, щоб її побачити. Для сторінок, які мають ранжуватися або цитуватися, перенесіть основний контент, внутрішні посилання та структуровані дані у відповідь, що рендериться на сервері або попередньо рендериться. Використовуйте React для інтерактивних частин, які цього потребують, але не дозволяйте йому обмежувати доступ до слів, які ви хочете проіндексувати. Після внесення змін надішліть оновлену карту сайту (sitemap) і запитайте повторну індексацію ключових шаблонів.

Інженери зазвичай переглядають сиру HTML-відповідь за допомогою curl або команди View Source і порівнюють її з відрендереним DOM у інспекторі браузера. SEO-команди переглядають кешважений текст у Google Search Console та рендеринг у інструменті перевірки URL (URL Inspection tool), який показує відрендерений HTML, скриншот та помилки в консолі. Різниця між сирою відповіддю та відрендереним DOM є сигналом того, що за видимий контент відповідає JavaScript. Сигнали на рівні сторінки, такі як тривалий час до першого значущого відмальовування (first contentful paint), низька частка тексту в початковій відповіді та порожній View Source, є щоденними ознаками сторінки на React, з якими важко справляються пошукові роботи.

• Запуск односторінкового додатка (SPA) без попереднього рендерингу та припущення, що Google прочитає його як звичайний відвідувач, після чого спостерігається зникнення важливих сторінок із результатів пошуку.
• Розміщення описів товарів, розділів FAQ або тексту статей усередині компонентів, які монтуються лише після взаємодії з користувачем, через що перша HTML-відповідь не містить корисного тексту.
• Блокування JavaScript, CSS або файлів шрифтів у robots.txt, що заважає пошуковому роботу рендерити все, що від них залежить.
• Додавання структурованих даних за допомогою клієнтської бібліотеки, яка впроваджує JSON-LD після гідратації, через що пошуковий робот може проіндексувати слова, але не схему.
• Пошук хитрощів для гідратації до того, як виправлено основний режим рендерингу, що залишає ті самі проблеми з індексацією.

React — це бібліотека UI, а не фреймворк і не інструмент для конкретної пошукової системи. Він сам по собі не вирішує, чи буде сторінка відрендерена на сервері, чи згенерована статично, чи відрендерена в браузері; це архітектурне рішення на рівні проєкту. Він також не є сервісом рендерингу, тому сторінка React не є автоматично повільною чи швидкою, добре індексованою чи ні, просто тому, що вона використовує React. Важливо пам'ятати: те, що сервер надсилає під час першого запиту, — це те, що зчитуватимуть краулери та багато систем ШІ, а React впливає на це лише тоді, коли проєкт налаштовано на використання серверного рендерингу, генерації статичного сайту або моделі потокових серверних компонентів.

Невеликий сайт електронної комерції створив сторінку товару як додаток React з рендерингом на стороні клієнта. Початковий HTML був лише оболонкою з одним порожнім ``, а заголовок, ціна, опис та відгуки з'являлися лише після виконання JavaScript. Після тихого кварталу зі зниженням кількості показів команда перевірила URL за допомогою інструменту Google URL Inspection і побачила, що відрендерений HTML містить контент, але кеш-версія була майже порожньою. Вони перенесли шаблон товару на Next.js зі статичною генерацією, експортували структуровані дані як JSON-LD у початковій відповіді, а React залишили для галереї та кнопок додавання в кошик. Протягом кількох тижнів URL-адреси товарів повернулися до індексу та знову почали з'являтися за брендовими та небрендовими запитами.

• Початкова HTML-відповідь для важливих сторінок містить заголовок, головний заголовок, основний текст і внутрішні посилання, а не лише порожній контейнер.
• Структуровані дані присутні в початковій відповіді, а не впроваджуються після гідратації.
• robots.txt дозволяє завантаження скриптів, таблиць стилів та шрифтів, які необхідні сторінці для рендерингу.
• Сторінка рендериться та стає інтерактивною в межах показників, які відстежує ваш моніторинг.
• Карта сайту (sitemap) відображає URL-адреси, які ви хочете просканувати, а після змін було надіслано запит на переіндексацію у Search Console.

Той самий термін словами, якими про нього питають асистента, а не набирають у рядку пошуку — написано із ситуації, тому кожне питання несе ту ситуацію, з якої виникло.

• Google Search Central — Rendering JavaScript
• Google Search Central — Inspect a URL
• React
• Wikidata — Q19399674