简明扼要

1. SPA对SEO不友好，是由其「后续」页面内容存在「滞后性」导致的
2. SSR能提高SEO
3. Google建议使用「渐进增强」和「特性探测」用于对SPA进行SEO优化
4. sitemap.xml/canonical/TDK等都能提高页面的曝光度
5. 把sitemap.xml想象成向导，用于指引爬虫对网站进行针对性的探索

文章概要

1. 为何SPA对SEO不友好
2. 解决方案
3. 另外增加 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对网站应用的处理流程

1. 抓取
2. 渲染(呈现)
3. 编入索引

当 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进行多浏览器的测试 例如
  • BrowserStack.com
  • Browserling.com
  • BrowserShots.org
• 优化页面的加载速度

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文档中，需要添加元信息<meta name=”fragment” content=”!”>。这样，爬虫在访问到网站后，就会立马知道了，该网站是 SPA。

3.2 使用rel=canonical的连接

当网站中存在多个页面内容是一样的，rel=canonical的link标签就会派上用处。可以让爬虫知道URL的哪些部分是强制的，哪些不是。

例如，这将允许爬虫检测查询参数是否影响页面的呈现(分页参数，如?page=11，)或(跟踪参数，如source=baidu)。

如果有一个可以通过多个url访问的页面(电子商务网站经常发生这种情况)，或者有多个内容重复的页面，那么让其中一个成为「规范页面」。

选择认为更重要的页面（或者访问者/链接最多的页面）。每当访问非关键页面的时候，总会被引用到关键页面。

对于 cannoical的使用方式，可以参考如上链接。

3.3 TKD的优化

tilte/keywords/description可以在HTML的<meta>标签内定义。

• title的权重最高，利用title提高页面权重
• keywords相对权重较低，作为页面的辅助关键词搜索
• description的描述一般会直接显示在搜索结果的介绍中

资料参考

1. Optimizing Single-Page Applications
2. What is Googlebot
3. canonical
4. SSR 掘金小册
5. 拉钩教育之现代前端技术解析