Does changing a link without refreshing the page affect SEO?

Question

I would like to understand whether changing a website's link without refreshing will allow web crawlers to effectively parse my page, and aid in SEO.

I have a website, with a dropdown menu where you are able to toggle between options. In my case, you are able to choose a company from the dropdown provided.

I have briefly looked at competitors SEO ranked pages, and many of them are of individual company pages e.g. www.example.com/companies/apple and www.example.com/companies/google.

My issue now is that I don't link to a new page when the company is changed, but rather refresh the existing data. As such, my URL is the same and I cannot rank for specific company pages.

I am planning to use a push state to update my link without refreshing the page, from https://stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page

Will this allow crawlers to split my pages up and rank each independently? Additionally, are there any issues that I might face, or problems with my idea?

I came across this post Does it hurt SEO to change the URL and content without refreshing the page?, and if I understand correctly, using History.pushstate() will treat the new URL as a new page? One consideration is that unlike the links being embedded like in the above post, my links are only updated upon dropdown change (which I'm not sure crawlers are capable of parsing).

Answer 1

Using the History api is the preferred method to create routing between different views of an SPA. It will ensure that link URLs are accessible to Googlebot. I suspect this is true for other search engines as well, but can't say for certain.

Here's an example of best practice from Google's docs on JavaScript SEO basics:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Regarding your question:

Will this allow crawlers to split my pages up and rank each independently?

What I can say for certain is that doing this will allow Googlebot to find and crawl through links on your pages. I can't say how the ranking systems at Google, or other search engines, will decide to rank them.

Answer 2

Having different URLs for different content is a must for SEO. When you update the content dynamically, you can use pushState to change the URL for users. However that isn't sufficient for SEO. Changing the URL for users using pushState is actually a secondary SEO concern. It lets users link to the URL (which improves SEO in the long run) but it doesn't help search engine bots crawl the site.

Search engine bots don't actually interact with the page and will never trigger the URL change. Search engine bots don't click, scroll, type, or use drop down menus. All they do is scan the DOM for links and add them to the crawl queue. In other words, you must use links to all URLs for search engines even if users load that content in the current page with JavaScript and have the URL changed with pushState.

You also have to make sure that when one of the deep URLs is visited directly, the correct content for that URL loads into the page. Preferably with server side rendering because client side rendering is not supported by search engine bots other than Googlebot and even Googlebot takes a lot longer with client side rendering.

One way to implement that is to have your drop down list's HTML look like the <nav> example in Mike Ciffone's answer. Search engine bots will find the URLs and JavaScript intercepts users' clicks and loads the content in the current page then uses pushState to change the URL for the user.

Answer 3

Doing as you suggest with the history API is great for your users, they can bookmark and share those pages, assuming your site responds with the expected information when loading those pages. The search engines won't notice however unless there are also some links somewhere to those pages.

One way to address that without changing too much of the rest of your site would be to create a sitemap.xml file that does link to all the options in the drop-down, and then spiders will crawl those pages as well even though there are no visible links to them.

Depending on how you've built the drop-down menu, it's possible that the mark up looks enough like a URL that the crawlers are finding and spidering them already, what do your server logs say?