VUE项目SEO问题的解决

一.SEO

SEO（Search Engine Optimization）：汉译为搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

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

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

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

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

引起的问题

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

 

二、网站渲染

1.「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；

     浏览器会直接接收到 经过服务器计算之后的HTML字符串，（计算：服务器经过解析存放在服务器端的模板文件），浏览器只进行了HTML的解析，把HTML所代表的图像显示给用户。服务端渲染都是针对第一次get请求，用于生产完整的html给浏览器，浏览器直接出首屏。后端渲染的网站点击一下，就会刷新一个，然后从后台请求新的页面数据。

     好处：前端耗时少（前端只负责将html进行展示），利于SEO

     坏处：网络传输数据量大，占用（部分、少部分）服务器运算资源，response 出的数据量会（稍）大点，模板改了前端的交互和样式什么的一样得跟着联动修改。

 

2.「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；

    前端渲染就是指浏览器会从后端得到一些信息，这些信息或许angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。前端拿到信息后，组织排列形成最终可读的HTML字符串。

客户端渲染都是针对客户端状态变化，请求了数据，进行局部dom变化（局部可能大到整个body）。
react/vue在这种场景下，服务端仅仅将jsx/模版转换成html，客户端根据props/state变化，协调虚拟dom和真实dom之间的同步。

好处：

• 局部刷新。无需每次都进行完整页面请求
• 懒加载。如在页面初始时只加载可视区域内的数据，滚动后rp加载其它数据，可以通过 react-lazyload 实现
• 富交互。使用 JS 实现各种酷炫效果
• 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
• 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
• JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

坏处：前端耗时较多，不利于SEO，首屏加载慢。由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。特别是网速差的时候，让用户等待白屏结束并非一个很好的体验。

3.「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。例如vue/react的服务器渲染.

 

三、vue-cli3解决SEO以及首屏加载问题

1.vue ssr

优点：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。更快的内容到达时间(time-to-content)，特别是             对于缓慢的网络情况或运行缓慢的设备。

缺点：浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊             处理，才能在服务器渲染应用程序中运行。

           涉及构建设置和部署的更多要求。

            更多的服务器端负载。

 

2.nuxt.js

Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。甚至可以用它来做为静态站生成器。比ssr更加简单亲民。

 

3.预渲染：prerender-spa-plugin插件。

如果只是改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。

 

三、vue预渲染

由于项目只是改善少数页面的seo，所以使用预渲染方式，预渲染插件使用vue官方推荐的prerender-spa-plugin。

使用步骤:

1.安装：cnpm i prerender-spa-plugin --save-dev

(注意：要使用cnpm而不用npm，因为这个插件依赖puppeteer插件，会附带下载chrome，因为墙npm可能会一直按照不成功。）

2.在main.js中添加mounted

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '',
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  }
})

3.在build/webpack.prod.conf.js中添加

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer


plugins: [
......

new PrerenderSPAPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 下面这句话非常重要！！！
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
        staticDir: path.join(__dirname, '../dist'),
        
        // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
        routes: ['/'],
        
        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event',
            renderAfterTime: 5000
        })
    })
]

4.npm run build 打包后 dist/index.html（或其他文件）中有出现页面内容则为成功。