Single-page application

Single-page application надає мінімальну HTML-оболонку і покладається на JavaScript для отримання даних та оновлення DOM. Коли користувач натискає на посилання, SPA перехоплює навігацію, запитує лише потрібні дані (часто JSON) і повторно відображає вигляд у браузері. Це створює швидкий досвід роботи, схожий на додаток. Для пошукових систем початковий HTML часто містить мало контенту або не містить його зовсім. Краулер, який не виконує JavaScript, побачить порожню сторінку. Сучасні краулери, такі як Googlebot, виконують JavaScript, але роблять це у другій хвилі, що може затримати індексацію. Головне — контент не знаходиться у сирому HTML; він з'являється лише після виконання JavaScript.

Зробіть контент доступним без необхідності виконання JavaScript. Найнадійніший підхід — рендеринг на стороні сервера (SSR) або статична генерація: сервер повертає повністю відрендерений HTML. Якщо це неможливо, використовуйте динамічний рендеринг: надавайте статичний знімок ботам, а SPA — користувачам. Як альтернативу, переконайтеся, що ваша SPA використовує History API для маршрутизації, а не хеш-фрагменти, і що весь важливий контент включений у початкову HTML-паку. Перевірте за допомогою інструмента Google URL Inspection, щоб побачити, що бачить Googlebot. Також уникайте блокування JavaScript-файлів у robots.txt; краулери потребують їх для рендерингу.

Перевірте інструмент URL Inspection у Google Search Console: він показує відрендерений HTML, який бачить Googlebot. Якщо відрендерений HTML містить ваш контент, у вас все гаразд. Також перегляньте звіт «Покриття» (Coverage) на наявність проблем з індексацією. Ще один сигнал — чи з'являються ваші сторінки в результатах пошуку за цільовими ключовими словами. Якщо ні, і сторінка є SPA, то причиною, швидше за все, є рендеринг. Ви також можете скористатися функцією «Переглянути як Googlebot» (тепер це частина URL Inspection), щоб побачити відрендерену сторінку. Для швидкої перевірки вимкніть JavaScript у своєму браузері та завантажте сторінку; якщо контент відсутній, у вас є проблема.

• Припущення, що Googlebot не виконує JavaScript — він виконує, але лише після черги, тому поява контенту може затримуватися.
• Використання маршрутизації на основі хешу (#/page) замість History API; хеші не розглядаються як окремі URL.
• Блокування JavaScript або CSS-файлів у robots.txt, що перешкоджає рендерингу.
• Покладання на клієнтський рендеринг для контенту, якого немає в початковому HTML.
• Ігнорування динамічного оновлення `` та meta description для кожного маршруту.

SPA — це не те саме, що progressive web app (PWA), хоча PWA може бути SPA. Також не кожному SPA потрібен спеціальний підхід: якщо контент є статичним і включений у початковий HTML, це нормально. Проблеми виникають, коли контент завантажується асинхронно після взаємодії з користувачем або коли сторінка використовує клієнтську маршрутизацію. SPAs часто плутають із multi-page applications (MPAs), оскільки обидва типи можуть мати кілька URL. Різниця полягає в тому, що SPA не запитує новий HTML-документ для кожного маршруту; вона перезаписує поточний. Ця відмінність важлива для SEO, оскільки кожен маршрут в SPA має бути окремим URL, який повертає той самий HTML-каркас.

Уявіть собі e-commerce SPA, яка завантажує сторінку товару. Початковий HTML містить лише хедер і футер. Назва товару, опис і ціна завантажуються через API та вставляються в DOM через кілька секунд. Googlebot рендерить сторінку, але контент відсутній у початковому HTML. Щоб виправити це, ви можете впровадити server-side rendering для сторінки товару: сервер повертає повний HTML із деталями товару. Тепер Googlebot бачить контент одразу, і сторінку можна індексувати. Як альтернативу, ви можете використовувати dynamic rendering, щоб надавати ботам статичний HTML-знімок.

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

• Google Search Central - JavaScript SEO basics