Vue如何优化页面的SEO.md 4.82 KB
title: Vue如何优化页面的SEO           
date: 2022/4/15 10:44:20
tags:                    
- SEO
- 服务端渲染
- 预渲染编译          
author: 蔡海飞

因项目要求,对于之前用Vue写的官网项目需要进行SEO优化。就此,对于该项目进行分析并选取合适的解决方案。首先,我们需要简单了解下SEO到底是什么?为什么要优化SEO,SEO能为我们带来什么?作为一个技术人员如何去优化SEO?

seo

SEO是什么?

SEO 中文名称为搜索引擎优化(Search Enine Optimization)。直白点是迎合搜索服务商的爬虫,让他多爬爬我们的网站,都索引我们的网站内容。我在网上找到了一个很形象的图述过程,它可以比较准确的去表达整个爬虫搜索、索引的过程。

搜索引擎搜索过程

为什么要优化SEO,SEO能为我们带来什么?

为什么要做SEO昵,由于大多数用户都是通过搜索引擎去搜索想要访问的内容和服务。为了让我们的网站内容被更多的人群找到,或者是说需要的人找到,以便我们为他提供我们的服务来达到某种商业目的。这时,我们就得遵循搜索引擎制定的索引规则,以爬虫能读懂的方式来表述自己网站的内容、服务,以及想要对外提供的服务等信息。

简而言之,SEO是一种商业行为,是为了使我们达到某种目的的一种交换商业行为。

作为一个技术人员如何去优化SEO?

SEO的优化其实需要很多方面的支撑。常见的SEO优化内容涉及:

  • 网站meta要素和title
  • 内容结构
  • 代码优化
  • 代码优化

如上,可以看得出来,SEO优化我们技术能做的有很多。那么,问题来了:Vue单页面为什么更不易被爬虫爬到昵?在这个问题前我们需要了解几个小的知识点:

  • 搜索引擎更喜欢爬html内容,极少会执行js文件(国内的爬虫没有运行js的),可以等同理解为只爬html内容
  • Vue、React之类的单页面框架html代码极少,都是通过Js动态操作dom的,其dom结构只存在于内存

从上面两个问题就不难理解了,Vue没法让搜索引擎满意。那么常规的Vue之类的应用如何优化搜索引擎昵?

  • 静态网页

  • 前后端不分离

  • 前后端伪分离【SSR】

那回到今天我说的问题上,我司的是一个营销类网站需要进行优化,所以,我只需要通过一个插件对vue项目进行预渲染编译就可以了。这里用到两个插件:prerender-spa-plugin和vue-meta-info 操作流程如下:

安装

$ npm i prerender-spa-plugin vue-meta-info -s // 或
$ yarn add prerender-spa-plugin vue-meta-info -D 

配置vue.config.js

configureWebpack: () => {
  if (process.env.NODE_ENV !== "production") return;
  return {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
     },
    performance: {
    hints: false,
  },
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/'], // 这里制定需要预渲染编译的页面
      renderer: new Renderer({
      inject: {
        foo: 'bar'
      },
      headless: false,
      renderAfterDocumentEvent: 'render-event'
      })
    })
  ]
};

mainjs添加渲染事件

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)   // 配置页面的title、description、keywords

Vue.config.productionTip = false

Vue.use(animated)

new Vue({
router,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'))  // 这里是添加渲染后的事件
}
}).$mount('#app')

对应页面添加配置

export default {
  name: "home",
  metaInfo: {
    title: "人事考试服务平台-人事考试报名管理系统",
    meta: [
      {
        name: "keywords",
        content: "人事考试服务平台、人事考试报名管理系统、标准化招聘、人事考试、考试报名管理系统、考试报名系统、报名考试系统、考务管理系统、考务管理",
      },
      {
        name: "description",
        content: "人事考试服务平台,人事考试报名管理系统,提供岗位发布、网上报名、资格审核、线上缴费、准考证打印等功能,减轻管理人员的工作负担,实现人事招聘流程的规范化管理。",
      },
    ],
  },
}

编译

$ npm run build // 或者
$ yarn run build

如此部署就可,给大家瞅瞅结构,该有的都有。

结果