SAP Spartacus HTML Tags 实现介绍

搜索引擎、社交平台和机器人使用 HTML 标签，尤其是元标签，在其平台上显示页面元数据。 通过仔细准备元标记并定期评估它们的值，您可以提高页面的排名、点击率和可用性。 例如，浏览器使用标题标签在选项卡、浏览器历史记录和书签中显示页面的标题。 所有这些都会影响 SEO 和用户体验。

PageMeta 模型是一组可以由所谓的页面元解析器解析的属性。 解析器可以在细粒度级别上进行扩展，并且可以对生成的标签做出贡献。 PageMeta 模型包含以下属性：

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

HTML5 支持多种元标记属性，例如 description. 这些元标签被搜索引擎、社交平台和机器人使用。 一些社交平台引入了自己的特定于其平台的属性集。 例如，Facebook 使用 Open Graph protocol使任何网页都可以成为社交图谱中的丰富对象。 特定的元标签可用于阐明社交平台上的体验。 下面的代码片段显示了 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 标准。 以下标签可用于告诉社交媒体使用特定图像：

虽然可以通过复制具有不同值的标签来提供多个图像（例如，对于图像库），但 Spartacus 仅提供单个图像的解决方案。 这被认为是商业店面的最佳实践。

您可以实现 PageImageResolver 来解析特定页面的特定图像。 ProductPageMetaResolver 通过提供产品详细信息页面的主要产品图像 URL 来演示 PageImageResolver 的实现。