Used vue.js with laravel and my site is not SEO friendly anymore

[etattva]

I implemented vue.js on my site for pagination and filter. Now I realize that the page loads with filters and the data is fetched via AJAX. Do a view source and AJAX content is not displayed. This affects the site indexing and ability to rank. I do not want to go for SSR. What could be my options here? Should I ditch vue.js?

[romanovcode]

You use SPA and then are surprised that it negatively impacts your SEO? What did you think would happen?

If you want good SEO ditch SPA. If you want SPA and SEO you must have both - client-side rendering and server-side rendering.

[xcubic]

You can mix both! Depeneding on how you implemented vuejs, you can render the list on the server on a blade template and send it to the cliente. There, you let vue do the pagination/filters/etc.

[etattva]

With all these discussion, my question to this group is that should I stick with vue.js ? I was using data tables and developer advocated vue.js being much better and flexible, which I agree but then these SEO challenges. If I am on laravel framework, what options do I have to implement pagination and filter conditions in SEO friendly manner. I have seen some sites using Ajax but they change the url by incrementing a variable in the url.

[quantummkv]

If you want to keep your SEO ranks without SSR, ditch any client side rendering framework and go back to blade templates.

[etattva]

How do I allow filtering to be done on client side? I am comparing with cargurs, aamozn wayfair, how to get that filter option on left and still keep content. I was think load content first and then load filter on left. This is what amazon does

[quantummkv]

Use javascript. Display all the data at the first load. Then make make ajax calls with the filter data to the server, filter and process the results there and replace the original content on the client side with innerHTML().

[Bashmaistora]

On a small side project, I load the initial results with the template and then do filtering and additional searching with js. This allows me to be SEO friendly, while still having nice filtering functionality.

[steve_taylor]

> I do not want to go for SSR.

SSR and SPA aren't mutually exclusive. Vue.js supports the ability to server-side render and hydrate the HTML with your SPA once it has loaded. It's the best of both worlds.

https://ssr.vuejs.org/

[antoineMoPa]

I think that google now uses a headless browser. Unless your page loads in too much time, nothing should change on the SEO side if you have the same content at the same place.

[detaro]

From what I've heard they do, but not for all of it. The bulk of the crawling is still done without it, and some subset of pages (probably based on some detection of "this site requires JS") is crawled with the more expensive, JS-enabled crawler too.

[xcubic]

That is not true. As far as I know, google does execute js but does not wait for ajax calls.

[etattva]

In google webmaster I saw the error when ran "fetch as google". It had issues with Ajax calls.

[tuananh]

source please!

[codegeek]

Do the routing through laravel and then in the blade template, just pass the data along in a vue component.

[TigerHimself]

SPA and SEO are not compatible. SPA is good for apps, backends, admins ...

[dragonwriter]

A SPA supporting deep linking and an access model that provides unauthenticated access to public content should, in principle, be able to be made indistinguishable from a set of classic webpages with the public portion of the app content, from an SEO perspective, at least if one takes the JS rendering ability of the search bot(s) of concern into account.

[stefkors]

Perhaps setting up nuxt could work?