Are there any SEO （search engine optimization） issues with using useRouter without Link component?

[gonta1026]

Summary

It is explained that we should not use JavaScript to make screen transitions, but we would like to check if there are any SEO issues if we use the useRouter provided by Next.js to make screen transitions.

「Link best practices for Google」states that screen transitions using JavaScript are not recommended.

Additional information

### reference

- https://developers.google.com/search/docs/crawling-indexing/links-crawlable?hl=en
- https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=en
- https://nextjs.org/docs/pages/api-reference/functions/use-router

Example

No response

[makibat]

Yes, router.push('/example') does perform client-side navigation, but it doesn't create a <a> tag, so your links won't be detected by crawlers, which is inherently bad for SEO.

You should always use <Link> for navigation, unless you have a specific requirement for using useRouter, for example if you need to redirect users based on the result of some task.

Hope that helps!

[icyJoseph]

Hi,

Use a Link, and what you can do is pass an onClick handler to the Link.

There you could enhance the user navigation experience, for example prevent the default behavior, and do whatever JavaScript enhancement you want, and end navigating using the router.

You might not even to prevent the default behavior is all you need is to activate some animation!

This means that, when a bot/crawler or user with JavaScript disabled, uses the Link, they will still be able to navigate! And those with JavaScript enabled, will have an enhanced experience...

Take a look at this example:

• https://stackblitz.com/edit/nextjs-ve66fd?file=app%2Fpage.tsx,app%2Fabout%2Fpage.tsx

Open it in a new window, open DevTools, and ctrl+shift+P and write disable JavaScript, now navigate, then do ctrl+shift+P and enable JavaScript, try to navigate now.

Inspect the HTML, and you see an <a> tag. Everybody happy.