搜索引擎、社交平台和机器人使用 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 实现介绍相关推荐

SAP Spartacus 的 cx-page-layout selector 介绍 - PageLayoutComponent
在SAP Spartacus page的源代码里,能看到很多cx-page-layout的selector,如下图所示: 这些cx-page-layout不是Directive,而是Component ...
SAP Spartacus routing parameter mapping介绍
converter的target参数的类型是Spartacus frontend product类型: 定义在这个文件里:C:\Code\SPA\spartacus\projects\core\src ...
Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版
这是Jerry 2020年的第86篇文章,也是汪子熙公众号总共第268篇原创文章. 这篇文章的视频版本如下: https://v.qq.com/x/page/b3212l6kqvg.html 这个分享 ...
SAP Spartacus 中的依赖注入 Dependency Injection 介绍
先了解 Angular 中的依赖注入依赖项是指某个类执行其功能所需的服务或对象.依赖项注入(DI)是一种设计模式,在这种设计模式中,类会从外部源请求依赖项而不是让类自己来创建它们. Angular ...
SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容
我们以前介绍过,经过 SAP Spartacus 路由配置后的 routes 数组,其 route 数据结构的 Component 属性,清一色指向 generic 的 PageLayoutCompo ...
SAP Spartacus 如何根据 page layout 获得对应支持的 slots
在 SAP Spartacus PageLayout Component 的实现里,每一个 layoutName 对应都有一个 cxOutlet 可供扩展: 第 13 行的 ngFor 指令,将该实现 ...
SAP Spartacus 的 CSS 架构
在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分. 通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式. 可选的封装模式一共有如下 ...
SAP Spartacus Template-Driven Outlets
Template-Driven Outlets 基于模板驱动的 outlets The basic syntax for adding UI is based on a TemplateRef tha ...
SAP Spartacus 服务器端渲染调试的开发端版本
我按照这篇文章手动安装 SAP Spartacus 3.3.0版本并启用服务器端渲染 SSR 的介绍,启用了 SAP Spartacus 服务器端渲染,并且按照SAP Spartacus服务器端渲染模 ...

SAP Spartacus HTML Tags 实现介绍

Page Meta Resolvers

Title Resolver

Description Resolver

Image Resolver

SAP Spartacus HTML Tags 实现介绍相关推荐

最新文章

热门文章