什么是 JSON-LD？
JSON-LD（JavaScript Object Notation for Linked Data）是一种基于 JSON 的数据交换格式，它使用了 Linked Data 技术来描述数据之间的关系，属于语义化WEB的一部分。JSON-LD 可以为每个属性添加类型和值，从而提供了更加丰富的上下文信息，便于机器和人类阅读和理解。
ember-jsonld 简介
ember-jsonld 是一个 Ember.js 应用程序中使用 JSON-LD 数据的库，它提供了方便的 API 以生成和解析 JSON-LD 数据，同时也可以很容易地实现 Google 结构化数据等服务。
ember-jsonld 使用
1. 安装 ember-jsonld
使用 npm 安装 ember-jsonld:
npm install ember-jsonld --save-dev
2. 定义 JSON-LD 数据
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- ------ - ---------------
----------- -
--------- ----------------------
---------- -----------------------------
--
-------- ---------
------- ----- -------
------ ---------------------------------
----------- --------- ----------
----------- -
-------- ---------------
------- -------- ------
--
----------- -
-------- ---------------
------- -------------- ----------- -- -----------
--
--------- -
-----------------------------------------
------------------------------------
--
------------------- -
-
-------- --------
------- --------- -------------
--
-
-------- --------
------- --------------
--
--
---在这个例子里，我们定义了 JSON-LD 数据。@context 定义了对象中用到的所有词汇。@type 定义了我们定义的对象类型。这个例子中定义了一个人，有名称，工作职位，归属的组织等等。最后，sameAs 和 example:interest 定义了一些链接和兴趣爱好。
3. 添加到页面
在组件中添加 JSON-LD 数据到页面上，可以使用 Addon 功能 create-async-content 提供的 createAsyncContent，它可以创建异步加载 JavaScript 和 CSS 资源。
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ ------- ------------------
--------------- -----
------ -
--------------------------
-------------------------- --------------------- -- -
-- ------------- ------- --
------ -------- -----------------------------------------------
----
--
---这里我们先在函数中定义了异步加载数据的方法，使用 createAsyncContent 函数包装起来并赋值给 pageJsonLdData 变量。最后在 Mustache 模板中将渲染的组件添加到页面上。
{{if pageJsonLdData}}{{{pageJsonLdData}}}{{/if}}4. 配置 Google 结构化数据
Google 结构化数据是可以在 Google 搜索结果中显示的数据，包含了一些关键信息，如名称、价格、评论等等。使用 ember-jsonld，可以很容易地实现 Google 结构化数据：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------------- - ---- ---------------
------ ------- ------------------
-- ---
--------------- ------------------- ---------- -
----- - ------- - - -----
----- ----------- - ----------------------
----------- --------------------
-------- ----------
----- --------------------
------ --------------------------
------------ ---------------------------
------- -
-------- --------
-------------- ------
------ ---------------------
--
---------------- -
-------- ------------------
------------ ----------------------
------------ ---------------------------
--
---
------ ------------
---
---以上代码中，我们定义了一个 Product 类型的数据，加上了一些基本信息和评论，最后返回得到的结果可以被 Google 识别和展示。
5. 自定义空间（Namespace）
使用自定义空间（Namespace），可以很方便地添加自定义的数据类型到 JSON-LD 数据中：
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- ------ - ---------------
----------- -
--------- --------------------------------
------- -------------------------
------ ------------------------
------ ------------------------
--
-------- ---------
------- ----- -------
------ ---
------ -
-------- ------
-------- --------- ----------
---------- -------- ------
--
---这里我们定义了一个自定义的命名空间，包含了自定义标签、对象类型以及其他属性。使用这种方式定义 JSON-LD 数据能够准确并精简地传达数据的意义。
总结
使用 ember-jsonld，可以很容易地为应用程序添加 JSON-LD 数据，并将其应用到 Google 结构化数据等场景中，极大地提高了应用程序内容的可读性和认知度。同时，自定义命名空间，能让开发者自由地构建自己的数据类型，个性化地表达数据信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecba6