Is it OK for SEO to make content available via AJAX when users click, but also to load that content on its own URL?

Question

I'm working on a website and I want to use AJAX for some content, but I'm worried about search engines crawling my site, and I know Google and other search engines only see contents that are currently in the DOM.

What if I use AJAX but the contents also will be available in DOM after requests?

For example, I have a link called "Article 234" with the URL: https://example.com/?p=234. When the client clicks on the button it will load the contents from that article with AJAX but also if the user opens that URL sees the content, is it OK?

Something like this:

$("#article-234").click(e => {
    // Not redirecting
    e.preventDefault();

    // Instead, get content with ajax
    loadAjax(234);
});

Answer 1

You are implementing this the correct way. Googlebot indexes what in on the page when it loads, before any user interaction. In fact, Googlebot never simulates any user interaction at all. Googlebot never clicks, scrolls, moves the mouse, or types. Anything that isn't in the DOM when the page loads is effectively invisible to Googlebot.

Googlebot will scan the DOM and looks for links to crawl, so the way that it navigates to other pages is similar to the navigation of a user without JavaScript. Your onclick event gets ignored by Googlebot, even though Googlebot can execute JavaScript to build the page.

So as long as your DOM has <a href=/?p=234 id=article-234>Article 234</a> in it, Googlebot will be able to crawl and index that link. It won't get confused that users could load that content with AJAX, because Googlebot will never do that itself.