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 !