搜索引擎优化模式(这是Jerry2021年的第52篇文章，也是汪子熙公众号)

　　搜索引擎优化模式(这是Jerry2021年的第52篇文章，也是汪子熙公众号)

　　这是Jerry 2021年的第52个文章，也是王子曦公众号的第329个原创文章。

　　这篇文章的话题同样源于Jerry团队最近处理的一起客户事件，与Jerry之前的文章介绍的内容密切相关。

　　让我们简单回顾一下前面介绍的客户端渲染（CSR）和服务器端渲染（SSR）之间的区别。

　　客户端渲染

　　如下图所示，用户通过浏览器向网站发送请求，服务器或CDN为用户提供静态HTML、CSS、JavaScript文件。浏览器下载HTML和JavaScript文件，并执行JavaScript（通常是Angular、React、Vue、SAP UI5等前端框架的库文件）完成页面渲染。大多数情况下，浏览器会通过AJAX向后台服务器发送获取动态内容的请求。从服务器得到API响应后，响应内容在客户端浏览器中解析，呈现最终页面。

　　客户端渲染，因为通过HTML页面的源代码来渲染最终页面，以及根据API响应动态改变页面内容的行为，都发生在客户端，故名。

　　使用CSR技术的SAP产品的UI包括所有使用SAP UI5框架开发的产品，如SAP Cloud for Customer、基于SAP Fiori Elements的SAP S/4HANA页面。

　　服务端渲染

　　与CSR相比，在服务端渲染机制中，从HTML源代码到最终呈现给用户的页面的转换过程是在服务端运行环境中执行的。

　　例如，假设一个 Angular 应用开启了服务端渲染模式，并使用 express 库在 Node.js 服务器上运行，那么应用的 index.html 页面是通过 nguniversal/express-engine 引擎和渲染入口点如下：

　　服务端渲染完成后，最终呈现给客户端的HTML源代码字符串通过回调函数发送给浏览器，也就是下图1006行完成的回调函数。

　　下图1008行done回调函数中显示的变量str存储了SAP Commerce Cloud UI开启服务端渲染后服务端渲染的index.html的完整HTML源码，超过240KB；而在客户端渲染模式下，服务器返回给浏览器的 index.html 内容大小小于 1KB。

　　SAP产品UI采用SSR技术，包括所有基于SAP ABAP Webdynpro的产品、WebClient UI技术，如SAP SRM、SAP CRM、SAP S/4HANA中的Service module UI、基于JSP技术的SAP Commerce Cloud Accelerator UI等。

　　基于 SAP Spartacus 开源项目的新一代 SAP Commerce Cloud UI 支持客户端渲染和服务器端渲染。

　　回到本文的主题。

　　在客户端渲染模式下，Web 应用程序对搜索引擎优化的支持较弱。以 SAP Commerce Cloud UI 为例。使用客户端渲染时，搜索引擎网络爬虫爬取的index.html页面为空：app-root标签中没有内容，因为浏览器接收到索引后才出现内容。html之后，会执行Angular框架代码，生成最终的HTML源代码。

　　开启服务端渲染模式后，服务端完成页面渲染。这时候服务端返回到浏览器的app-root标签，里面已经收录了渲染的最终页面。可以在下图中开启服务端渲染模式，在服务端渲染模式开启后，在请求SAP Commerce Cloud UI主页时，对比从服务端收到的index.html中app-root标签中的数据启用。

　　服务端渲染解决了网络爬虫无法正确抓取Web应用页面内容的问题。但是，将页面渲染、数据请求和响应处理转移到服务器端，势必会占用服务器端宝贵的内存资源，增加其处理负担。

　　为此，在SAP Commerce Cloud UI服务端渲染模式下，我们团队还设计了一些优化逻辑，比如引入渲染缓存，增加渲染队列和超时机制，在一定条件下降级到客户端渲染。在保证服务器正常服务能力和支持搜索引擎优化之间取得了很好的折衷。

　　支持服务端渲染只是完成搜索引擎优化的第一步。基于SAP UI5框架开发的SAP应用大部分不是2C应用，所以不依赖搜索引擎优化，即这些应用不太可能出现在用户的搜索引擎结果列表中。

　　另一方面，例如，如果客户使用SAP Commerce Cloud 建立自己的电子商务商店，商店的搜索引擎优化水平直接关系到商店的销售额。

　　网站的搜索引擎优化是一门学科。在本文中，Jerry 只介绍了他最近在处理客户事件时学到的相关知识。

　　我们在谷歌搜索关键字lego ae，搜索结果的第二条记录是乐高在阿联酋的电子商务商店（国家代码为AE）网站，基于SAP Spartacus SAP Commerce开发云UI页面：

　　上图中灰色区域的页面标题和*敏*感*词*区域的页面描述信息分别来源于SAP Commerce Cloud UI网页源代码中的title标签和meta description标签的值。

　　例如，根据关键词lego ae LEGO Dinosaur Fossils，搜索乐高恐龙化石产品：

　　在搜索结果列表中，出现 SAP Commerce Cloud UI PDP 页面-产品详细信息页面：

　　在上面的例子中，页面标题标签和元描述标签的值都是由后端驱动的，即来自 SAP Commerce Cloud 的后端系统。

　　在 SAP Commerce Cloud UI 实施中，我们的团队设计了 Page 模型。它的title字段和description字段分别维护了HTML源代码的title和meta description标签中需要渲染的值。

　　我们将上图中的模型称为 SAP Commerce Cloud UI 页面的元数据：Page Meta。

　　在运行时，这些页面元数据由PageMetaService类的meta$成员维护，赋值逻辑如下：

　　（1)调用cmsService的getCurrentPage方法从Commerce后端读取页面元数据；

　　（2)根据Commerce Cloud前端配置，读取当前页面类型需要完成的元数据解析类型，获取负责执行相应操作的解析器（Resolvers）；

　　(3) 调用对应的解析器完成解析工作。

　　解析后的页面元数据存储在PageMetaService 的成员变量meta$ 中。后者最终被 SeoMetaService 订阅，并将其值取出并注入到页面 DOM 元素中。这是SAP Commerce Cloud UI 基于元标签的搜索引擎优化的实现过程。

　　在SAP S/4HANA这样的Backoffice人员使用较多的应用中，虽然页面上有meta标签，但与SAP Commerce Cloud UI使用meta描述标签来支持搜索引擎优化不同。S/4HANA UI页面中的meta标签，更多体现在其维护页面元数据的初衷。这些元数据由SAP UI5框架代码和相应的后端代码解析，对客户完全透明。

　　例如下图中名为sap-client的meta标签，维护的内容内容为715，即Fiori Launchpad backend对应的ABAP Client ID为715.

　　最后，当你在搜索引擎中使用inurl语法进行搜索时，可以找到一些网站，使用SAP WebClient UI技术进行服务器端渲染，可以被搜索引擎检索到。有兴趣的朋友可以自行尝试。

　　希望这篇文章能让你对SAP产品UI为支持搜索引擎优化所做的努力有一些基本的了解。感谢您的阅读。