关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization-阿里云开发者社区

开发者社区> -技术小能手-> 正文

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

简介: 关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization
+关注继续查看

这是 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 响应后,在客户端浏览器中解析响应内容,以呈现最终页面。image.png客户端渲染,因为通过 HTML 页面源代码渲染最终页面,及根据 API 响应动态改变页面内容的行为,均发生在客户端,因而得名。


采用 CSR 技术的 SAP 产品 UI,包括一切使用 SAP UI5 框架开发的产品,比如 SAP Cloud for Customer,以及基于 SAP Fiori Elements 的 SAP S/4HANA 页面。


服务器端渲染

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

image.png例如,假设一个 Angular 应用开启了服务器端渲染模式,使用 express 库运行在一个 Node.js 服务器上,则该应用的 index.html 页面,通过 nguniversal/express-engine 引擎,进行渲染的入口位置如下:image.png服务器端渲染结束后,将最终呈现给客户的 HTML 源代码字符串,通过回调函数发送给浏览器,即下图第 1006 行的回调函数 done.

下图第 1008 行 done 回调函数中展示的变量 str,存储的是 SAP Commerce Cloud UI 开启服务器端渲染后,由服务器渲染完毕的 index.html 的完整 HTML 源代码,超过 240KB;而在客户端渲染模式下,服务器返回给浏览器的 index.html 内容, 大小还不到 1KB.

image.png采用 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 源代码。

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


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


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


https://sap.github.io/spartacus-docs/server-side-rendering-optimization/image.png支持服务器端渲染,只是完成搜索引擎优化的第一步。基于 SAP UI5 框架开发的 SAP 应用,绝大多数都不是 2C 应用,因此不依赖于搜索引擎优化,亦即这些应用不大可能会出现在用户的搜索引擎结果列表中。


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


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


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

image.png上图灰色区域的页面标题,和黄色区域的页面描述信息,分别来自 SAP Commerce Cloud UI 网页源代码中的 title 标签和 meta description 标签的值。image.pngimage.png再比如根据关键字 lego ae LEGO Dinosaur Fossils,搜索乐高一款恐龙化石的产品:

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

image.png以上例子中无论是页面 title 标签,还是 meta description 标签的值,均为后台驱动,即来自 SAP Commerce Cloud 后台系统。

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

image.png我们称上图的模型为 SAP Commerce Cloud UI 页面的元数据:Page Meta.

在运行时,这些页面元数据通过 PageMetaService 类的 meta$ 成员维护,其赋值逻辑如下:

(1) 调用 CMSService 的 getCurrentPage 方法,从 Commerce 后台读取页面元数据;


(2) 根据 Commerce Cloud 前端配置,读取当前类型的页面需要完成的元数据解析类型,得到负责执行对应操作的解析器(Resolvers);


(3) 调用对应的解析器,完成解析工作。image.png解析完毕的页面元数据,存储在 PageMetaService 的成员变量 meta$ 内,后者最终被 SeoMetaService 所订阅,将其值取出,注入到页面 DOM 元素中。这就是 SAP Commerce Cloud UI 针对搜索引擎优化中基于 meta 标签的实现过程。image.png而在 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.

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

image.png希望本文能够让大家对于 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 服务器端渲染




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10010 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12069 0
“爆料”搜索引擎蜘蛛是靠引导的,而不是佛系优化
又是一个不眠的夜晚,工作对生活节奏不断地敲打,我们新一代的年轻小伙不得不进步,满怀热情来挑战我们对于工作的激情,虽然每一天工作都是重复地进行,但是每一天都有我们留下的痕迹,为世界的美好增添一道绚丽的彩虹,默默的等待只会一无所获,辛劳的付出终归有丰硕的成果,世界万物因为有设计而变得美好,设计推动社会的发展,故此我们需要坚持不懈,用热情拥抱世界。
192 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13808 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11879 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7334 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载