搜索引擎已经成为我们日常生活中不可或缺的一部分；谷歌甚至成为英语中的动词。因此，每个企业都需要关注其搜索引擎排名。在 Baklib，我们最近遇到了 SEO 排名的挑战。因此，在我们讨论这个问题之前，让我们先了解一下爬行和渲染是如何工作的。

抓取和渲染如何工作？

网站所有者提供的每个网站上都可以使用 Google 机器人或计算机，其中包含我们网站的链接列表（称为“站点地图”）。当爬虫找到页面时，它会尝试像浏览器一样呈现该页面，但没有任何用户上下文。

大部分内容都在服务器上呈现，并且可以根据请求由浏览器查看。服务器端渲染可以在网站上提供惊人的快速体验，初始加载时间短，并且需要绘制的 JavaScript 更少。但大多数应用程序仍然不能仅仅依赖于完整的 SSR。

在客户端上使用 JavaScript 允许我们进行“事件处理”并在客户端上运行逻辑，而几乎不需要向服务器发出请求来执行客户端操作。

 Baklib 知识库经验

所有知识库站点都有一些共同的部分。这些都是非常标准的，可以在您访问的任何知识库网站上找到。

• 用于在内容之间导航的类别树（左）

• 内容部分（中）

• 目录（右）

•  搜索（顶部）

到目前为止，我们还没有谈到实际的问题。最近，我们的一些客户开始抱怨知识库 SEO产生了影响，并且用户在使用搜索引擎查找内容时遇到了困难。经过初步分析，我们发现加载页面内容的机制对 SEO 造成了影响。

我们必须在客户端初始化后执行一次获取内容的实现，并发出“ajax”请求以获取当前所选文章的内容，然后将内容绘制在 DOM 上。知识库是根据以下步骤加载的。

• 用户打开 URL 例如：[ https://docs.Baklib.com/docs/february-2023-release-note ]

• 页面的整体布局在服务器上渲染

• 服务器返回总体渲染的布局页面以及在客户端上进行渲染所需的一些数据。

• 布局初始化后，客户端会向服务器发送请求以获取当前文章的内容，网络请求 URL 如下所示“{subDomain}/load-article/{slug}”

• 举一个更准确的示例，URL 可能如下所示 

• 你注意到这里的问题了吗？用户查看文章的实际 URL 如下面的屏幕截图所示。 

• 这与谷歌机器人将抓取的网址相同，但它无法找到文章的内容，因为谷歌不知道我们通过子嵌套路由“load-article”加载内容。所以，很明显这是一个根本性问题，对我们的 SEO 产生巨大影响。这导致了更多问题

• Google 搜索结果重复

• Google 缓存内容为空

• 当我们查看公共网站的“缓存”页面时，它只是空的。因此，我们冒险寻找一个最佳且强大的解决方案，该解决方案将提高我们的 SEO 分数，并且不会在未来导致任何更多问题。

我们是这样解决这个问题的：

我们仍然坚信，当用户在类别树中的文章之间切换时，我们不应该重新加载整个页面，因此我们无论如何都必须进行“ajax”调用。但我们需要绘制内容而不绘制整个页面。

让我们想象两个场景：

• 用户访问页面并通过导航树阅读文章

• 机器人或蜘蛛在链接上爬行页面

场景1：用户访问页面

当用户访问页面时，如上所述，我们应该只在文章之间导航时绘制内容。但情况2则不然，当机器人访问一个URL时，它只需要爬取内容，它不关心或不知道我们是否再次绘制内容。

一个更好的例子可以更好地理解它。从用户角度来看，当用户浏览文章时，我们删除名为“load-article”的嵌套路由，只向实际 URL 发起请求，并带有一些额外的查询参数，以通知服务器该请求是由用户发起的。

 URL 类似于“{subDomain}/release-notes/?partialView=on”。 Google 会将带参数和不带参数的 URL 视为两个不同的 URL。为了解决这个问题，我们添加了一个规范标签，这样 Google 就会忽略带有查询参数的 URL [ 更多参考 Google 文档]。

站点可以具有查询参数来保留状态等。因此，当此请求到达服务器时，服务器仅响应内容。收到的内容块将被绘制在客户端上。

场景 2：机器人访问页面

当机器人访问页面时，我们会在服务器上呈现页面的全部内容。当机器人访问页面时，它只能直接通过站点地图知道内容的 URL。

最后的话

我们部署了这个解决方案，并在内部观察了几周，发现这种方法效果更好，并改善了我们通过 Google Lighthouse 测量的指标。