通过 Schema.org 让网站更智能-结构化数据工具

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-22 19:22 | 只看该作者

通过 Schema.org 让网站更智能-结构化数据工具

结构化数据使您能够创建更容易被搜索引擎和机器找到和搜索到的网站。Schema.org 创建了一种页面上的、结构化数据的标记模式，帮助搜索引擎理解网页上的信息，并提供更丰富的搜索结果。
本系列的最后部分将介绍一些工具，您可以使用它们在您的网站上实施 Schema.org。我们将研究 3 种不同工具的示例，这些工具的用途包括：

交互式地引导您向纯 HTML 添加结构化数据。
验证您的页面中的结构化数据。
让开发人员能够解析来自这些页面的结构化数据。

因为是开源的（采用 Apache 许可），由 W3C       Schema.org Community Group 维护，所以可使用它，而无需受制于专有工具。您还可以将跟进开发进度的流程自动化。
生成结构化数据许多流行的内容管理系统（包括 Wordpress、Drupal 和 Joomla）都含有能够简化 Schema.org       输出的插件。如果您的内容管理系统没有便利的插件，或者您打算直接生成页面，那么       Google 的是个很有用的工具。
Structured Data Markup Helper 允许您输入适合 Schema.org       词汇表中多个关键领域的内容。它还允许您获得一个包含您可以细化和使用的结构化数据的更新版本。此外，该帮助器努力生成 HTML 格式的电子邮件。您可以将它指向您已发布的 HTML，或者将       HTML 粘贴到已提供的文本区域中。图 1 展示了粘贴了一个读书俱乐部活动页面的一些 HTML 后的帮助器。
图 1. Structured Data Markup Helper

粘贴上面的文本后，单击 Start Tagging 并得到图 2 所示的工作区。
图 2. Structured Data Markup Helper 工作区

在这个工作区中，我可以选择左侧 HTML 预览区域中的各部分内容，利用该帮助器提供的子集为它们创建 Schema.org 标记。
我还可以查看我是否拥有想要的 Schema.org 类型所需的最少内容。例如，活动名称 Name 和开始日期 Start date（在右侧以黄色突出显示）是必填字段。回头看看图 1 中的代码，我可以将名称设置为“Book Discussion Meeting”，但我没有提供开始日期。所以我返回到 HTML，添加一个表示会议日期的短语。
清单 1. 非结构化的读书俱乐部页面：添加一个会议日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<main>
      <h1>Geo Book Club</h1>
      <div>
      Founding member Alice Ng welcomes you!
      </div>

      <div>
         <p>Please join us for our next book discussion meeting on June 1st,
         all about the novel
            <u>Things Fall Apart</u> by
            <a href="http://enwp.org/Chinua_Achebe">
            Chinua Achebe
            </a> (ISBN: 9780393932195)</p>
            <img src="https://upload.wikimedia.org/wikipedia/en/6/65/ThingsFallApart.jpg">
      </div>

      </main>

自行生成结构化数据

要从现在开始跟随进行操作，请转到，选择 Events 单选按钮和 HTML 选项。粘贴上面的 HTML 代码。
在工作区中，通过单击和拖动来突出显示短语 book discussion meeting。在结果菜单上，单击 Name。
通过单击和拖动来突出显示短语 June 1st。在结果菜单上，单击 Start Date 和 Date/Time (Autodetect)。您的工作区现在应类似于图 3。图 3. 包含必填字段的工作区
从右侧边栏可以看到，“Name”的需求现在已得到满足，但“Start date”字段上有一条警告。帮助器能确定月份和日期，但缺少了年份。通过单击底部的 Add missing tags 按钮，您可以为机器可读的数据提供年份，而不必直接编辑 HTML。
从“Select tag type”，单击 Start date > Advanced > Year。
然后可以在“Add tag”上输入 2018。单击 Save 后，该警告会消失，而且 HTML 应该可以使用。
对于添加的度量，单击图书的封面图片并单击弹出窗口中的 Image。工作区应类似于图 4。图 4. 可以导出的工作区

获得结果要查看您的工作成果，请单击 CREATE HTML。结果应该类似于图 5。
图 5. HTML 导出页面

右侧是您的起始 HTML，其中突出显示的部分是由该帮助器添加的（默认为 Microdata 格式）。您可以将完整的 HTML 输出下载到开发工具中，或者在编写代码时使用突出显示的部分来生成结构化的数据输出。对于本示例，输出如下所示。
清单 2. Structured Data Markup Helper 输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html><head></head><body><main>
      <h1>Geo Book Club</h1>
      <div>
      Founding member Alice Ng welcomes you!
      </div>

      <div itemscope itemtype="http://schema.org/Event">
         <p>Please join us for our next
      <span itemprop="name">book discussion meeting</span> on
      <span itemprop="startDate" content="2018-06-01">June 1st</span>,
         all about the novel
            <u>Things Fall Apart</u> by
            <a href="http://enwp.org/Chinua_Achebe">
            Chinua Achebe
            </a> (ISBN: 9780393932195)</p>
            <img itemprop="image" src="https://upload.wikimedia.org/wikipedia/en/6/65/ThingsFallApart.jpg"/>
      </div>

      </main>
      </body></html>

您还可以从以“Microdata”开头的下拉菜单中获得 JSON-LD 输出。生成的 JSON-LD 结果如下所示。
清单 3. Google Structured Data Markup Helper 生成的 JSON-LD 标记

1
2
3
4
5
6
7
8
9
10

<script type="application/ld+json">
      {
         "@context" : "http://schema.org",
         "@type" : "Event",
         "name" : "book discussion meeting",
         "startDate" : "2018-06-01",
         "image" : "https://upload.wikimedia.org/wikipedia/en/6/65/ThingsFallApart.jpg"
      }
      </script>

继续操作，单击 Back to tagging，尝试添加其他字段。
尽管 Structured Data Markup Helper 仅涵盖 Schema.org 的一个小子集，而且目前尚未支持 RDFa 输出，但它是一种不错的入门工具。使用它，您会发现编写自己的结构化数据将开始变得不那么神秘。

收藏分享评分

回复引用

订阅 TOP

返回列表