SPA单页面对于SEO的优化的问题以及解决方案

最近碰到比较棘手的问题就是前后端分离的网站对seo特别不友好，尤其是目前最新的前端框架，angularjs、reactjs、vuejs，都有同样的问题。

SPA单页面应用程序有什么好处？

访问高效、更高开发效率、更方便的代码维护等等、、、

知乎首页就是典型的单页面应用（zhihu.cm）

还有饿了么官网（ele.me）

SPA单页面应用支持能做好搜索引擎优化（SEO）吗？

能！一个字，肯定能！但是是真的不友好（特别不友好），以往的前端页面都是排版好使用标签或者直接在后台渲染（MVC模式），那时的前端展示情况，是一个静态页面一个连接指向，能够直接静态化展示（index.html/default.html），或者使用参数调用（index.php/index.asp?from=outside），而搜索引擎可以直接识别静态连接和带参数的连接，所以，收录以及排名是还比较好做的。

但是，技术的革新带来了些许弊端（或者人家根本不在乎？）那就是搜索引擎根本不认识新技术的前端页面，因为在搜索引起看来，SPA应用也就是单页面应用就像它的名字一样，根本就只有一个页面！

也许你看到这里就在说我在胡扯，但是相较于以往的页面设置以及对路由的支持来看，现在的单页面程序根本就是写在同一个页面中，每个展示的“新页面”其实就是调用的不同路由而已，在传统的写法中这就是页面中的一个锚点，而新的搜索引擎还认为这只是这个页面中的一个锚点（虽然锚点很多..），所以，无论如何整个网站看起来就像一个页面一样，你觉得能有多少收录？

传统的锚点

写法：
<a href="#AboutMe">关于我们</a>
点击之后的连接为：
http://www.xxx.com/index.html#AoutMe

SPA单页面应用的路由调用

写法：
<div 
id="header" 
ng-component="modules/common/header/header">
//这个是组件
</div>
点击之后的连接为：
http://www.xxx.com/#/AboutMe/

你看，这写法相似吗？

在传统的写法中（后缀隐去）：

http:// www.xxx.com/#AoutMe

在SPA单页面应用中：

http:// www.xxx.com/#/AboutMe/

你看出区别了吗？区别就在于“#”，在传统的写法中，#作为锚点，点击A标签之后可以直接指向页面中的特定位置，而在SPA单页面应用中点击链接之后则跳转新的页面，

以上是我们作为访客看到的结果，但是在蜘蛛眼里（搜索引擎的使者）到你的网站发现#就以为是一个锚点，那么他会认为这是什么？它会告诉搜索引擎这是一个锚点，我们还没有出这个页面呢，等到它的时间到了（蜘蛛在每个站点中的停留时间有限），要走了，才发现，还是没爬出这个页面，那只有像搜索引擎报告，这个是单页面，只有一个页面，所以，就给他一个收录即可！

会造成什么后果？

蜘蛛爬过SPA单页面应用，却无法找到网站中的内容，也无法找到下级链接，只能给你一个收录（或者不理你），那你的排名能上去吗？你的收录能搞吗？

如何解决？或者说有什么解决方案吗？

当然有，各个新技术都提供最新的解决方案（虽然都不尽人意），包括什么判断蜘蛛与用户，为蜘蛛单独渲染一套代码，以及为用传统的方法生成每一个单独的但页面程序，然后调用不同的头部和脚步。

SSR的登场

概述

SSR是 Server-Side Rendering(服务器端渲染)的缩写，在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM（这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因），但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

SSR的优点

• 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。这个个人深有体会，我的博客最开始仅仅使用了Vue.js，而没有做服务端渲染，加之服务器不在大陆，第一次输入地址到看到完整的页面几乎是过了4、5秒，有时候还更长。
• 更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。

SSR的缺点

• 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源
• 一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断
• 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂
• 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

SSR常用框架

• React 的 Next
• Vue.js 的 Nuxt

不熟悉React及Next，不作评价，在此不得不说Nuxt的用法实在是太漂亮了，既有一定的约束（无规矩不成方圆），又不失扩展性，官网的文档也非常不错。

（SSR部分摘选自简书网友文章）

后记

在这里说一下，新技术的出现不代表着老技术以及使用老技术的应用就要被淘汰（短期不会），但是还是要跟着新技术走的，毕竟硬件设备的急速发展，老技术的局限性也在慢慢展现，新技术应对新设备理所当然能够更有效地结合，创建用户体验更好的产品。