Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
If you look at the example site below, when you click on any page in the menu, the content and url on the site changes, but the page is not refreshed. They probably do this feature with AJAX.
My question is, would something like this hurt SEO? The site I gave an example is not a site that already does SEO work. If it doesn't hurt SEO, I'm considering adding it to my own website. It contributes to the user experience, but I was undecided about SEO.
This setup is generally called a "single page app" setup. If done properly, it can have no negative impact on SEO. If done improperly, in some cases it could cause your website to drop from search engine indexes completely.
It's difficult to get this type of setup working properly without an external tool or library, but there are many great choices for libraries. The Wikipedia page for Single Page Application has a lot more detail on how they work, as well as a list of common libraries used for implementing them.
If you do decide to make your website into a single page application like this, make sure it follows SEO best practices such as using simple code to make pages load as efficiently as possible to crawlers such as Googlebot, and updating the URL bar with History.pushState() whenever the user clicks a link to load new content. There's also this article from Search Engine Journal that goes into more detail about how to make sure your SPA is properly optimized for SEO.
If it is implemented well, it won't hurt SEO.
When all URL changes are done onclick it might be tempting to no longer using <a href links in your pages. However, doing that would make your pages uncrawlable. To implement the feature while supporting search engine crawlers your links would have to look like normal links in the source code but have an on-click that changes the page and prevents the default navigation. Something like:
<a href="/foo.html" onclick="showfoo(); return false;">Foo</a>
showfoo would load the correct content into the page and using History.pushState() to change the URL for the user without fully loading the new page. The return false; prevents the browser from handling the href on its own.
You would also need to make sure that if you type http://example.com/foo.html into your browser, the correct page and content loads. Even when users don't navigate to that URL from within your website, you need to support search engine visitors that come into that URL directly.
JavaScript based navigation is often accompanied by entire pages built with JavaScript using frameworks like Angular and React. Building entire pages with JavaScript comes with its own set of SEO pitfalls. Only Googlebot is advanced enough to crawl such sites. Other search engines like Bing, Yandex, and Baidu won't be able to index your site at all. (That isn't necessarily a deal breaker because Google owns 90+% of the search market.)
However, even for Googlebot there are some gotchas:
