浅谈Vue单页面做SEO的四种方案

2023年6月11日上午10:38 • JavaScript

方案一：使用预渲染

预渲染是一种将 SPA 应用在服务器端对页面进行完全渲染，然后将渲染好的 HTML 文件返回给客户端的技术。适用于 SEO 需求比较简单的情况。具体步骤如下：

安装插件 prerender-spa-plugin ，并在 webpack 配置中进行设置；
对于每个需要预渲染的路由，设置它们对应的 meta 信息，这些 meta 熟悉在 head 标签中，并与用户最终看到的页面一致；
执行 npm run build 生成需要发布的文件，在服务器端预先调用这个打包好的 HTML 文件，并将它返回给客户端。
方案二：使用SSR（服务端渲染）

SSR 是一种流行的解决方案，可以使 vue 的单页面应用在服务器端渲染，最终返回 HTML 文件到客户端，权衡利弊后，你可以配合采用 Nuxt.js 等开源的扩展包快速地实现 SSR。具体步骤如下：

安装 Nuxt.js 扩展包，创建一个基于 Nuxt.js 的项目；
定义路由、编写组件并生成对应的 HTML 文件；
在服务端进行渲染，并将生成的 HTML 文件返回给客户端。

需要注意的是，使用 SSR 技术会带来一定的性能问题，以及一些复杂的配置。因此，需要权衡其优缺点，选择最合适自己的方案。

方案三：使用腾讯框架Taro

Taro 是一个可以同时开发多端应用 (H5、小程序、React Native 等) 的开发框架，其中就包含了单页应用的 SEO 解决方案。具体步骤如下：

安装 taro-seo 框架；
在每个路由的 component 中定义一些 SEO 相关的信息，如 title、meta 等；
执行打包命令即可。

Taro 框架主要的优势在于可以同时进行多端开发，因此，如果需要同时开发多个端，可以考虑使用该框架。

方案四：使用微前端技术

使用微前端技术可以将单个项目分为多个子项目，并将这些子项目按照业务模块独立开发，最终在页面加载时，将这些子项目进行动态拼装。相比于其他方案，该方案具有更高的灵活性和可维护性。具体步骤如下：

使用微前端架构将单页面应用进行拆分，分为多个子项目；
针对每个子项目进行 SEO 的优化。

需要注意的是，该方案需要前置对微前端技术的熟悉程度较高，需要额外的前置技术储备。

示例一：使用预渲染方案

以使用 Vue CLI 搭建单页应用为例，实现预渲染 step by step：

创建一个新项目，在命令行中输入 vue create my-project 命令创建；
安装 prerender-spa-plugin 插件，输入命令 npm i prerender-spa-plugin --save-dev 进行安装；
在 vue.config.js 文件中进行如下配置：

plugins: [
  new PreRenderSPAPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: ['/', '/about', '/contact'],
    renderer: new Renderer({
      inject: {
        foo: 'bar'
      },
      headless: false,
      renderAfterDocumentEvent: 'render-event'
    })
  })
]

在配置文件中：