天天看点

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 的实现。

继续阅读