vue3的SEO优化

vue3的SEO优化（使用prerender-spa-plugin-next + vue-meta-info）

前言

如果你只是需要对少数页面需要做SEO处理，可以使用 prerender-spa-plugin进行预渲染，若需要对几百上千的页面进行SEO优化，那么下面的操作并不友好。

一、生成预渲染文件

1.安装 prerender-spa-plugin-next

npm install prerender-spa-plugin-next --save

2. vue.config.js

const { defineConfig } = require('@vue/cli-service')
const PrerenderSPAPlugin = require('prerender-spa-plugin-next')
module.exports = defineConfig({
    lintOnSave: false,
    transpileDependencies: true,
    configureWebpack: {
        plugins: [
            new PrerenderSPAPlugin({
                routes: ['/index', '/test']  // 需要预渲染的页面，要与router路由一致
            })
        ]
    }
})

3. 路由配置

import { createRouter, createWebHistory } from 'vue-router'
// 路由参数配置
const router = createRouter({
    history: createWebHistory(), // 这里必须是history模式 其他模式会导致后面打包生成的静态文件内容都是一样的，不能起到预渲染的作用
    routes: [
        {
            path: '/index',
            name: 'index',
            ***ponent: () => import('@/views/home/index.vue')
        },
        {
            path: '/test',
            name: 'test',
            ***ponent: () => import('@/views/test/index.vue')
        }
    ]
})

export default router

4.运行打包命令

打包后可以在dist文件下看到index、test两个文件，并且每个页面都有编译好的html代码

index/html

test/html

二、使用vue-meta-info修改html内meta参数

1.安装 vue-meta-info

npm install vue-meta-info --save

2.main.js

main.js文件 添加下面代码

import MetaInfo from 'vue-meta-info'
app.use(MetaInfo)

3.页面内使用

<template>
    <div class="development">
        这里是test页面
    </div>
</template>

<script>
export default ({
    name: '',
    ***ponents: {},
    props: {},
    setup () {
        return {
        }
    },
    metaInfo: {
        title: '我是一个title',
        meta: [
            {
                name: 'keywords',
                content: '关键字1,关键字2,关键字3'
            },
            {
                name: 'description',
                content: '这是一段网页的描述'
            }
        ]
    }
})
</script>

4.运行打包命令

此时打包后的test文件下html文件中meta值就是metaInfo内的指定内容
部署后，查看网页源代码效果