HTML Tags
HTML 標簽，尤其是元標簽，允許搜索引擎、社交平臺和機器人在其平臺中使用頁面元數據。 通過仔細準備元標記，并定期評估它們的值，您可以提高頁面的排名、點擊率和可用性。 所有這些都會影響 SEO 和用戶體驗。

頁面元標記被寫入 HTML 的頭部。 在 HTML5 中，您可以使用各種元標記屬性，例如標題和描述。 這些元標簽被搜索引擎、社交平臺和爬蟲使用。 一些社交平臺已經引入了自己的特定于其平臺的屬性集。 例如，Facebook 使用 Open Graph 協議，它使任何網頁都可以成為社交圖中的豐富對象。 特定的元標簽可用于描述社交平臺上的體驗。 下面的代碼片段顯示了 Facebook 的自定義頁面描述：

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

雖然頁面元標記對描述頁面內容有很大幫助，但爬蟲已經開始利用替代技術來更好地理解內容。 這種技術稱為“結構化數據”，在 Spartacus 中也得到支持。 您可以在同一頁面上同時使用結構化數據和元標記。 每種技術都有其特定的目的和用途，并有相當多的重疊。 爬蟲在評估頁面內容時使用這兩種技術。

Spartacus 支持以下元標記，可以進一步自定義以滿足您的需求：

標簽的實際創建及其值取決于頁面類型。 例如，圖像標簽僅添加到產品詳細信息頁面。

Customizing Meta Tags

用于元標記的內容盡可能由后端（運行時）數據驅動。例如，產品詳細信息頁面的圖像標簽使用主產品圖像。另一個示例是產品詳細信息頁面的標題，它由產品標題、（第一）類別和品牌構成。

如果要進一步自定義元標記的創建，可以實現自定義 PageMetaResolvers。頁面解析器為特定頁面的元數據生成內容。可以進一步調整標準頁面解析器列表以滿足您的需求。

從 3.1 版開始，頁面解析器是可配置的，這使您可以更輕松地擴展解析器以滿足您的需求。 PageMetaService 會考慮解析器來構造 PageMeta 對象。 PageMeta 對象主要由 SeoMetaService 用于創建實際標簽。

大多數頁面元數據由爬蟲使用，因此在用戶瀏覽您的應用程序時不感興趣。因此，每個元數據標簽都可以配置為僅在服務器 (SSR) 上創建。這簡化了頁面的構建，從而提高了性能。但是，如果您想在開發中調試元標記，則可以使用 pageMeta.enableInDevMode 配置標志。

Title Resolver

向頁面添加 HTML 標題標簽具有以下優點：

• 該頁面可以在瀏覽器中進行唯一尋址（即通過瀏覽器歷史記錄、書簽、標簽等）
• 頁面標題提高了頁面在搜索引擎中的排名
• 頁面標題標識搜索引擎中的內容

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

讓我們以產品標題為例。為了在 SERP 中獲得良好的結果，產品詳細信息頁面通常會披露產品名稱、類別和品牌，如下所示：

產品名稱 | 主要類別 | 品牌

即：Product Title | Main category | Brand

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

Description Resolver

店面中的每個頁面都可以包含一個描述標簽。 描述標簽用于搜索引擎結果頁面以提高點擊率 (CTR)。 它不用于提高頁面排名。 為每個頁面創建一個描述標簽通常被認為是最佳實踐，盡管有時搜索引擎更有能力根據上下文生成描述。

Image Resolver

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

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

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

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

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

Robots Tag

您可以使用 robots 元標記來控制頁面是否被搜索索引編入索引。 機器人信息可以引導搜索索引指示頁面是否應該被索引以及是否應該跟蹤頁面上的鏈接。

大多數頁面都應該被索引和跟蹤。 但是，某些頁面包含私人信息，或不應編入索引的不相關內容。 雖然頁面解析器可以解析機器人信息，但 Spartacus 3.1 引入了一個標準頁面解析器，用于填充由 CMS 頁面數據提供的頁面機器人信息。 如果您使用的是 SAP Commerce Cloud 2005 或更新版本，則可以在 CMS 中維護機器人信息。

下表列出了可用于指導搜索引擎的值：

Spartacus 提供了一個單獨的 PageRobotsResolver 接口，您可以使用它來控制機器人元標記。 當 PageMeta 沒有提供任何值時，PageMetaService 使用 FOLLOW、NOINDEX。

CheckoutPageMetaResolver 演示了 PageRobotsResolver 的用法，并指示搜索引擎不要索引頁面，也不要跟蹤頁面上的任何鏈接。

Canonical URLs

注意：此功能是在 Spartacus 庫的 3.2 版中引入的。

如果您已經擁有自定義規范 URL，則使用 Spartacus 規范 URL 功能可能會導致重大更改。 因此，此功能將僅是從 Spartacus 4.0 開始的默認配置的一部分。 但是，您可以通過添加以下解析器配置在 3.2（或更高版本）中使用此功能：

pageMeta: {resolvers: [{property: 'canonicalUrl',method: 'resolveCanonicalUrl',disabledInCsr: true,},]; }

規范 URL 為頁面提供單個 URL，爬蟲使用此 URL 來優化搜索索引。 當頁面具有規范 URL 時，它可以幫助爬蟲避免將頁面識別為重復內容。 如果沒有規范 URL，（生成的）URL 中的細微差異將被視為重復，這可能會影響頁面的排名。

URL 變體可能是由外部系統（例如社交平臺）引入的，也可能是由 Web 應用程序的內部機制引起的。以下是 URL 變體的常見示例：

• 鏈接到社交平臺的帶有查詢參數的頁面：查詢參數因用戶而異，但實際頁面是相同的。

• 僅在所選尺寸或顏色方面不同的產品變體：URL 不同，但內容 99.99% 相似。

• 使用查詢或路由參數過濾產品列表頁面：使用各種過濾器，實際頁面內容可能相同。

以下是一些標準化 URL 的常用技術：

• 總是加 https://，避免 http://
• 總是加www。
• 刪除（某些）查詢參數
• 向所有 URL 添加尾部斜杠，剩余查詢參數的情況除外

PageMetaConfig 配置允許您配置規范 URL 創建的這些方面。Spartacus 的默認配置添加了 https 以及尾部斜杠，并刪除了查詢參數，如以下示例所示：

pageMeta: {canonicalUrl: {forceHttps: true,forceWww: false,removeQueryParams: true,forceTrailingSlash: true} }

未添加www子域，因為您可能將 Spartacus 無法以有效方式檢測到的店面子域使用。

產品詳細信息頁面的規范解析器使用產品數據來表明是否應該為當前產品創建規范 URL，或者在變體產品的情況下是否應該使用基礎產品來創建規范 URL。最有可能的是，相同產品的變體，在產品詳細信息頁面方面非常相似，應作為基礎產品公開發布重復內容。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

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

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