搜索引擎优化定义 这是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-引擎引擎。如下：

　　服务端渲染完成后，最终呈现给客户端的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 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 Cloud 用户界面页面：

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

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

　　在搜索结果列表中有一个SAP Commerce Cloud UI PDP页面-Product Detail Page，也就是产品详情页面：

　　在上面的例子中，页面标题标签和元描述标签的值都是由后端驱动的，即来自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 后端读取页面元数据；

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