前端面试题Vue 项目如何进行 SEO 优化

本文部分内容参考官方文档

Vue SPA单页面应用对SEO不太友好，当然也有相应的解决方案，下面列出几种SEO方案

1. SSR服务器渲染

   服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构

   关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。

   优势: 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

   缺点: 服务器nodejs环境的要求, 且对原代码的改造成本高! nuxt.js 坑比较多, 做好踩坑的准备

2. 静态化 (博客, 介绍性官网)

   Nuxt.js 可以进行 generate 静态化打包, 缺点: 动态路由会被忽略。 /users/:id

   优势：

   • 编译打包时, 就会帮你处理, 纯静态文件，访问速度超快；

   • 对比SSR，不涉及到服务器负载方面问题；

   • 静态网页不宜遭到黑客攻击，安全性更高。

   不足：

   • 如果动态路由参数多的话不适用。

3. 预渲染 prerender-spa-plugin (插件)

   如果你只是对少数页面需要做SEO处理（例如 / 首页, /about 关于等页面）

   预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)

   优势: 设置预渲染简单, 对代码的改动小

   缺点: 只适合于做少数页面进行SEO的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)

4. 使用Phantomjs 针对爬虫 做处理

   Phantomjs是一个基于webkit内核的无头浏览器，没有UI界面，就是一个浏览器，

   其内的点击、翻页等人为相关操作需要程序设计实现。

   这种解决方案其实是一种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬虫访问，

   如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫 

总结:

• 如果构建大型网站，如商城类 => SSR服务器渲染

• 如果只是正常公司官网, 博客网站等 => 预渲染/静态化/Phantomjs 都比较方便

• 如果是已用SPA开发完成的项目进行SEO优化，而且部署环境支持node服务器，使用 Phantomjs