關於 SAP 產品 UI 的搜索引擎優化 SEO - Search Engine Optimization

時間 2021-08-12

標籤 html 前端 git github express 編程瀏覽器緩存前端框架服務器欄目搜索引擎简体版

原文原文鏈接

這是 Jerry 2021 年的第 52 篇文章，也是汪子熙公衆號總共第 329 篇原創文章。html

本文的主題也源自 Jerry 團隊最近處理的一個客戶 incident, 而且與 Jerry 以前的文章 SAP UI渲染模式：客戶端渲染 VS 服務器端渲染 介紹的內容密切相關。前端

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

客戶端渲染

以下圖所示，用戶經過瀏覽器向網站發送請求，服務器或者 CDN 爲用戶提供靜態 HTML、CSS 和 JavaScript 文件。瀏覽器下載 HTML 和 JavaScript 文件，並執行 JavaScript(一般是 Angular，React，Vue，SAP UI5 等前端框架的庫文件)，完成頁面渲染。絕大多數狀況下，瀏覽器會經過 AJAX 向後臺服務器發出請求以獲取動態內容。從服務器端獲得 API 響應後，在客戶端瀏覽器中解析響應內容，以呈現最終頁面。github

客戶端渲染，由於經過 HTML 頁面源代碼渲染最終頁面，及根據 API 響應動態改變頁面內容的行爲，均發生在客戶端，於是得名。express

採用 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 支持搜索引擎優化上作出的努力有一些基本瞭解，感謝閱讀。

更多閱讀