Vue项目SEO优化的另一种姿态

背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用预渲染，然后用nginx代理来实现两个项目之间的跳转。

同构SSR服务端渲染这里就不多赘述了，说一下预渲染：

一、什么情况下用预渲染比较好

官方文档建议：如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

二、选用插件

官方文档建议：如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上，作者是 Vue 核心团队的成员。

结合vue-meta-info这一类动态设置meta信息的插件，可以达到更好的效果。

三、插件的使用

安装

# Yarn
$ yarn add prerender-spa-plugin
# or NPM
$ npm i prerender-spa-plugin

vue-cli3 webpack配置

在vue.config.js中：

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
    configureWebpack: {
        module: {},
        plugins: process.env.NODE_ENV === 'production' ? [
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, process.env.VUE_APP_OUTPUT_DIR),
                // 需要进行预渲染的路由路径
                routes: ['/', '/about'],
                // html文件压缩
                minify: {
                    minifyCSS: true, // css压缩
                    removeComments: true // 移除注释
                },
                renderer: new Renderer({
                    // Optional - The name of the property to add to the window object with the contents of `inject`.
                    injectProperty: '__PRERENDER_INJECTED',
                    // Optional - Any values you'd like your app to have access to via `window.injectProperty`.
                    inject: {},
                    // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。
                    renderAfterDocumentEvent: 'render-event'
                })
            })
        ] : []
    }
}

这里只在 process.env.NODE_ENV === 'production'的时候进行预渲染，输入目录为 process.env.VUE_APP_OUTPUT_DIR，是在.env .env.prod .env.test等全局环境变量中配置的，可以根据不同环境打包，如.env.prod的配置为：

NODE_ENV = production

VUE_APP_OUTPUT_DIR = 'dist-prod'
VUE_APP_PROJECT_URL = '/platform'

这里的VUE_APP_PROJECT_URL稍后再做解释。

以上的new PrerenderSPAPlugin({})配置中删除了

headless: false // Display the browser window when rendering. Useful for debugging.

目的是为了不打开chromium浏览器。

在main.js中配置：

new Vue({
    router,
    store,
    render: h => h(App),
    mounted () {
        document.dispatchEvent(new Event('render-event')) // 预渲染
    }
}).$mount("#app")

vue-meta-info安装使用：

安装

 
  # Yarn
$ yarn add vue-meta-info
# or NPM
$ npm install vue-meta-info --save 
 

使用

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)
<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

如果你的title或者meta是异步加载的，那么你可能需要这样使用

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

三、项目间跳转配置

现在说一下VUE_APP_PROJECT_URL这个变量，这个变量便是两个项目间跳转的关键。在本地开发中，可以通过设置.env中的变量：

VUE_APP_PROJECT_URL = 'http://localhost:8080'
另一个项目
VUE_APP_PROJECT_URL = 'http://localhost:8081'

然后通过window.location.href的方式进行两个本地项目之间的跳转：

export function toUrl (query) { // 动态更改href
    window.location.href = process.env.VUE_APP_PROJECT_URL + query
}

至于线上怎么进行跳转，可以这么配置.env.prod中的变量：

VUE_APP_PROJECT_URL = '/'
另一个项目
VUE_APP_PROJECT_URL = '/platform'

然后在nginx中配置：

### 默认进入的项目 ###
server {
    listen 30002;
    server_name xxx.xx.xxx.xxx;
    proxy_buffer_size 8k;
    proxy_buffers 8 32k;
    set $root /var/www/page-for-seo/dist-prod;
    root $root;
    index index.html index.htm index.php;

    error_log   /var/nginx/logs/error.log error;
    access_log  /var/nginx/logs/access.log;

    #access_log off;

    ### 客户端请求错误处理 ###
    error_page  403 404  /404.html;
    location = /404.html {
        return 404 'Sorry, File not Found!';
    }

    ### 服务端请求错误处理 ###
    error_page  500 502 503 504  /50x.html;
    location = /50x.html {
            root  /usr/share/nginx/html;
    }

    ### 静态资源有效期 ###
    location ~ .*\.(jpeg|png|jpg|gif)$ {
        expires 1d;
    }

    ### 匹配所有请求 ###
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    ### 匹配 platform/ 然后进行代理 ###
    location ^~ /platform/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://xxx.xx.xxx.xxx:30012/;
    }
}

### 要进行跳转的项目 ###
server {
    listen 30012;
    server_name xxx.xx.xxx.xxx;
    proxy_buffer_size 8k;
    proxy_buffers 8 32k;
    set $root /var/www/platform/dist-prod;
    root $root;
    index index.html index.htm index.php;

    error_log   /var/nginx/logs/error.log error;
    access_log  /var/nginx/logs/access.log;

    #access_log off;

    ### 客户端请求错误处理 ###
    error_page  403 404  /404.html;
    location = /404.html {
        return 404 'Sorry, File not Found!';
    }

    ### 服务端请求错误处理 ###
    error_page  500 502 503 504  /50x.html;
    location = /50x.html {
            root  /usr/share/nginx/html;
    }

    ### 静态资源有效期 ###
    location ~ .*\.(jpeg|png|jpg|gif)$ {
        expires 1d;
    }

    ### 匹配所有请求 ###
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
}

Vue项目SEO优化的另一种姿态

猜你喜欢