侧边栏壁纸
博主头像
lai博主等级

  • 累计撰写 53 篇文章
  • 累计创建 19 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录

VUE2 SEO优化

lai
lai
2022-12-20 / 0 评论 / 3 点赞 / 2,109 阅读 / 845 字
温馨提示:
本文最后更新于 2022-12-20,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

通常情况下vue属于单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。而对于想被搜索引擎收录的网站而言并不是好事,异步加载的页面不利于搜索引擎抓取,如果用vue开发博客网站,就需要进行SEO优化,这样网站的内容才能被收录到各个引擎中,方便用户通过搜索引擎搜索到发布的博文,下面介绍三种方法对vue进行SEO优化

环境

  • vue2
  • vue/cli 5.0.8
  • nodejs 8.12.0

生成站点地图

站点地图可以很好的帮助搜索引擎收录网站,可以通过使用sitemap-webpack-plugin在构建完工程后在dist路径下生成sitemap.xml站点地图文件

  1. 在对应工程下安装插件sitemap-webpack-plugin
npm install sitemap-webpack-plugin --save-dev

2.vue.config.js中新增相应配置

//引用sitemap-webpack-plugin模块
const SitemapPlugin = require("sitemap-webpack-plugin").default;

//在configureWebpack中加入网站基本访问路径,paths为站点地图列表
module.exports = defineConfig({  
  configureWebpack: {  
    plugins: [   
      new SitemapPlugin({ base: "https://laijava.com", paths }),  
    ],  
  },  
});

// 站点地图  
const paths = [  
  {  
    path: "/",  
    lastmod: "2022-12-18",  
    priority: 1.0,  
    changefreq: "yearly",  
  },  
  {  
    path: "/about/",  
    lastmod: "2022-12-18",  
    priority: 0.9,  
    changefreq: "yearly",  
  },  
];

上述配置生成的locbase + path生成后需要进行检查核对

相关文档:sitemap-webpack-plugin

页面进行预渲染

使用prerender-spa-plugin-next对指定路由进行预渲染,生成给指定个路径生成独立index.html;这种做法并不适用于任何场景,该插件是使用无头浏览器,加载应用程序路由,将访问结果保存到静态的HTML文件中;所以并不适用于动态内容的展现,同时不适用于有大量路由的站点(项目build的时候需要更长的时间)。

  1. 在对应工程下安装插件prerender-spa-plugin-next
npm i prerender-spa-plugin-next -D
  1. vue.config.js中新增相应配置
//引用prerender-spa-plugin-next模块
const PreRenderSPAPlugin = require("prerender-spa-plugin-next");

//在configureWebpack指定需要预渲染的路径
module.exports = defineConfig({  

  configureWebpack: {  
    plugins: [  
      new PreRenderSPAPlugin({  
        routes: ["/", "/about"],  
      })
    ],  
  },  
});
  1. npm run build正常可以看到指定的路径会在对应页面生成index.html

相关文档:prerender-spa-plugin-nex

给页面添加mate与title信息

通过vue-meta-info对每个页面进行定制化配置添加title与mate进行seo优化,vue-meta-info 是一个基于vue 2.0的插件,它会让你更好地管理你app 里面的meta 信息。你可以直接在组件内设置 metaInfo 便可以自动挂载到你的页面中。

  1. 在对应工程下安装插件vue-meta-info
npm install vue-meta-info --save
  1. main.js全局引入vue-meta-info
import MetaInfo from "vue-meta-info";
Vue.use(MetaInfo);
  1. 在组件内使用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://laijava.com/'
      }]
    }
  }

</script>

相关文档:vue-meta-info

3

评论区