SAP Spartacus HTML Tags 实现介绍-阿里云开发者社区

开发者社区> jerrywangsap> 正文

SAP Spartacus HTML Tags 实现介绍

简介: SAP Spartacus HTML Tags 实现介绍
+关注继续查看

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


image.png


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

image.png

HTML5 支持多种元标记属性,例如 description. 这些元标签被搜索引擎、社交平台和机器人使用。 一些社交平台引入了自己的特定于其平台的属性集。 例如,Facebook 使用 Open Graph protocol使任何网页都可以成为社交图谱中的丰富对象。 特定的元标签可用于阐明社交平台上的体验。 下面的代码片段显示了 Facebook 的自定义页面描述:

image.png

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【译】Databricks使用Spark Streaming和Delta Lake对流式数据进行数据质量监控介绍
本文主要对Databricks如何使用Spark Streaming和Delta Lake对流式数据进行数据质量监控的方法和架构进行了介绍,本文探讨了一种数据管理架构,该架构可以在数据到达时,通过主动监控和分析来检测流式数据中损坏或不良的数据,并且不会造成瓶颈。
1183 0
SAP Fiori Elements里Smart Link工作原理介绍
SAP Fiori Elements里Smart Link工作原理介绍
14 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8374 0
SAP CRM Fiori Simulation Pipeline 设计介绍
SAP CRM Fiori Simulation Pipeline 设计介绍
7 0
SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
17 0
Apache Cassandra Composite Key\Partition key\Clustering key 介绍
在前面文章里面我们使用了下面语句创建了一张名为 iteblog_user 的表: cqlsh> use iteblog_keyspace; cqlsh:iteblog_keyspace> CREATE TABLE iteblog_user (first_name text , last_name .
2022 0
Jerry在2020 SAP全球技术大会的分享:SAP Spartacus技术介绍的文字版
Jerry在2020 SAP全球技术大会的分享:SAP Spartacus技术介绍的文字版
14 0
SAP S/4HANA OData Mock Service 介绍
SAP S/4HANA OData Mock Service 介绍
13 0
SAP S/4HANA CDS View的访问控制实现:DCL介绍
SAP S/4HANA CDS View的访问控制实现:DCL介绍
13 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载