Laravel Vue.js 应用程序的 SEO

Posted 2023-02-22

【中文标题】Laravel Vue.js 应用程序的 SEO

【英文标题】：SEO for Laravel Vue.js App

【发布时间】：2018-12-28 07:32:42

【问题描述】：

我的 Laravel 5.6 应用有一个 Vue.js 前端。 Vue.js 应用程序位于资源目​​录中。我浏览了几篇使用 Prerender SPA 插件的文章。这些文章适用于独立的 vue.js 应用程序，并且有一个 index.html 文件。在 Laravel 的例子中，我们有 index.php。如何使我的 Laravel Vue.js 应用程序 SEO 友好。至少我想让应用程序的首页/主页对 SEO 友好。

【问题讨论】：

您不应该编辑public/index.php 文件。 Laravel 使用 resources/views 中的刀片文件。将您在文章中阅读的内容应用到您的布局和内容文件中。

您可能想从这里开始：vuejs.org/v2/guide/s-s-r.html

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

大概您正在使用 webpack 或其他构建工具捆绑资源。输出文件以任一方式加载到刀片模板中。

@DigitalDrifter - 这是正确的，我有那个刀片模板。但是我如何确保谷歌将索引内容的主体，而不是刀片模板中存在的标题。

【参考方案1】：

绝对推荐查看 Nuxt.js！它是一个构建在 VueJS 之上的生产就绪框架。使用 Nuxt.js，您可以使用 类似 SPA 的路由创建 100% SEO 友好应用。

查看这篇关于 "Creating Server-side Rendered Vue.js Apps Using Nuxt.js" 的精彩 Toptal 文章

【参考方案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

干杯！