搜索引擎主題模型優(yōu)化(這是Jerry2021年的第52篇文章，也是汪子熙公眾號)

　　這是杰瑞2021年的第52篇文章，也是王子曦公眾號總共第329篇原創(chuàng )文章。

　　本文的主題還源于 Jerry 團隊最近處理的一個(gè)客戶(hù)事件，并且與 Jerry 之前的 文章 演示文稿的內容密切相關(guān)。

　　讓我們簡(jiǎn)單回顧一下前面介紹的客戶(hù)端渲染（CSR）和服務(wù)器端渲染（SSR）的區別。

　　客戶(hù)端渲染

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

　　客戶(hù)端渲染之所以得名，是因為通過(guò) HTML 頁(yè)面的源代碼渲染最終頁(yè)面并根據 API 響應動(dòng)態(tài)更改頁(yè)面內容的行為發(fā)生在客戶(hù)端。

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

　　服務(wù)器端渲染

　　與CSR相比，在服務(wù)器端渲染機制中，從HTML源代碼到最終呈現給用戶(hù)的頁(yè)面的轉換過(guò)程是在服務(wù)器端運行環(huán)境中進(jìn)行的。

　　例如，假設 Angular 應用開(kāi)啟了服務(wù)端渲染模式，并使用 express 庫在 Node.js 服務(wù)器上運行，那么應用的 index.html 頁(yè)面將通過(guò) nguniversal/express-engine 引擎進(jìn)行渲染。入口位置如下：

　　服務(wù)端渲染完成后，最終呈現給客戶(hù)端的HTML源代碼字符串通過(guò)回調函數發(fā)送給瀏覽器，也就是下圖1006行做的回調函數。

　　下圖第1008行done回調函數中顯示的變量str存儲了SAP Commerce Cloud UI啟動(dòng)服務(wù)端渲染后服務(wù)端渲染的index.html的完整HTML源代碼，超過(guò)240KB；而在客戶(hù)端渲染模式下，服務(wù)器返回給瀏覽器的 index.html 內容大小小于 1KB。

　　使用SSR技術(shù)的SAP產(chǎn)品UI，包括所有基于SAP ABAP Webdynpro、WebClient UI技術(shù)的產(chǎn)品，如SAP SRM、SAP CRM、SAP S/4HANA中Service模塊的UI、基于JSP技術(shù)的SAP Commerce Cloud、*敏*感*詞*UI等...

　　基于 SAP Spartacus 開(kāi)源項目的新一代 SAP Commerce Cloud UI 支持客戶(hù)端渲染和服務(wù)器端渲染。

　　回到本文的主題。

　　在客戶(hù)端渲染模式下，Web 應用程序對 SEO 的支持較少。以 SAP Commerce Cloud UI 為例，在使用客戶(hù)端渲染時(shí)，搜索引擎的網(wǎng)絡(luò )爬蟲(chóng)爬取了一個(gè)空的 index.html 頁(yè)面：app-root 標簽中沒(méi)有內容，因為直到接收到內容瀏覽器接收 index.html 頁(yè)面。html，執行 Angular 框架代碼，生成最終的 HTML 源代碼。

　　開(kāi)啟服務(wù)端渲染模式后，服務(wù)端完成頁(yè)面渲染。此時(shí)，服務(wù)器返回瀏覽器的 app-root 標簽，其中已經(jīng)收錄了最終渲染的頁(yè)面。下圖開(kāi)啟服務(wù)端渲染模式后請求SAP Commerce Cloud UI首頁(yè)時(shí)，可以對比從服務(wù)端接收到的index.html中app-root標簽中的數據，并與上圖中的客戶(hù)端渲染模式。

　　服務(wù)端渲染解決了網(wǎng)頁(yè)爬蟲(chóng)無(wú)法正確抓取網(wǎng)頁(yè)應用頁(yè)面內容的問(wèn)題。但是，將頁(yè)面渲染、數據請求和響應處理移到服務(wù)器端，勢必會(huì )占用服務(wù)器端寶貴的內存資源，增加其處理負擔。

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

　　支持服務(wù)端渲染只是完成搜索引擎優(yōu)化的第一步?；赟AP UI5框架開(kāi)發(fā)的SAP應用大多不是2C應用，所以不依賴(lài)搜索引擎優(yōu)化，即這些應用不太可能出現在用戶(hù)的搜索引擎結果列表中。

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

　　網(wǎng)站的搜索引擎優(yōu)化是一門(mén)學(xué)問(wèn)，這篇文章Jerry只介紹他最近從處理客戶(hù)事件中學(xué)到的相關(guān)知識。

　　我們在谷歌根據關(guān)鍵詞lego ae進(jìn)行搜索，搜索結果的第二條記錄是阿聯(lián)酋LEGO的電子商務(wù)商店網(wǎng)站（國家代碼AE），是基于SAP Spartacus SAP Commerce開(kāi)發(fā)的云界面頁(yè)面：

　　上圖中灰色區域的頁(yè)面標題和*敏*感*詞*區域的頁(yè)面描述分別來(lái)自SAP Commerce Cloud UI網(wǎng)頁(yè)源代碼中的title標簽和meta description標簽的值。

　　另一個(gè)例子是根據關(guān)鍵詞 lego ae LEGO Dinosaur Fossils 搜索一個(gè)樂(lè )高恐龍化石產(chǎn)品：

　　在搜索結果列表中，會(huì )出現一個(gè) SAP Commerce Cloud UI PDP 頁(yè)面 - 產(chǎn)品詳細信息頁(yè)面，它是一個(gè)產(chǎn)品詳細信息頁(yè)面：

　　在上面的示例中，頁(yè)面標題標簽和元描述標簽的值都是后端驅動(dòng)的，即來(lái)自 SAP Commerce Cloud 后端系統。

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

　　我們將上述模型稱(chēng)為 SAP Commerce Cloud UI 頁(yè)面的元數據：Page Meta。

　　在運行時(shí)，這些頁(yè)面元數據是通過(guò)PageMetaService類(lèi)的meta$成員來(lái)維護的，賦值邏輯如下：

　?。?)調用cmsService的getCurrentPage方法從Commerce后臺讀取頁(yè)面元數據；

　　(2)根據Commerce Cloud的前端配置，讀取當前頁(yè)面類(lèi)型需要完成的元數據解析類(lèi)型，獲取負責執行相應操作的解析器；

　　(3) 調用對應的解析器完成解析工作。

　　解析后的頁(yè)面元數據存放在PageMetaService的成員變量meta$中，最終被SeoMetaService訂閱，取出其值注入到頁(yè)面DOM元素中。這就是 SAP Commerce Cloud UI 如何為 SEO 實(shí)現基于元標記的實(shí)現。

　　在 SAP S/4HANA 等后臺人員使用較多的應用程序中，雖然頁(yè)面上有元標記，但與 SAP Commerce Cloud UI 中使用元描述標記來(lái)支持搜索引擎優(yōu)化是不同的。S/4HANA UI頁(yè)面中的meta標簽，更多體現的是維護頁(yè)面元數據的初衷，由SAP UI5框架代碼和對應的后臺代碼解析，對客戶(hù)完全透明。

　　例如下圖中的meta標簽名稱(chēng)為sap-client，維護的內容為715，表示Fiori Launchpad后臺對應的ABAP Client ID為715.

　　最后，可以使用inurl語(yǔ)法在搜索引擎中搜索，可以找到一些網(wǎng)站使用SAP WebClient UI技術(shù)進(jìn)行服務(wù)端渲染，可以被搜索引擎檢索到。有興趣的朋友可以自己試試。

　　希望這篇文章能讓你對SAP產(chǎn)品UI在支持搜索引擎優(yōu)化方面所做的努力有一些基本的了解，謝謝閱讀。