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 标准。 以下标签可用于告诉社交媒体使用特定图像：

1

虽然可以通过复制具有不同值的标签来提供多个图像（例如，对于图像库），但 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,

   },

 ];

}

1

2

3

4

5

6

7

8

9

规范 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

   }

}

1

2

3

4

5

6

7

8

未添加www子域，因为您可能将 Spartacus 无法以有效方式检测到的店面子域使用。

产品详细信息页面的规范解析器使用产品数据来表明是否应该为当前产品创建规范 URL，或者在变体产品的情况下是否应该使用基础产品来创建规范 URL。最有可能的是，相同产品的变体，在产品详细信息页面方面非常相似，应作为基础产品公开发布重复内容。