成年人的世界最基本的逻辑就是：这个世界根本不在乎你的感受
简明扼要
- SPA对SEO不友好，是由其后续页面内容存在滞后性导致的
- SSR能提高SEO
- Google建议使用渐进增强和特性探测用于对SPA进行SEO优化
sitemap.xml/canonical/TDK等都能提高页面的曝光度- 把sitemap.xml想象成向导，用于指引爬虫对网站进行针对性的探索
文章概要
- 为何SPA对SEO不友好
- 解决方案
- 另外增加 SPA 曝光度的方法
1. 为何SPA对SEO不友好
传统网页开发模式，网站内容(html)都是采用服务端渲染(SSR)的方式产出的。这样做，方便爬虫能够定位到网站内容。这个过程就是:爬虫发现你的网站内容，并且将其展现在大众面前。
但是，按照传统网页开发模式生成页面的过程存在一个致命问题。每当页面中很小的数据变更（例如：提交一个form表单），服务端需要对整个页面进行重新渲染并通过网络将最新的页面传到客户端。
另一方面，客户端渲染(CSR)允许单页面应用(SPA)能够在页面不刷新的前提下，进行页面信息的动态获取和展示。在页面初始阶段，浏览器只需接受页面最基本的结构信息(html)然后其余的页面内容都是通过JS来获取或者展示。
当页面中的部分内容发生了变更，浏览器只需要向服务端发送用于获取该与该变更信息相关的AJAX。服务端在接收到指定的请求后，经过拼装处理，将浏览器想要的结果(通常是JSON的数据格式)返回。
虽然，SPA能够很好的规避SSR渲染时数据更新需要刷新整个页面的弊端，但是由于SPA在页面初始阶段，只返回了页面的基础架构，后续页面内容都是通过JS动态获取的。这样很不利于爬虫对网站后续内容的收录。
SPA对SEO不友好，是由其后续页面内容存在滞后性导致的
2. 解决方案
2.1 避免使用Google的Ajax爬虫方案
在2009年，Google 发布了一种用于解决SPA对SEO不友好的应变方案。
前置知识：何为Goolebot
谷歌机器人是一种特殊的软件，通常被称为蜘蛛，被设计用来在公共网站的页面上爬行。它遵循从一个页面到下一个页面的一系列链接，然后将找到的数据处理成一个集体索引。
可以把它想象成一个拥有不断扩展的库存的图书馆
在讲方案前，我们先简单介绍一下，Googlebot对网站应用的处理流程
- 抓取
- 渲染(呈现)
- 编入索引
当 Googlebot 尝试通过发出 HTTP 请求从抓取队列中抓取某个网址时，它首先会检查网页是否允许抓取。Googlebot 会读取 robots.txt 文件。如果此文件将该网址标记为disallowed，Googlebot 就会跳过向该网址发出 HTTP 请求的操作，然后会跳过该网址。
接下来，Googlebot 会解析 HTML 链接的 href 属性中其他网址的响应，并将这些网址添加到抓取队列中。若不想让 Googlebot 发现链接，使用 nofollow 机制
抓取网址并解析 HTML 响应非常适用于经典网站或服务器端呈现的网页（在这些网站或网页中，HTTP 响应中的 HTML 包含所有内容）
Google的Ajax爬虫方案
该方案包含很多操作步骤。
- 向原页面URL添加额外信息(#!)
- 生成页面的HTML快照（snapshot）
- 将添加额外信息(#!)的URL替换为
?_escaped_fragment_=”并将其对应的HTML信息传入爬虫
最后，爬虫能够将原始URL和某时刻的页面快照对应起来，并且将快照内容对外展示。
号外：在2015年，Google宣布将放弃AJAX爬虫方案。并于2018年正式停止对其支持。
现在 Googlebot不需要用户提供预渲染页面，就能够处理自带额外信息(#!)的URL。
如果想让你的应用在百度、Yandex（俄罗斯搜索引擎）、Bing或者Yahoo等搜索引擎中，SEO取到高分的话，切记：和Google处理JS一样，不要过于轻信它们的AJAX爬虫方案
下图展示了，各个浏览器对各种JS框架的爬虫支持程度
2.2 JS框架 + 服务端渲染(SSR)
尽管，大部分搜索引擎对JS框架或多或少支持爬虫处理。但是，由于CSR的页面内容存在滞后性。使得网站信息不能及时的送达用户。
你可以使用一些JS框架(React/Vue)进行网站开发，并且将应用转换为静态HTML，并存入指定的服务器。
当客户端向服务端发起页面请求时，浏览器能获取一个完整的初始化结构，而不像CSR那样：只获取一个包含指定JS的HTML简易壳子。采用SSR渲染页面，当JS还在后台加载时，用户已经看到完整的页面信息了。
网络爬虫还可以访问页面的完整HTML版本，并在搜索结果中建立索引和显示。
在后续的操作中，应用又变成了客户端渲染，这样能够保证页面变更内容能更快的到达用户。
可以通过一个图，对比CSR和SSR渲染同一页面所用的时间。 很明显，SSR渲染，页面的有效内容较早出现。 
其实，针对SSR还有其他的技术细节需要考虑，例如，何为同构、数据脱水、渲染注入(hydrate)等。关于SSR，我们后期会有专门的文章来解释。
下面，就直接来一个React SSR的实现步骤哇。 
2.3 使用渐进增强和特性探测
- HTML: 负责页面的骨架
- CSS: 装饰页面
- JS: 使页面变得可交互
Google建议使用渐进增强和特性探测用于对SPA进行SEO优化
- 首先，生成一个简易的HTML，这样既可以被爬虫所收录又可以快速的向用户展示
- 然后，使用特性探测来对CSS和JS进行渐进增强。
- 使用SSR渲染或者混合(hybrid)渲染来渲染通过接口获取的页面结构信息
- 利用响应式设计来兼容多个设备。不要向不同用户和搜索引擎展示不同的内容。
- 利用一些工具对SPA进行多浏览器的测试 例如
- 优化页面的加载速度
3. 另外增加 SPA 曝光度的方法
3.1 列出网站完整的页面列表
来自SEO高手的建议：为网站建立一个 Sitemap.xml。即便爬虫已经将你的网站收录了，网站所有者仍然可以继续向爬虫报告网站中未被收录的页面。
Sitemap.xml是一个包含你网站中所有URL连接的文件。你可以把sitemap.xml想象成向导，用于指引爬虫对网站进行针对性的探索。
sitemap是需要对外公布的。所以，需要在robot.txt中进行注册。
//robot.txt Sitemap: http://www.wl.com/sitemap.xml 复制代码
这样，爬虫就能知道你网站的sitemap.xml的具体位置。
同时，在html文档中，需要添加元信息 。这样，爬虫在访问到网站后，就会立马知道了，该网站是 SPA。
3.2 使用rel=canonical的连接
当网站中存在多个页面内容是一样的，rel=canonical的link标签就会派上用处。可以让爬虫知道URL的哪些部分是强制的，哪些不是。
例如，这将允许爬虫检测查询参数是否影响页面的呈现(分页参数，如?page=11，)或(跟踪参数，如source=baidu)。
如果有一个可以通过多个url访问的页面(电子商务网站经常发生这种情况)，或者有多个内容重复的页面，那么让其中一个成为规范页面。
选择认为更重要的页面（或者访问者/链接最多的页面）。每当访问非关键页面的时候，总会被引用到关键页面。
对于 cannoical的使用方式，可以参考如上连接。
3.3 TKD的优化
tilte/keywords/description可以在HTML的标签内定义。
- title的权重最高，利用title提高页面权重
- keywords相对权重较低，作为页面的辅助关键词搜索
- description的描述一般会直接显示在搜索结果的介绍中
资料参考
- Optimizing Single-Page Applications
- What is Googlebot
- canonical
- SSR 掘金小册
- 拉钩教育之现代前端技术解析
