搜索引擎、社交平臺和機器人使用 HTML 標簽，尤其是元標簽，在其平臺上顯示頁面元數據。 通過仔細準備元標記并定期評估它們的值，您可以提高頁面的排名、點擊率和可用性。 例如，瀏覽器使用標題標簽在選項卡、瀏覽器歷史記錄和書簽中顯示頁面的標題。 所有這些都會影響 SEO 和用戶體驗。

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

export interface PageMeta {title?: string;description?: string; }

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

<meta property="og:title" content="Custom title for Facebook" /> <meta property="og:description" content="Custom description for Facebook" />

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 標準。 以下標簽可用于告訴社交媒體使用特定圖像：

<meta name="og:image" value="https:storefont.com/myimage" />

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

您可以實現 PageImageResolver 來解析特定頁面的特定圖像。 ProductPageMetaResolver 通過提供產品詳細信息頁面的主要產品圖像 URL 來演示 PageImageResolver 的實現。

總結

以上是生活随笔為你收集整理的SAP Spartacus HTML Tags 实现介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。