9.1 搜索引擎收录

优质

小牛编辑

125浏览

2023-12-01

搜索引擎作为 Web 的重要的流量入口，是每个 Web App 开发者或运营者需要重点关注的一个方向，而 PWA 作为 Web 的一种形式，自然是需要关注搜索引擎对它的抓取和收录情况。通常 PWA 多数是 SPA，有以下几个原因：

SPA 天然具有 App Shell，也就是作为入口的 HTML。
App Shell 和 Service Worker 配套使用非常合适。
页面间切换顺畅，体验良好。

早期的几乎所有的搜索引擎都不支持索引 SPA，这导致 SPA 项目很少应用于依赖流量的用户产品类的 Web App，通常都只是作为内部项目的技术选型，当然这也是早期 Web 用户体验较差的一个原因之一。搜索引擎不能抓取和收录 SPA 有以下几个原因：

搜索引擎只是抓取服务端直出的 HTML页面，并不会去执行页面里包含的 JS 代码，所以无法抓取 SPA 前端渲染后的内容。
路由采用 hash 模式的 SPA 页面没有唯一的 URL，整个 SPA 站点都对应同一个 URL。

好消息是 Google 在 2015-10-14 宣布其搜索引擎可以和现代浏览器一样抓取页面中通过 JavaScript 执行渲染的内容https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html，这样的话，SPA 在搜索引擎中的抓取和收录问题就解决了大半，开发者可以通过 pushState API 的方式来改变 URL，代替 hash 方案，通过前端路由管理的方式让 URL 和 SPA 的页面一一对应，这样就完美的解决了 SPA 在搜索引擎中的抓取和收录问题。

但是事实并非如此，这仅仅是 Google 提出并实践出来了的方案，而现在市场上存在的搜索引擎还有非常多，它们并没有都像 Google 一样完全支持了抓取 SPA。在中国，百度作为最大的中文搜索引擎，从 2018 年才开始逐渐支持对移动端网页的 JavaScript 渲染内容的抓取。甚至直到今天市场还有很多搜索引擎并没有支持在抓取页面的时候运行 JavaScript。因此许多开发者或运营者为了兼顾所有搜索引擎的流量，还是不愿意尝试将整个站点改造为 SPA。

那么，SPA 作为 PWA 的主要存在形态之一，如何让开发者或运营者在这样的搜索引擎环境下去让自己的 Web App 改造成 SPA 甚至是 PWA 呢？通常有如下两种比较好的方案，不仅解决了搜索收录的问题，还能提升用户体验。

SSR（Server Side Rendering）服务端渲染。
结合 AMP/MIP。

当前许多 MVVM 前端开发框架都支持了 SPA/SSR 同构架构模式，如 React/Vue 等。通常采用 SSR 架构的 Web App 能做到第一次请求采用 SSR 模式直接在服务端渲染出内容，以供搜索引擎抓取和收录，第一屏无需在客户端通过执行 JavaScript 渲染内容，后续页面切换操作都是在客户端通过 pushState 的方式切换路由，采用前端渲染方式。这样既保证了搜索引擎的抓取和收录，也保证了 Web App 的良好用户体验。

当前存在的 PWA 有许多也是采用 SPA/SSR 同构架构模式进行开发的。SSR 虽然很好的解决了搜索引擎抓取和收录的问题，但是对于服务器资源的消耗较大，维护成本也相对较高，容易在服务端出现一些意想不到的问题，所以在实际项目中使用时需要多加注意。由于 SSR 可查阅的资料较多，所以 SSR 内容将不在本章过多介绍。

SPA 和 AMP/MIP 的结合，也是一种对搜索引擎友好的方案，在下一小节，将重点介绍这部分的内容。