这是 Jerry 2021 年的第 52 篇文章，也是汪子熙公众号总共第 329 篇原创文章。

本文的主题也源自 Jerry 团队最近处理的一个客户 incident, 并且与 Jerry 之前的文章 SAP UI渲染模式：客户端渲染 VS 服务器端渲染 介绍的内容密切相关。

让我们简单回顾一下前文介绍的客户端渲染(Client Side Render，简称 CSR)和服务器端渲染(Server Side Render，简称 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 行的回调函数 done.

下图第 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，SAP Commerce Cloud 基于 JSP 技术的 Accelerator UI 等等。

基于 SAP Spartacus 开源项目的新一代 SAP Commerce Cloud UI，同时支持客户端渲染和服务器端渲染两种方式。

回归本文正题。

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

而开启服务器端渲染模式后，服务器端完成页面渲染，此时服务器返回浏览器的 app-root 标签内，已经包含了渲染完毕的最终页面。大家可以将下图服务器端渲染模式开启后，请求 SAP Commerce Cloud UI 首页时，从服务器端收到的 index.html 里 app-root 标签内的数据，同上图客户端渲染模式下的数据进行对比。

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

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

https://sap.github.io/spartacus-docs/server-side-rendering-optimization/

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

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

网站的搜索引擎优化是一门学问，本文 Jerry 只介绍最近处理客户 incident 了解到的相关知识。

我们在 Google 里根据关键字 lego ae 进行搜索，搜索结果的第二条记录，赫然就是乐高在阿联酋地区(国家代码为 AE)的电商店铺网站，这是一个基于 SAP Spartacus 开发的 SAP Commerce Cloud UI 页面：

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

再比如根据关键字 lego ae LEGO Dinosaur Fossils，搜索乐高一款恐龙化石的产品：

搜索出来的结果列表里，出现了一种 SAP Commerce Cloud UI PDP 页面 - Product Detail Page，即产品明细页面：

以上例子中无论是页面 title 标签，还是 meta description 标签的值，均为后台驱动，即来自 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 针对搜索引擎优化中基于 meta 标签的实现过程。

而在 SAP S/4HANA 这种 Backoffice 人员使用居多的应用里，页面里虽然也存在 meta 标签，但和 SAP Commerce Cloud UI 使用 meta description 标签支持搜索引擎优化不同，S/4HANA UI 页面里的 meta 标签，更多体现的是其维护页面元数据的原本用途，这些元数据被 SAP UI5 框架代码和对应的后台代码解析，对客户来说是完全透明的。

比如下图名称为 sap-client 的 meta 标签，维护的 content 内容为 715，意思是该 Fiori Launchpad 后台对应的 ABAP Client ID 为 715.

最后，大家在搜索引擎里使用 inurl 语法进行搜索，就能找到一些利用 SAP WebClient UI 技术，进行服务器端渲染，能够被搜索引擎检索到的网站。感兴趣的朋友可以自行尝试。

希望本文能够让大家对于 SAP 产品 UI 支持搜索引擎优化上做出的努力有一些基本了解，感谢阅读。

更多阅读

从产品展示页面谈谈Hybris的特有概念和设计结构
从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator
Hybris Enterprise Commerce Platform 服务层的设计与实现
从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发
SAP Commerce Cloud (电商云) UI 的懒加载功能
SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格
SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud (电商云) UI 增强实现中的体现
Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版
一小时内在本地搭建SAP Commerce Cloud(电商云)的前后台运行环境
SAP Commerce Cloud ( 电商云 ) 路由路径的自定义配置与开发
响应式编程在 SAP 标准产品 UI 开发中的一个实践
SAP UI的加载动画效果和幽灵设计(Ghost Design)
SAP UI渲染模式：客户端渲染 VS 服务器端渲染

更多Jerry的原创文章，尽在：“汪子熙”:

关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization相关推荐

SEO(search engine optimization)搜索引擎优化
简言之,增加特定关键字的曝光率以增加网站的能见度,进而增加销售机会. SEO主要工作:了解各类搜索引擎如何抓取互联网页面,如何进行索引以及确定对某一特定关键词搜索排名.来对网页进行相关优化,提高搜索引 ...
SAP 产品 UI 里的容器组件的概念和开发概述
这是 Jerry 2021 年的第 68 篇文章,也是汪子熙公众号总共第 345 篇原创文章. Jerry 之前的文章,谈谈 SAP 产品 UI 开发中的组件概念,曾经提到,无论基于何等开发技术的 S ...
聊聊 SAP 产品 UI 上的消息显示机制
这是 Jerry 2021 年的第 60 篇文章,也是汪子熙公众号总共第 337 篇原创文章. 本文从 StackOverflow 社区上来自 Partner 的一个 SAP Commerce Clo ...
网页性能优化与搜索引擎优化seo
一.为什么要提升web性能? Web性能黄金准则:只有10% ~ 20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影 ...
搜索引擎优化 SEO
搜索引擎优化(Search Engine Optimization,简称SEO)是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式.由于不少研究发现,搜索引擎的用户往往只会留意搜索 ...
搜索引擎优化的用乐云seo_搜索引擎优化SEO
搜索引擎优化,SEO(Search Engine Optimization),是指在了解诸如百度.搜狗等目标搜索网站的引擎自然排名机制基础上,对企业或产品网站进行内部及外部的调整优化,提升网页在搜索引 ...
搜索引擎优化 SEO攻略大全
域名注册恶意关键字(Keywords Spamming):这里不是指垃圾邮件(Email Spamming), 如果在您的网页内容上或在META标记中多次重复堆放某个关键字,这就叫做恶意关键字(Ke ...
搜索引擎优化SEO全攻略
搜索引擎优化SEO全攻略 http://www.lelew.com/ 成功的搜索引擎营销策略应该是在网站建设之初开始的,从域名的选择到网页的源代码书写开始.但目前的现状是多数网站建设的分工和流程都是把 ...
网站搜索引擎优化SEO策略及相关工具资源
网站搜索引擎优化SEO策略及相关工具资源网站优化的十大奇招妙技 1. 选择有效的关键字: 关键字是描述你的产品及服务的词语,选择适当的关键字是建立一个高排名网站的第一步.选择关键字的一个重要的技巧是 ...

关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization

客户端渲染

服务器端渲染

关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization相关推荐

最新文章

热门文章