AJAX

01How AJAX works

AJAX relies on the XMLHttpRequest object or the newer fetch API to make HTTP requests in the background. When the request finishes, a callback processes the response—often JSON or HTML—and updates the Document Object Model (DOM) to show new content. Because the request is asynchronous, the browser can continue to run other scripts and keep the page interactive while waiting for the server.

02What to do about AJAX this week

First, audit your site for AJAX‑loaded content that should be indexable, such as product details or article bodies. Second, ensure that the same content is available in the initial HTML or can be rendered by Googlebot via server‑side rendering or dynamic rendering. Third, use the History API (pushState/replaceState) to update the URL when AJAX changes the view, so users can bookmark and share the state. Fourth, test the rendered output with the URL Inspection tool in Google Search Console to confirm Google sees the content. Finally, add a noscript fallback that links to a static version of the page for browsers or crawlers that cannot execute JavaScript.

03How to notice or measure AJAX usage

Open Chrome DevTools, go to the Network tab, and filter by XHR or fetch to see background requests triggered by user actions. Look for request payloads and responses that contain the content you expect to appear on the page. In Google Search Console, use the URL Inspection tool and click “View tested page” to see the rendered DOM; compare it with the initial HTML to spot AJAX‑filled sections. You can also run a site audit with tools like Screaming Frog and enable JavaScript rendering to see which elements appear only after scripts execute.

04Common mistakes

• Blocking JavaScript or AJAX URLs in robots.txt, which prevents Googlebot from seeing the content
• Relying solely on AJAX to load essential information such as prices or product descriptions without a fallback
• Using hashbang (#!) URLs for state changes without providing equivalent pushState URLs
• Updating the DOM but not changing the browser URL, making the state unbookmarkable
• Assuming that AJAX calls are instantly indexed; remember that Google must render the page first

05Limits and confusions

AJAX itself is not a ranking factor; it only affects how content is delivered. It is often confused with Single‑Page Applications (SPAs), but an SPA is a broader architecture that may use AJAX for navigation, whereas AJAX can be used in traditional multi‑page sites. AJAX does not replace server‑side rendering; if the initial HTML lacks critical content, Google may still miss it despite AJAX. Additionally, AJAX cannot be used to set cookies or modify response headers that affect caching unless the server explicitly allows it.

06Worked example

The snippet below shows a fetch request that loads the latest comments for an article and inserts them into the page.

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);
});
});

Frequently asked questions

More in SEO