AJAX

AJAX покладається на об'єкт XMLHttpRequest або новіший fetch API для виконання HTTP-запитів у фоновому режимі. Коли запит завершується, функція зворотного виклику обробляє відповідь — часто у форматі JSON або HTML — і оновлює об'єктну модель документа (DOM), щоб показати новий вміст. Оскільки запит є асинхронним, браузер може продовжувати виконувати інші скрипти та підтримувати інтерактивність сторінки, поки чекає на відповідь сервера.

По-перше, проведіть аудит сайту на наявність контенту, завантажуваного через AJAX, який має бути індексованим, наприклад, деталі товарів або текст статей. По-друге, переконайтеся, що цей самий контент доступний у початковому HTML або може бути відрендерений Googlebot за допомогою серверного рендерингу (server-side rendering) або динамічного рендерингу. По-третє, використовуйте History API (pushState/replaceState), щоб оновлювати URL, коли AJAX змінює вигляд сторінки, щоб користувачі могли додавати сторінку в закладки та ділитися нею. По-четверте, перевірте відрендерений результат за допомогою інструмента URL Inspection у Google Search Console, щоб підтвердити, що Google бачить контент. Нарешті, додайте запасний варіант noscript, який посилається на статичну версію сторінки для браузерів або краулерів, які не можуть виконувати JavaScript.

Відкрийте Chrome DevTools, перейдіть на вкладку Network і відфільтруйте за XHR або fetch, щоб побачити фонові запити, які запускаються діями користувача. Шукайте дані запитів та відповіді, які містять контент, що має з'явитися на сторінці. У Google Search Console скористайтеся інструментом URL Inspection і натисніть “View tested page”, щоб побачити відрендерений DOM; порівняйте його з початковим HTML, щоб знайти розділи, заповнені через AJAX. Ви також можете провести аудит сайту за допомогою таких інструментів, як Screaming Frog, і увімкнути рендеринг JavaScript, щоб побачити, які елементи з'являються лише після виконання скриптів.

• Блокування JavaScript або AJAX URL у robots.txt, що заважає Googlebot бачити контент
• Використання лише AJAX для завантаження важливої інформації, такої як ціни або описи товарів, без резервного варіанту
• Використання URL-адрес із hashbang (#!) для зміни стану без надання еквівалентних pushState URL-адрес
• Оновлення DOM без зміни URL-адреси браузера, що робить стан неможливим для збереження в закладках
• Припущення, що AJAX-запити індексуються миттєво; пам'ятайте, що Google спочатку має відрендерити сторінку

Сам по собі AJAX не є фактором ранжування; він впливає лише на те, як доставляється контент. Його часто плутають із Single‑Page Applications (SPA), але SPA — це ширша архітектура, яка може використовувати AJAX для навігації, тоді як AJAX можна використовувати на традиційних багатосторінкових сайтах. AJAX не замінює рендеринг на стороні сервера; якщо початковий HTML не містить критично важливого контенту, Google все одно може його пропустити, попри AJAX. Крім того, AJAX не можна використовувати для встановлення cookies або зміни заголовків відповіді, що впливають на кешування, якщо сервер явно не дозволяє цього.

Наведений нижче фрагмент коду демонструє запит fetch, який завантажує останні коментарі до статті та вставляє їх на сторінку.

fetch('/api/comments?articleId=23')
.then(r => r.json())
.then(data => {
const list = document.getElementById('comments');
list.innerHTML = '';
data.forEach(c => {
const li = document.createElement('li');
li.textContent = c.text;
list.appendChild(li);
});
});

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

• Google Search Central – JavaScript SEO