Use links in single page app

Hi everyone!

I am developing an e-commerce website for which SEO and UX is one of my top priority.

The website is not a 100% single-page app but most of it is. Meaning from the index you can easily navigate through categories without having to reload content. It’s super fast for the user but I have a big issue: there are no links visible for the user and the crawlers

I am probably doing something wrong but basically, for the categories menu, I have a group for each category on which you can click. Then there is a workflow => go to page => index + parameters (which allows me to modify the content of the repeating groups accordingly)

By doing this, no links appear on the menu when I hover with the mouse. Meaning that they are not crawlable as well.

I tried instead to use the link element to link towards an internal page => index + parameters. But by doing it this way it seems to be a real link and no more a single-page app. Everything is reloaded on click.

So my question is: how can I have an element acting as a link for the user and the crawlers but which will not reload the full page ?

One of the workarounds would be to put a non-clickable link behind the clickable group. By doing this I assume the crawlers will see the links (but not the user unfortunately)

What is the best practice here for an e-commerce website to have the best UX and still a great SEO optimization? Do you think I should use only multiple pages?

Thanks a lot for your help !

@dpy.ludovic
This post covers some useful information about SEO strategy…
I think it’s worth reading once :wink:

2 Likes

Switch to Sudsy Page plugin - then you can use real links but not renagivate to the page

1 Like

Does link which is marked as “isn’t clickable” works agains the crawler? Or to make element not clickable by user somhow, but crawable for the crawler?