這是 Jerry 2021 年的第 52 篇文章，也是汪子熙公眾號總共第 329 篇原創(chuàng)文章。

本文的主題也源自 Jerry 團隊最近處理的一個客戶 incident, 并且與 Jerry 之前的文章?SAP UI渲染模式：客戶端渲染 VS 服務(wù)器端渲染?介紹的內(nèi)容密切相關(guān)。

讓我們簡單回顧一下前文介紹的客戶端渲染(Client Side Render，簡稱 CSR)和服務(wù)器端渲染(Server Side Render，簡稱 SSR)的區(qū)別。

客戶端渲染

如下圖所示，用戶通過瀏覽器向網(wǎng)站發(fā)送請求，服務(wù)器或者 CDN 為用戶提供靜態(tài) HTML、CSS 和 JavaScript 文件。瀏覽器下載 HTML 和 JavaScript 文件，并執(zhí)行 JavaScript(通常是 Angular，React，Vue，SAP UI5 等前端框架的庫文件)，完成頁面渲染。絕大多數(shù)情況下，瀏覽器會通過 AJAX 向后臺服務(wù)器發(fā)出請求以獲取動態(tài)內(nèi)容。從服務(wù)器端得到 API 響應(yīng)后，在客戶端瀏覽器中解析響應(yīng)內(nèi)容，以呈現(xiàn)最終頁面。

客戶端渲染，因為通過 HTML 頁面源代碼渲染最終頁面，及根據(jù) API 響應(yīng)動態(tài)改變頁面內(nèi)容的行為，均發(fā)生在客戶端，因而得名。

采用 CSR 技術(shù)的 SAP 產(chǎn)品 UI，包括一切使用 SAP UI5 框架開發(fā)的產(chǎn)品，比如 SAP Cloud for Customer，以及基于 SAP Fiori Elements 的 SAP S/4HANA 頁面。

服務(wù)器端渲染

與 CSR 相比，在服務(wù)器端渲染機制中，從 HTML 源代碼到最終呈現(xiàn)給用戶的頁面的轉(zhuǎn)換過程，均在服務(wù)器端運行環(huán)境中執(zhí)行。

例如，假設(shè)一個 Angular 應(yīng)用開啟了服務(wù)器端渲染模式，使用 express 庫運行在一個 Node.js 服務(wù)器上，則該應(yīng)用的 index.html 頁面，通過 nguniversal/express-engine 引擎，進行渲染的入口位置如下：

服務(wù)器端渲染結(jié)束后，將最終呈現(xiàn)給客戶的 HTML 源代碼字符串，通過回調(diào)函數(shù)發(fā)送給瀏覽器，即下圖第 1006 行的回調(diào)函數(shù) done.

下圖第 1008 行 done 回調(diào)函數(shù)中展示的變量 str，存儲的是 SAP Commerce Cloud UI 開啟服務(wù)器端渲染后，由服務(wù)器渲染完畢的 index.html 的完整 HTML 源代碼，超過 240KB；而在客戶端渲染模式下，服務(wù)器返回給瀏覽器的 index.html 內(nèi)容, 大小還不到 1KB.

采用 SSR 技術(shù)的 SAP 產(chǎn)品 UI，包括所有基于 SAP ABAP Webdynpro，WebClient UI 技術(shù)的產(chǎn)品，比如 SAP SRM，SAP CRM，SAP S/4HANA 里的 Service 模塊的 UI，SAP Commerce Cloud 基于 JSP 技術(shù)的 Accelerator UI 等等。

基于 SAP Spartacus 開源項目的新一代 SAP Commerce Cloud UI，同時支持客戶端渲染和服務(wù)器端渲染兩種方式。

回歸本文正題。

客戶端渲染模式下，Web 應(yīng)用對搜索引擎優(yōu)化的支持較弱。以 SAP Commerce Cloud UI 為例，當使用客戶端渲染時，搜索引擎的網(wǎng)絡(luò)爬蟲，抓取的 index.html 頁面空空如也：app-root 標簽內(nèi)，沒有任何內(nèi)容，因為該內(nèi)容直至瀏覽器收到 index.html 之后，才會執(zhí)行 Angular 框架代碼，生成最終的 HTML 源代碼。

而開啟服務(wù)器端渲染模式后，服務(wù)器端完成頁面渲染，此時服務(wù)器返回瀏覽器的 app-root 標簽內(nèi)，已經(jīng)包含了渲染完畢的最終頁面。大家可以將下圖服務(wù)器端渲染模式開啟后，請求 SAP Commerce Cloud UI 首頁時，從服務(wù)器端收到的 index.html 里 app-root 標簽內(nèi)的數(shù)據(jù)，同上圖客戶端渲染模式下的數(shù)據(jù)進行對比。

服務(wù)器端渲染解決了網(wǎng)絡(luò)爬蟲無法正確抓取 Web 應(yīng)用頁面內(nèi)容的問題, 然而把頁面渲染，數(shù)據(jù)請求和響應(yīng)處理移至服務(wù)器端，勢必會占用服務(wù)器端寶貴的內(nèi)存資源和增加其處理負擔。

為此，在 SAP Commerce Cloud UI 服務(wù)器端渲染模式下，我們團隊也設(shè)計了一些優(yōu)化邏輯，比如引入渲染緩存，增加渲染隊列和超時機制，以及在一定條件下降級到客戶端渲染等措施，以此在保證服務(wù)器正常的服務(wù)能力和支持搜索引擎優(yōu)化之間，獲得較好的折衷。

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

支持服務(wù)器端渲染，只是完成搜索引擎優(yōu)化的第一步。基于 SAP UI5 框架開發(fā)的 SAP 應(yīng)用，絕大多數(shù)都不是 2C 應(yīng)用，因此不依賴于搜索引擎優(yōu)化，亦即這些應(yīng)用不大可能會出現(xiàn)在用戶的搜索引擎結(jié)果列表中。

另一方面，比如客戶使用 SAP Commerce Cloud 搭建自己的電商店鋪，則店鋪對于搜索引擎優(yōu)化的完善程度，和店鋪的銷售額有直接的關(guān)系。

網(wǎng)站的搜索引擎優(yōu)化是一門學問，本文 Jerry 只介紹最近處理客戶 incident 了解到的相關(guān)知識。

我們在 Google 里根據(jù)關(guān)鍵字 lego ae 進行搜索，搜索結(jié)果的第二條記錄，赫然就是樂高在阿聯(lián)酋地區(qū)(國家代碼為 AE)的電商店鋪網(wǎng)站，這是一個基于 SAP Spartacus 開發(fā)的 SAP Commerce Cloud UI 頁面：

上圖灰色區(qū)域的頁面標題，和黃色區(qū)域的頁面描述信息，分別來自 SAP Commerce Cloud UI 網(wǎng)頁源代碼中的 title 標簽和 meta description 標簽的值。

再比如根據(jù)關(guān)鍵字 lego ae LEGO Dinosaur Fossils，搜索樂高一款恐龍化石的產(chǎn)品：

搜索出來的結(jié)果列表里，出現(xiàn)了一種 SAP Commerce Cloud UI PDP 頁面 - Product Detail Page，即產(chǎn)品明細頁面：

以上例子中無論是頁面 title 標簽，還是 meta description 標簽的值，均為后臺驅(qū)動，即來自 SAP Commerce Cloud 后臺系統(tǒng)。

我們團隊在 SAP Commerce Cloud UI 實現(xiàn)中，設(shè)計了 Page 模型，其 title 字段和 description 字段，分別維護需要渲染在 HTML 源代碼 title 和 meta description 標簽頁的值。

我們稱上圖的模型為 SAP Commerce Cloud UI 頁面的元數(shù)據(jù)：Page Meta.

在運行時，這些頁面元數(shù)據(jù)通過 PageMetaService 類的 meta$ 成員維護，其賦值邏輯如下：

(1) 調(diào)用 CMSService 的 getCurrentPage 方法，從 Commerce 后臺讀取頁面元數(shù)據(jù)；

(2) 根據(jù) Commerce Cloud 前端配置，讀取當前類型的頁面需要完成的元數(shù)據(jù)解析類型，得到負責執(zhí)行對應(yīng)操作的解析器(Resolvers)；

(3) 調(diào)用對應(yīng)的解析器，完成解析工作。

解析完畢的頁面元數(shù)據(jù)，存儲在 PageMetaService 的成員變量 meta$ 內(nèi)，后者最終被 SeoMetaService 所訂閱，將其值取出，注入到頁面 DOM 元素中。這就是 SAP Commerce Cloud UI 針對搜索引擎優(yōu)化中基于 meta 標簽的實現(xiàn)過程。

而在 SAP S/4HANA 這種 Backoffice 人員使用居多的應(yīng)用里，頁面里雖然也存在 meta 標簽，但和 SAP Commerce Cloud UI 使用 meta description 標簽支持搜索引擎優(yōu)化不同，S/4HANA UI 頁面里的 meta 標簽，更多體現(xiàn)的是其維護頁面元數(shù)據(jù)的原本用途，這些元數(shù)據(jù)被 SAP UI5 框架代碼和對應(yīng)的后臺代碼解析，對客戶來說是完全透明的。

比如下圖名稱為 sap-client 的 meta 標簽，維護的 content 內(nèi)容為 715，意思是該 Fiori Launchpad 后臺對應(yīng)的 ABAP Client ID 為 715.

最后，大家在搜索引擎里使用 inurl 語法進行搜索，就能找到一些利用 SAP WebClient UI 技術(shù)，進行服務(wù)器端渲染，能夠被搜索引擎檢索到的網(wǎng)站。感興趣的朋友可以自行嘗試。

希望本文能夠讓大家對于 SAP 產(chǎn)品 UI 支持搜索引擎優(yōu)化上做出的努力有一些基本了解，感謝閱讀。

更多閱讀

• 從產(chǎn)品展示頁面談?wù)凥ybris的特有概念和設(shè)計結(jié)構(gòu)

• 從產(chǎn)品展示頁面談?wù)凥ybris系列之二: DTO, Converter和Populator

• Hybris Enterprise Commerce Platform 服務(wù)層的設(shè)計與實現(xiàn)

• 從一個實際的例子出發(fā)，談?wù)凷AP Commerce Cloud電商云的UI自定義開發(fā)

• SAP Commerce Cloud (電商云) UI 的懶加載功能

• SAP CRM Fiori 應(yīng)用和 SAP Commerce Cloud (電商云) UI 如何通過調(diào)整CSS來改變UI顯示風格

• SAP 產(chǎn)品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商云) UI 增強實現(xiàn)中的體現(xiàn)

• Jerry在2020 SAP全球技術(shù)大會的分享：SAP Spartacus技術(shù)介紹的文字版

• 一小時內(nèi)在本地搭建SAP Commerce Cloud(電商云)的前后臺運行環(huán)境

• SAP Commerce Cloud ( 電商云 ) 路由路徑的自定義配置與開發(fā)

• 響應(yīng)式編程在 SAP 標準產(chǎn)品 UI 開發(fā)中的一個實踐

• SAP UI的加載動畫效果和幽靈設(shè)計(Ghost Design)

• SAP UI渲染模式：客戶端渲染 VS 服務(wù)器端渲染

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。