vue做seo优化

前言 什么是seo？

SEO是由英文Search Engine

Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。

引擎蜘蛛的工作原理？

详情查看蜘蛛的工作原理;不够详细的话自己百度一下

搜索引擎蜘蛛的爬行是被输入了一定的规则的，它需要遵从一些命令或文件的内容。

网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：

seo为啥对vue单页面不友好? 引起的问题

收录的页面少了->被抓取的页面就少了->点击量之类的也就少了；

不能对对应的页面做TDK(title, keywords, description)不同的配置，每个页面的title和meta标签都是一样的，不利于网络爬虫的爬取

怎么解决那？

html就不能通过js生成，我们需要在加载js之前做一下页面的预渲染,目前了解到的有两种方法，vue的ssr渲染(配置参考)和prerender-spa-plugin插件实现(配置参考)。SSR比较复杂，所以选了prerender-spa-plugin来尝试。

prerender-spa-plugin的使用

See 配置参考.

本次只介绍vue-cli3的解决方案

使用 webpack + prerender-spa-plugin + vue-meta-info轻松地添加预渲染

npm install prerender-spa-plugin --save

vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const webpack = require('webpack')
const path = require('path')
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // outputDir: path.join(__dirname, './'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/testData',  '/contact'],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
              inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
          })
        })
      ]
    }
  },
}

showMessage(){
      if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return;
      this.message = '我是测试预加载拦截';
    }

main.js

new Vue({
  router,
  store,
  render: h => h(App),
//添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

然后就是npm run build打包 1. router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面，所以一定要history

2.打包之后上传到服务器才可以看到效果，或者本地自己创建一个服务

这样dist的文件夹目录结构就会变成如下的样子

就是打包之后，每个路由都会打包成一个文件夹，都有一个对应的静态 HTML;

每一个 HTML 内除了

这个 Vue 的挂载元素外，还有静态的标签内容。

遇到的问题

1.本地起服务测试,会发现能正常运行，但是做了优化的页面刷新之后会没有样式

造成问题的原因就是打包的时候vue.config.js的资源路径配置不对

没有优化之前的路径是

  // 资源路径
  publicPath: './',

打包之后路由下面的资源路径是这样的

解决办法

优化之后的路径是

  // 资源路径
  publicPath: '/',

打包之后的路由下面的资源路径是这样的

就是路径前面多了一个/,采用了绝对路径

这个时候需要一个服务来测试

1.全局安装node.js

2.安装成功后，执行npm install anywhere -g 安装anywhere

3.在对应路径下打开cmd，执行anywhere指令。如图：

然后就可以在浏览器输入地址访了，可以看到每个路由对应的 HTML

浏览器访问你的ip:8000/contact后看到一下内容以及对应的html

鼠标右键审查元素可以看到

prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢？ prerender-spa-plugin 的确在一定程度上解决了我们对于 SEO 的诉求和页面加载慢的问题。但是它的缺点还是很明显的。 然后就是为这些打包的静态页面分配title和meta标签，需要用到 vue-meta-info

安装
npm install vue-meta-info --save

main.js里面引入vue-meta-info

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

这样在组件页面中就可以使用了

假设你要给contact.vue添加title，meta标签

contact.vue

...


export default {
  metaInfo: {
    title: '我是contact头', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是contact关键字'
    },
    {
      name: 'description',
      content: '我是contact描述'
    }],
    link: [{ // set link
      rel: 'asstes',
      href: 'https://assets-cdn.github.com/'
    }]
  }
}
 

这样再结合prerender-spa-plugin，打包之后，在dist文件夹找到contact文件夹下的index.html

打开你会发现就有title和meta的关键字和描述标签了

本地起服务或者发布到线上运行项目，在页面右键—查看源代码—就可以看到页面的title和meta标签了。