vue页面seo优化

最新推荐文章于 2025-07-17 10:00:33 发布

黑暗土豆先生

最新推荐文章于 2025-07-17 10:00:33 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript 前端框架 npm

本文链接：https://blog.youkuaiyun.com/weixin_65042674/article/details/133902017

1.使用vite-plugin-seo-prerender做页面预渲染（vite）

使用npm 安装vite-plugin-seo-prerender

npm vite-plugin-seo-prerender 解决打包多个页面

配置vite.config文件

//vite.config.js
import seoPrerender from 'vite-plugin-seo-prerender'

export default defineConfig({
  plugins: [
  
    seoPrerender({
      routes: [
        '/index/hom'
    ] // 需要生成的路由
    })
            ]
})

这样运行run build时就可以打包多个页面

2.解决页面路由元信息配置问题

使用 vue-meta-info 进行配置路由元信息

npm vue-meta-info  设置title、描述、关键字，解决SEO的问题

配置main.js文件

//main.js
import App from "./App.vue";
import MetaInfo from 'vue-meta-info' 

createApp(App).use(MetaInfo)

在需要的页面中配置路由元信息

//hom.vue
export default {
  metaInfo: {
    title: 'My Page Title',
    meta: [
      { name: 'description', content: 'This is the description of my page' },
      // 其他元信息...
    ],
    // 其他元信息...
  },
  // 组件的其余部分...
}

3.检查是否成功

使用浏览器的开发者工具（如Chrome的开发者工具）检查页面的源代码。找到<head>标签，并确认是否正确地包含了你设置的元信息。