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

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

　　这是杰瑞2021年的第52篇文章，也是王子曦公众号总共第329篇原创文章。

　　本文的主题也源于 Jerry 团队最近处理的一个客户端事件，与 Jerry 之前介绍的文章 SAP UI Rendering Patterns: Client-Side Rendering vs Server-Side Rendering 密切相关。

　　让我们简单回顾一下前面介绍的客户端渲染（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。

　　使用SSR技术的SAP产品UI，包括所有基于SAP ABAP Webdynpro、WebClient UI技术的产品，如SAP SRM、SAP CRM、SAP S/4HANA中Service模块的UI、基于JSP技术的SAP Commerce Cloud、*敏*感*词*UI等...

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

　　回到本文的主题。

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

　　开启服务端渲染模式后，服务端完成页面渲染。此时，服务器返回浏览器的 app-root 标签，其中已经收录了最终渲染的页面。下图开启服务端渲染模式后请求SAP Commerce Cloud UI首页时，可以对比从服务端接收到的index.html中app-root标签中的数据，并与上图中的客户端渲染模式。

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

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

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

　　另一方面，比如客户使用SAP Commerce Cloud搭建自己的电商店铺，那么店铺搜索引擎优化的完善程度直接关系到店铺的销售额。

　　网站的搜索引擎优化是一门学问，这篇文章Jerry只介绍他最近从处理客户事件中学到的相关知识。

　　我们在谷歌根据关键词lego ae进行搜索，搜索结果的第二条记录是阿联酋LEGO的电子商务商店网站（国家代码AE），是基于SAP Spartacus开发的SAP Commerce Cloud 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前端配置，读取当前页面类型需要完成的元数据解析类型，获取负责执行相应操作的解析器；

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

　　解析后的页面元数据存放在PageMetaService的成员变量meta$中，最终被SeoMetaService订阅，取出其值注入到页面DOM元素中。这就是 SAP Commerce Cloud UI 如何为 SEO 实现基于元标记的实现。

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

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

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

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