《前端与SEO》—— 第五章：SPA与SSR 对 SEO 的影响-Toy模板网

这篇具有很好参考价值的文章主要介绍了《前端与SEO》—— 第五章：SPA与SSR 对 SEO 的影响。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

由于MVVM开发模式的兴起，很多网站的采用 SPA模式进行开发。尽管SPA模式有着诸多好处，但由于其特性，在SEO方面不太理想。

SPA与SEO

先对 SPA做个简单了解。

什么是SPA?

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

摘自——《SPA（单页应用程序）_百度百科 (baidu.com)》

概括来说，SPA模式开发的页面在一开始加载时只有很简单的HTML，没有任何与页面内容有关的东西。具体内容都是通过运行JavaScript动态渲染出来的。

正是因为这个特性，导致页面SEO的问题。

搜索引擎的收录网站的工作流程大致如下：

抓取：搜索引擎会使用名为“抓取工具”的自动程序从互联网上发现各类网页，并下载其中的文本、图片和视频。
索引编制：搜索引擎会分析网页上的文本、图片和视频文件，并将信息存储在大型数据库Google索引中。
呈现搜索结果：当用户在搜索引擎中搜索时，Google会返回与用户查询相关的信息。

当搜索引擎在抓取一个SPA网页进行解析时，由于HTML文件中不存在任何内容相关性的东西，搜索引擎就解析不出来任何有用的信息。所以说SPA页面对SEO极其不友好。

对 SPA页面的优化——增加“呈现步骤”

对于 SPA页面，部分搜索引擎增加了呈现步骤。以Google为例：

Googlebot 会将所有网页都加入呈现队列，除非漫游器元标记或标头告知 Google 不要将网页编入索引。网页在此队列中的存在时长可能会是几秒钟，但也可能会是更长时间。一旦 Google 的资源允许，无头 Chromium 便会呈现相应网页并执行 JavaScript。Googlebot 会再次解析所呈现的链接 HTML，并将找到的网址加入抓取队列。Google 还会使用所呈现的 HTML 将网页编入索引。

摘自——《了解 JavaScript SEO 基础知识 | Google 搜索中心 | 文档 | Google Developers》

简单来说，“呈现步骤”就是搜索引擎构建一个虚拟的浏览器环境，页面会在这个虚拟的浏览器中进行正常的页面渲染操作，等页面渲染完毕后，搜索引擎再对渲染后得页面进行解析。

但需要注意的是，并不是所以的搜索引擎都会增加“呈现步骤”。没有“呈现步骤”的搜索引擎依旧存在SEO问题。所以我们需要寻找一种根本性的解决方案。

SSR模式

SPA模式对SEO不友好的原因是——搜索引擎抓取到的HTML文件是还没有进行JS渲染的。这时人们就思考，如果能让HTML提前渲染就好了。SSR模式刚好就满足这个条件。

SSR是Server-Side Rendering的缩写，翻译过来就是服务端渲染。SSR原理很简单，就是HTML先在服务端渲染好，再发送给客户端（浏览器等）。因此，搜索引擎抓取 SSR模式的页面时，获取到的不再是一个没有意义的HTML文件了，而是可以直接解析出页面关键信息的HTML文件。

所以，如果网站非常注重SEO，SSR是一个非常好的解决方案。

需要注意的是，SSR模式并不是没有缺点。
由于页面的初步渲染在服务器中进行，这就会导致客户端向服务器请求一个页面时，需要增加一个等待渲染的过程。如果这个页面非常复杂，就会造成页面白屏时间过长的现象。此外，服务器渲染页面也会占用服务器资源，增加服务器的运行压力。

结语

由于 SPA页面在客户端渲染的机制，导致搜索引擎无法很好的解析页面信息，从而导致 SEO 工作无法展开。尽管Google等部分搜索引擎会对SPA进行虚拟渲染再解析，但是并不是所有的搜索引擎都会这样做。好在SSR模式能很好的兼顾到 SEO。当然，并不是所有的网站开发都要摒弃SPA转而使用SSR。两者各有利弊，根据实际情况决定。