vue做seo优化

前言

• 先了解什么是seo？
• 再了解搜索引擎蜘蛛的工作原理？
• seo为啥对vue单页面不友好?
• vue项目怎么做seo优化？
• prerender-spa-plugin怎么使用，以及它的工作原理

什么是seo？

引擎蜘蛛的工作原理？

• 从 meta 标签中读取 keywords 、 description 的内容。
• 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。
• 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）
• 像 h1 – h6 标签是具有不同程度的强调意义的。
• 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。

seo为啥对vue单页面不友好?

• 爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到
• vue通过js控制路由然后渲染出对应的页面，而搜索引擎蜘蛛是不会去执行页面的js的，导致搜索引擎蜘蛛只能收录index.html一个页面，在百度中就搜索不到相关的子页面的内容。
• 我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好

引起的问题

1. 收录的页面少了->被抓取的页面就少了->点击量之类的也就少了；
2. 不能对对应的页面做TDK(title, keywords, description)不同的配置，每个页面的title和meta标签都是一样的，不利于网络爬虫的爬取

怎么解决那？

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

prerender-spa-plugin的使用

使用 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获取页面的时机 }) }) ] } }, } 

• staticDir 指的是预渲染输出的页面地址，
• routes 指的是需要预渲染的路由地址，
• renderer 则是所采用的渲染引擎是什么，目前用的是 V3.4.0 版本支持 PuppeteerRenderer。
• inject 则是预渲染过程中都能拿到的值，该值提供给你了机会，让你觉得是否渲染这部分代码。例如下面的代码，是不会被预渲染进 HTML 中的。

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

• renderAfterDocumentEvent 这个则很关键，这个是监听 document.dispatchEvent 事件，决定什么时候开始预渲染

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 的挂载元素外，还有静态的标签内容。

遇到的问题

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

解决办法

优化之后的路径是

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

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

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

1.全局安装node.js

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

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

prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢？

• prerender-spa-plugin插件的工作流程图:
  
  
  
• prerender-spa-plugin 利用了 Puppeteer[4] 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大，所以很简单就能将运行时的 HTML 打包到文件中。
• 原理是在 Webpack 构建阶段的最后，在本地启动一个 Puppeteer 的服务，访问配置了预渲染的路由，然后将 Puppeteer 中渲染的页面输出到 HTML 文件中，并建立路由对应的目录。
• 每个路由对应的 HTML，然后我们可以更改每个路由文件里的 title 、 meta keyword等 。
• 另外页面的内容都已经在 HTML 中直接呈现，也可以解决 js 等资源加载慢导致白屏的问题。

prerender-spa-plugin 的确在一定程度上解决了我们对于 SEO 的诉求和页面加载慢的问题。但是它的缺点还是很明显的。

• 不同的用户看到不同的页面，动态数据页面（预渲染在获取用户权限数据之前就进行渲染了，所有他不能做到这个）
• 动态路由也不可以（webpack编译的时候 路由还没挂载那）
• 经常发生变化的页面，数据实时性展示（比如体育比赛等 我们现在的方式是前端拿到组件后进行组装数据，然后在进行渲染 像这种实时数据的会不准确）
• 路由过多，构建时间过长

然后就是为这些打包的静态页面分配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标签了。