Laravel Vue.js应用的SEO

Question

我的Laravel 5.6应用程序拥有一个Vue.js前端。Vue.js应用程序位于资源目录中。我阅读了几篇使用Prerender SPA插件的文章。这些文章是针对独立的vue.js应用程序并具有index.html文件的。在Laravel的情况下，我们有index.php。如何使我的Laravel Vue.js应用程序具有SEO友好性。最少要求是使应用程序的前/首页具有SEO友好性。

- user9465677

---

你不应该编辑 public/index.php 文件。Laravel 使用 resources/views 中的 blade 文件。将你在文章中学到的内容应用到你的布局和内容文件中。 - Brian Lee

@DigitalDrifter - 对于Vue.js来说，它使用resources/assets/js/目录来托管所有JS文件。 - user9465677

你可能正在使用webpack或其他构建工具来打包资源。无论如何，输出文件都会在blade模板中加载。 - Brian Lee

@DigitalDrifter - 这是正确的，我拥有那个 blade 模板。但是我该如何确保 Google 会索引内容主体而不仅仅是 blade 模板中的标题呢？ - user9465677

从这里检查Rendertron链接 https://stackoverflow.com/questions/49985165/setup-server-side-rendering-angular-4-application-with-loopback-strongloop/50748474#50748474 - Brn.Rajoriya

Answer 1

强烈推荐尝试一下Nuxt.js！它是建立在VueJS之上的生产就绪框架。使用Nuxt.js，您可以创建100％符合SEO标准的应用程序，并具有类似单页应用程序的路由。

查看这篇关于"使用Nuxt.js创建服务器端渲染的Vue.js应用程序的Toptal文章"。

- ZR87

Answer 2

我认为，作为另一种解决方案，您可以使用https://prerender.io/服务（最多可免费缓存250个页面）来为您的SPA应用程序进行预渲染。

如果您要实现https://prerender.io/服务，则需要生成所有站点地图URL路径，并通过其npm插件（prerender-spa-plugin）将它们上传到该服务，并配置您的.htaccess文件以供搜索引擎爬虫使用。因此，搜索引擎爬虫将重定向到此预渲染服务并选择您的网站，缓存静态网页以供服务引擎索引，并将缓存页面显示为搜索结果。

有关更多信息，请参见以下内容；

• https://prerender.io/documentation
• https://snipcart.com/blog/vue-js-seo-prerender-example

干杯！

- Dasitha Abeysinghe