SEO 优化——预渲染(prerender)

1 SEO优化

需求分析：网页的欢迎页需要SEO优化，来提高网站在搜索引擎中的排名，其它页面不需要。

技术选择：目前主流的SEO优化是通过前端的预渲染(prerender)或者服务端渲染(SSR)来完成的。 但是出于以下考虑不适用SSR：

1. 使用SSR会增加服务器压力（学校的服务器就性能孱弱），而预渲染对服务器造成压力较小
2. SSR同时需要额外搭建nodejs环境
3. 由于项目一开始没有考虑SEO，在本轮迭代后端同学已经完成工作的前提下，改造的工作量较大，而预渲染在前端就可以完成，不需要后端配合

因此选择使用预渲染。此外，预渲染不仅仅有助于优化SEO，还可以减少白屏时间。

2 prerender

当前项目环境为Vue2，配置过程如下：

1. 将路由模式改成history
2. 首先安装包npm i @dreysolano/prerender-spa-plugin,不要安装prerender-spa-plugin,会报Unable to prerender all routes的错误。
3. 配置vue.config.js

//vue.config.js
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ...
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            routes: [ '/'], // 需要预渲染的路由（视你的项目而定）
            renderer: new Renderer({
              inject: {
                foo: 'bar'
              },
              renderAfterDocumentEvent: 'render-event'
            })
          })
        ]
      }
    }
  }

})

routes: [ '/'],中的路由就是需要预渲染的路由，值得注意的是，prerender-spa-plugin这个包已经3年多没更新了，需要更新的版本，可以选用prerender-spa-plugin-next。

4. 配置main.js

//main.js
new Vue({
  render: h => h(App),
  router,
  mounted () {
    // 触发renderAfterDocumentEvent
    document.dispatchEvent(new Event('render-event'))
    // document.dispatchEvent(new Event('custom-render-trigger'))
  }
}).$mount('#app')

3 结果

配置前 配置后 区别是有点，但是这个We're sorry but ylyn doesn't work properly without JavaScript enabled. Please enable it to continue. 的报错不知道怎么解决。

踩坑

在Vue3里面发现预渲染无法和gzip压缩一起用，等我学多一点再来思考下

预渲染的一些缺点

1. 会增加打包时间
2. 不适用于大量页面的SEO优化

4 其他SEO优化的方法

1. HTML的title标签的填写
2. HTML的meta标签里的keywords以及description的信息的填写