简介
在前端开发中，使用 schema.org 提供的 JSON-LD 对网页的结构化数据进行标记化是非常重要的。angular-jsonld-component 是一个方便的 Angular 组件，可以帮助开发者在网页中轻松地添加 JSON-LD 标记。
本教程将介绍如何使用 npm 包 angular-jsonld-component，实现对结构化数据的标记化，并在谷歌搜索引擎中展示网页的丰富结果。
安装 angular-jsonld-component
使用 npm 安装 angular-jsonld-component：
npm install angular-jsonld-component
在需要使用该组件的组件或模块中引入：
import { JsonLdComponent } from 'angular-jsonld-component';使用 angular-jsonld-component
使用 angular-jsonld-component非常简单，只需要在组件中定义一个 JSON 对象，将其传递给组件即可。下面是一个简单的示例：
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<json-ld [json]="jsonLdObject"></json-ld>
`,
})
export class MyComponent {
jsonLdObject = {
'@context': 'https://schema.org',
'@type': 'Person',
name: 'John Doe',
jobTitle: 'Designer',
imageUrl: 'https://example.com/john-doe.png',
sameAs: [
'https://twitter.com/john',
'https://www.linkedin.com/in/john',
],
};
}在上面的示例中，jsonLdObject 包含了一个名为“John Doe”的人的结构化数据。在模板中使用 json-ld 组件来渲染 JSON-LD 标记。
使用指南
JSON-LD 标记的类型
JSON-LD 标记的类型可以是 @context 及 @type 属性，@context 属性用来指定标记文件的上下文。如果您没有在组件中指定 @context 属性，则会自动使用“https://schema.org”作为默认值。
@type 属性用来指定要标记的对象的类型。所使用的对象类型应该来自于 schema.org。
数据结构
您可以在组件中定义任何适合 JSON-LD 的数据，以此来标记结构化数据。在定义数据时，您需要遵守 schema.org 官方文档中所描述的数据结构，以便保持标记的正确性。
在通常的情况下，您需要定义以下属性：
@context（可选）：指定标记的上下文@type（必须）：所要标记的对象的类型- 属性：包含在该对象中的属性
传递数据
为了将这些数据传递到组件中，您可以定义一个对象，例如上面的示例中的 jsonLdObject。
jsonLdObject = {
'@context': 'https://schema.org',
'@type': 'Person',
name: 'John Doe',
jobTitle: 'Designer',
imageUrl: 'https://example.com/john-doe.png',
sameAs: [
'https://twitter.com/john',
'https://www.linkedin.com/in/john',
],
};在模板中，您可以将该对象传递给 json-ld 组件，并且该组件将使用您定义的数据来渲染 JSON-LD 标记。
<json-ld [json]="jsonLdObject"></json-ld>
总结
Angular-jsonld-component 是非常方便的工具，可帮助您以一种简单并且规范的方式在您的网页中添加 JSON-LD 标记，并以此来增加搜索引擎对网页的理解。
在使用 angular-jsonld-component 时，请务必遵守 schema.org 的文档，确定要标记的对象及其属性，并在有效的上下文中使用正确的类型。
因为良好的结构化数据可以让您的网站在搜索引擎排名中更好地表现，因此，添加 JSON-LD 标记将是您网站优化的必要条件之一。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53bfc