3

My Laravel 5.6 app has a Vue.js frontend. The Vue.js app is in the resources directory. I have gone through several articles that use Prerender SPA plugins. These articles are for the stand alone vue.js app and have an index.html file. In Laravel's case we have index.php. How do I make my Laravel Vue.js App SEO freindly. At a minimum I would like to make the front/home page of the app SEO friendly.

user9465677
  • 437
  • 4
  • 21
  • 1
    You aren't supposed to edit the `public/index.php` file. Laravel uses the blade files in `resources/views`. Apply what you've read in the articles to your layout and content files. – Brian Lee Jul 20 '18 at 05:07
  • You might want to start here: https://vuejs.org/v2/guide/ssr.html – online Thomas Jul 20 '18 at 07:29
  • @DigitalDrifter - For the Vue.js as it uses resources/assets/js/ directory to host all the JS files. – user9465677 Jul 20 '18 at 19:35
  • Presumably you are bundling the resources using webpack or another build tool. The output files are loaded in the blade templates either way. – Brian Lee Jul 20 '18 at 23:21
  • @DigitalDrifter - That is correct and I have that blade template. But how do I make sure that google will index the body of the content as well just not the header present in the blade template. – user9465677 Jul 21 '18 at 02:49
  • If the frontend is an SPA, then the link provided by @ThomasMoors is a good resource for thoroughly understanding SSR. Vue CLI also has many plugins, such as [this one](https://www.npmjs.com/package/@vueneue/vue-cli-plugin-ssr), that simply the process. On the other hand, if your frontend is a traditional multipage application that happens to use Vue components, you needn't worry about the SEO aspect, as the crawlers will be able to access and index your pages as is. – Brian Lee Jul 21 '18 at 03:06
  • Yes, but this requires server side rendering. Anyways, thank you for your help. – user9465677 Jul 21 '18 at 03:38
  • Check rendertron link from here https://stackoverflow.com/questions/49985165/setup-server-side-rendering-angular-4-application-with-loopback-strongloop/50748474#50748474 – Brn.Rajoriya Sep 06 '18 at 07:18

2 Answers2

0

I think, as an alternative solution, you can use https://prerender.io/ service (up to 250 pages Free for caching) to do the pre-rendering for your SPA application.

If you are going to implement https://prerender.io/ service, you would require to generate all the sitemap URL paths and upload them to this service via their npm plugin (prerender-spa-plugin) and configure your .htaccess file for search engine crawlers. So search engine crawlers will redirect to this pre-render service and picked your website, cached static web page for service engine indexing, and show that cached page as the search result.

For more info, you can refer below;

Cheers!

Dasitha Abeysinghe
  • 433
  • 6
  • 8
0

Definitely recommend checking out Nuxt.js! It is a production-ready framework built on top of VueJS. With Nuxt.js You can create 100% SEO-friendly app with SPA-like routing.

Check this awesome Toptal article about "Creating Server-side Rendered Vue.js Apps Using Nuxt.js"

ZR87
  • 1,463
  • 16
  • 27