天天看點

SAP Spartacus HTML Tags 實作介紹

搜尋引擎、社交平台和機器人使用 HTML 标簽,尤其是元标簽,在其平台上顯示頁面中繼資料。 通過仔細準備元标記并定期評估它們的值,您可以提高頁面的排名、點選率和可用性。 例如,浏覽器使用标題标簽在頁籤、浏覽器曆史記錄和書簽中顯示頁面的标題。 所有這些都會影響 SEO 和使用者體驗。

SAP Spartacus HTML Tags 實作介紹

PageMeta 模型是一組可以由所謂的頁面元解析器解析的屬性。 解析器可以在細粒度級别上進行擴充,并且可以對生成的标簽做出貢獻。 PageMeta 模型包含以下屬性:

SAP Spartacus HTML Tags 實作介紹

HTML5 支援多種元标記屬性,例如 description. 這些元标簽被搜尋引擎、社交平台和機器人使用。 一些社交平台引入了自己的特定于其平台的屬性集。 例如,Facebook 使用 Open Graph protocol使任何網頁都可以成為社交圖譜中的豐富對象。 特定的元标簽可用于闡明社交平台上的體驗。 下面的代碼片段顯示了 Facebook 的自定義頁面描述:

SAP Spartacus HTML Tags 實作介紹

Page Meta Resolvers

為了支援潛在的大量元标記,Spartacus 使用一個小型架構來自定義和擴充每個頁面的元标記。

Spartacus 附帶了 PageMetaResolvers,用于解析特定頁面的頁面中繼資料。 一些中繼資料可能由 CMS 資料驅動,但大多數元标記是根據産品内容、類别内容、搜尋結果等計算的。

頁面中繼資料在導航期間動态更新,但可以使用 SSR 靜态傳遞。

Title Resolver

向頁面添加 HTML 标題标簽具有以下優點:

該頁面可以在浏覽器中進行唯一尋址(即通過浏覽器曆史記錄、書簽、标簽等)

頁面标題提高了頁面在搜尋引擎中的排名

頁面标題辨別搜尋引擎中的内容

Spartacus 為需要特定标題的頁面提供了一個特殊的解析器。搜尋引擎結果頁面 (SERP) 的頁面标題不一定與 UI 中顯示的頁面标題相同。

讓我們以産品标題為例。為了在 SERP 中獲得良好的結果,産品詳細資訊頁面通常會披露産品名稱、類别和品牌,如下所示:

Product Title | Main category | Brand

但是,這樣的标題在 UI 中看起來不太好,是以為此使用了不同的标題。 為了支援靈活性,Spartacus 使用特定的 PageHeadingResolver 可以在頁面解析邏輯中實作。

Description Resolver

店面上的每個頁面都可以包含一個描述标簽。 描述标簽用于搜尋引擎結果頁面以提高點選率 (CTR - click-through-rate)。 它不用于提高頁面排名。 為每個頁面建立一個描述标簽通常被認為是最佳實踐,盡管有時搜尋引擎更有能力根據上下文生成描述。

Image Resolver

要與社交媒體(例如 Facebook、Twitter、Pinterest 等)共享頁面,在元标記中提供正确的圖像非常重要。 為此,廣泛采用了 Facebook 的 Open Graph 标準。 以下标簽可用于告訴社交媒體使用特定圖像:

1

雖然可以通過複制具有不同值的标簽來提供多個圖像(例如,對于圖像庫),但 Spartacus 僅提供單個圖像的解決方案。 這被認為是商業店面的最佳實踐。

您可以實作 PageImageResolver 來解析特定頁面的特定圖像。 ProductPageMetaResolver 通過提供産品詳細資訊頁面的主要産品圖像 URL 來示範 PageImageResolver 的實作。

繼續閱讀