谷歌富媒体结果结构化数据编写指南(JSON-LD)

模式标记语言可用于突出显示和更恰当地定义网页上的信息。通过使用模式语言标记结构化数据，我们为搜索引擎提供了更多的数据，搜索引擎可以更好地了解页面内容，从而为人们提供更有用的信息和更高的排名。本篇文章将揭开JSON-LD的一些语法的神秘面纱，并分享为网页创建结构化数据的有用提示。

理解JSON-LD的语法

虽然您可以通过几种不同的方式标记页面上的内容，但本指南将重点关注谷歌喜欢的格式：JSON-LD。此外，我们不会涉及其所有复杂性，而是涉及搜索引擎优化最常遇到和有用的实例。

花括号

打开标签之前，有一个右花括号。 我们所有的结构化数据都将生活在这两个花括号内。当我们建立标记时，我们可能会看到额外的花括号，这就是缩进真正有助于防止事情变得过于混乱的地方！

引号

接下来你会注意到引号。每次调用Schema类型、属性或填充字段时，我们都会用引号包装信息。

冒号

接下来是冒号（不要咯咯笑）。基本上，每次我们调用类型或属性时，我们都需要使用冒号继续输入信息。这是一个字段分隔符。

逗号

逗号用于设定另一个值（即更多信息）即将到来的预期。 请注意，填写“logo”属性的信息字段后，没有逗号。这是因为没有其他信息需要说明。

括号

当我们调用包含两个或多个条目的属性时，我们可以使用一个开括号和一个闭括号作为一个框。 看到我们如何将Go Fish Digital的Facebook和Twitter配置文件包含在“sameAs”属性中？由于有多个条目，我们将这两个条目括在括号内（我称之为数组）。如果我们只包含Facebook URL，我们就不会使用括号。我们只需用引号包装值（URL）。

内心花括号

每当我们调用具有预期“类型”的属性时，我们都会使用内心花括号来包含信息。 在上图中，调用了“contactPoint”属性。此特定属性具有预期类型的“ContactPoint”。这不是很好吗，也很令人困惑？我们稍后会更详细地讨论这个问题，但目前请注意，在调用“contactPoint”属性后，打开了一个内部卷括号。在下一行，您将看到调用的ContactPoint类型。陈述了该类型中的属性（“telephone”和“contactType”），然后关闭了内心花括号。

如果您现在可以理解，这个用例中还有其他东西，将来会为您节省很多麻烦：

看看“customer service”后怎么没有逗号。这是因为这个集合中没有更多信息可以共享。但闭合花括号后有一个逗号，因为有更多的数据要提供（特别是“sameAs”属性）。

使用在线生成器创建结构化数据标记

现在我们已经了解了一点语法知识，让我们开始创建结构化数据标记。

如果您是初学者，或者将在线生成器作为创建基线标记(并节省时间)的一种方法，那么在线生成器是很棒的。我最喜欢的是Merkle的Schema标记生成器，这是我将在指南的这一部分使用的生成器。

接下来，您需要选择页面和标记类型。在本例中，我选择了[https://gofishdigital.com/](https://gofishdigital.com/)作为我们的页面，选择Organization作为我们的标记类型。 在填写了一些信息后，我们的工具为主页创建了一些奇妙的基线标记： 希望在我们上完语法课后，您可以毫无障碍地阅读大多数（或全部）此示例！

使用文本编辑器创建自定义结构化数据标记

基线标记会很好，但我们可以超越在线生成器预置，完全控制，并为我们的页面编写漂亮的自定义结构化数据。在[https://schema.org/Organization](https://schema.org/Organization)上，您将看到属于组织标记类型的所有可用属性。这比在线工具提供的要多得多，所以让我们卷起袖子，干点大事吧！

下载文本编辑器

此时，我们必须离开辅助轮和在线工具的帮助。我们需要一个可以编辑和创建自定义标记的地方。我不会对这件事温和的——现在就找一个文本编辑器。它非常划算，并将为您提供远远超出结构化数据标记的服务。我将使用我最喜欢的文本编辑器Sublime text 3。

**专业提示：**前往“查看”>Syntax>“Javascript”>“JSON”以正确设置语法。

我继续将一些基线组织标记从生成器粘贴到Sublime Text中。它看起来像这样：

添加属性：简单模式

[https://schema.org/Organization](https://schema.org/Organization)页面上有我们可用于组织类型的所有字段。我们的基线标记没有电子邮件信息，所以我查看了Schema页面，发现了以下内容： 第一列显示电子邮件有一个属性。得分！我将在右括号后添加一个逗号来设置更多信息的期望，然后我将添加“email”属性: Schema.org上的第二列是“预期类型”。这次，上面写着“文本”，这意味着我们只需输入电子邮件address。天哪，我喜欢这种轻松的感觉。 让我们继续推动。我想确保我们的telephone号码是这个标记的一部分，所以让我们看看是否有一个属性...... 没错。预期类型只是“文本”。我将在“email”属性后添加逗号，然后加入“telephone”属性。无需在此示例中强调任何内容；我可以告诉你，你掌握了窍门。

添加属性：困难模式

接下来，我们将添加一个稍微复杂的属性——“address”属性。就像“电子邮件”和“telephone”一样，让我们在[https://schema.org/Organization](https://schema.org/Organization)上跟踪它。 因此，我确实看到了“text”，但我也看到了一种预期的“PostalAddress”类型。数据标记的游戏名称是：如果您可以更具体，请更具体。让我们点击“PostalAddress”，看看那里有什么。 我看到许多需要简单文本值的属性。让我们选择其中一些属性，并添加我们的“address”标记！ 以下是我为添加此标记而采取的步骤：

• 在“telephone”属性后放置逗号
• 称为“address”属性
• 由于“address”属性具有预期类型，我打开了内花括号
• 称为“Postaladdress”类型
• 调用了“Postaladdress”类型的属性
• 关闭内部花括号

你能从上面的图像中看到所有这些吗？如果是这样，那么恭喜你——你已经完成了困难模式！

创建复杂的数组

在我们关于括号的讨论中，我提到了一个数组。当属性（例如“相同”）有两个或多个条目时，可以使用数组。 这是简单数组的一个很好的例子。但有时我们必须创建复杂的数组。例如，Go Fish Digital有两个不同的位置。我们如何为此创建一个数组？ 如果我们分解它，就没那么复杂了。在“North Carolina”信息之后，您将看到一个封闭的内花括号。我刚刚输入了一个逗号，然后在“Virginia”的位置添加了相同的类型（PostalAddress）和属性。由于为“address”属性做了两个条目，我把整个东西都放在括号里。

使用@graph创建节点数组

代码以“@graph”开头，然后是一个左括号，它调用一个数组。这与上面“创建复杂数组”一节中使用的技术相同。现在打开数组，您将看到一系列节点(或Schema类型):

• 组织
• WebSite
• 网页
• BreadcrumbList
• 条款
• 人

我已经将每个元素分开（见下文），以便您可以轻松查看数组的组织方式。每个节点中都有很多属性调用，但真正神奇的是“@id”。

在WebSite节点下，他们调用“@id”，并声明以下URL：_[https://yoast.com/#website](https://yoast.com/#website)_。后来，在他们建立WebPage节点后，他们说该网页是yoast.com网站的一部分，行如下：

“isPartOf”:{"@id":"https://yoast.com/#website"}

这有多棒？他们建立了有关网站和特定网页的信息，然后在两者之间建立联系。

Yoast在文章节点下做同样的事情。首先，在WebPage下，他们再次调用“@id”，并将URL声明为_[https://yoast.com/wordpress-seo/#webpage](https://yoast.com/wordpress-seo/#webpage)_。然后，在文章下，他们告诉搜索引擎，文章（或博客帖子）是网页的一部分，代码如下：

“isPartOf”:{"@id":"https://yoast.com/wordpress-seo/#webpage"}

在您阅读下面的标记时，请特别注意以下两件事：

• 上面列出的6个节点，每个节点都分开，以获得更好的可视化效果
• “@id”和“isPartOf”调用，用于定义、建立和连接数组中的项

太棒了，耶斯德！

来源页面：[https://yoast.com/wordpress-seo/](https://yoast.com/wordpress-seo/)

对您的标记进行故障诊断 <script type="application/ld+json"> {"@context":"https://schema.org", "@graph":[ { "@type":"Organization", "@id":"https://yoast.com/#organization", "name":"Yoast", "url":"https://yoast.com/", "sameAs": ["https://www.facebook.com/yoast", "https://www.instagram.com/yoast/", "https://www.linkedin.com/company/1414157/", "https://www.youtube.com/yoast", "https://www.pinterest.com/yoast/", "https://en.wikipedia.org/wiki/Yoast", "https://twitter.com/yoast"], "logo":{"@type":"ImageObject", "@id":"https://yoast.com/#logo", "url":"https://yoast.com/app/uploads/2015/09/Yoast-Logo-Icon-120x120.png", "caption":"Yoast"}, "image":{"@id":"https://yoast.com/#logo"}}, { "@type":"WebSite", "@id":"https://yoast.com/#website", "url":"https://yoast.com/", "name":"Yoast", "publisher":{"@id":"https://yoast.com/#organization"}, "potentialAction":{"@type":"SearchAction", "target":"https://yoast.com/?s={search_term_string}", "query-input":"required name=search_term_string"}}, { "@type":"WebPage", "@id":"https://yoast.com/wordpress-seo/#webpage", "url":"https://yoast.com/wordpress-seo/", "inLanguage":"en-US", "name":"WordPress SEO Tutorial • The Definitive Guide • Yoast", "isPartOf":{"@id":"https://yoast.com/#website"}, "image":{"@type":"ImageObject", "@id":"https://yoast.com/wordpress-seo/#primaryimage", "url":"https://yoast.com/app/uploads/2008/04/WordPress_SEO_definitive_guide_FI.png", "caption":""}, "primaryImageOfPage":{"@id":"https://yoast.com/wordpress-seo/#primaryimage"}, "datePublished":"2019-03-28T14:05:01+00:00", "dateModified":"2019-04-11T12:24:14+00:00", "description":"This is the ONLY tutorial you'll need to hugely increase your search engine traffic by improving your WordPress SEO. Want higher rankings? Read on!", "breadcrumb":{"@id":"https://yoast.com/wordpress-seo/#breadcrumb"}}, { "@type":"BreadcrumbList", "@id":"https://yoast.com/wordpress-seo/#breadcrumb", "itemListElement":[ { "@type":"ListItem", "position":1, "item": {"@type":"WebPage", "@id":"https://yoast.com/", "url":"https://yoast.com/", "name":"Home"}}, { "@type":"ListItem", "position":2, "item":{"@type":"WebPage", "@id":"https://yoast.com/seo-blog/", "url":"https://yoast.com/seo-blog/", "name":"SEO blog"}}, { "@type":"ListItem", "position":3, "item":{"@type":"WebPage", "@id":"https://yoast.com/tag/wordpress/", "url":"https://yoast.com/tag/wordpress/", "name":"WordPress"}}, { "@type":"ListItem", "position":4, "item":{"@type":"WebPage", "@id":"https://yoast.com/wordpress-seo/", "url":"https://yoast.com/wordpress-seo/", "name":"WordPress SEO: the definitive guide"}}]}, { "@type":"Article", "@id":"https://yoast.com/wordpress-seo/#article", "isPartOf":{"@id":"https://yoast.com/wordpress-seo/#webpage"}, "author":{"@id":"https://yoast.com/about-us/team/joost-de-valk/#author", "name":"Joost de Valk"}, "publisher":{"@id":"https://yoast.com/#organization"}, "headline":"WordPress SEO: the definitive guide", "datePublished":"2019-03-28T14:05:01+00:00", "dateModified":"2019-04-11T12:24:14+00:00", "commentCount":"4", "mainEntityOfPage":"https://yoast.com/wordpress-seo/#webpage", "image":{"@id":"https://yoast.com/wordpress-seo/#primaryimage"}, "keywords":"Content SEO, Google Analytics, Mobile SEO, Security, Site Speed, Site Structure, Technical SEO, WordPress, Yoast SEO"}, { "@type":"Person", "@id":"https://yoast.com/about-us/team/joost-de-valk/#author", "name":"Joost de Valk", "image":{"@type":"ImageObject", "@id":"https://yoast.com/#personlogo", "url":"https://yoast.com/app/uploads/2018/09/avatar_user_1_1537774226.png", "caption":"Joost de Valk"}, "description":"Joost de Valk is the founder and Chief Product Officer of Yoast and the Lead Marketing & Communication for WordPress.org. He's a digital marketer, developer and an Open Source fanatic.", "sameAs":[ "https://www.facebook.com/jdevalk", "http://www.linkedin.com/in/jdevalk", "https://twitter.com/jdevalk"]} ]}</script>

有了所有这些括号、大括号和逗号，错误可能会发生。那么，我们如何检测和修复它们呢？

Sublime文本错误报告

如果您按照我上面的专业提示将语法设置为JSON，Sublime Text将为您突出显示某些错误。 Sublime文本检测到错误并高亮显示。需要注意的是，错误以三种方式“报告”：

• 错误是高亮显示的项目。
• 错误位于高亮显示的行的某个地方。
• 错误位于上一个字段的某个位置。

在这种情况下，这是第三个选项。你发现它了吗？“[[email protected]](mailto:[email protected])”后面少了一个逗号。

老实说，这种错误报告一开始可能会令人困惑，但你会很快习惯它，并开始相当轻松地确定错误。

谷歌的结构化数据工具错误报告

转到[https://search.google.com/structured-data/testing-tool](https://search.google.com/structured-data/testing-tool)>New Test>Code Snippet。粘贴并运行代码。如果出现错误，您将看到以下内容： 单击错误报告，该工具将在错误后高亮显示字段。如您所见，“info@gofishdigital”后面缺失的逗号导致该工具高亮显示“telephone”。逻辑是，如果没有逗号，那行实际上是错误。这合乎逻辑，但可能会令人困惑，所以值得一提。

Sublime Text的“隐藏”下划线功能

验证结构化数据标记可能会令人疯狂，每个小技巧都会有所帮助。随着结构化数据变得更加复杂，节数、括号和花括号的数量可能会增加。Sublime Text文本有一个您可能没有注意到的功能，可以帮助您追踪一切！ 在上图中，我把光标放在与“sameAs”属性关联的第一行。仔细查看，您会注意到Sublime文本强调了与此分组相关的括号。如果光标放置在分组中的任意位置，您将需要这些下划线。

我经常使用此功能来匹配我的括号和/或花括号，以确保我没有遗漏任何或添加额外的括号。

验证结构化数据

当然，所有这些错误检查的最终目标是让您的代码进行验证。上述故障诊断提示将帮助您开发一种防不胜防的错误检查方法，最终您将获得经过验证的标记带来的欣快感！

使用谷歌搜索特殊案例

本指南中的经验教训和示例应为大多数搜索引擎优化提供坚实、通用的知识库。但你可能会遇到一种你不确定如何适应的情况。在这种情况下，谷歌搜索它。通过研究用例（有些只松散地适合我的情况）和摆弄代码，我学到了很多关于JSON-LD结构化数据和架构词汇的知识。您将遇到许多聪明而独特的嵌套技术，它们将真正使您的轮子转动起来。

结构化数据和搜索的未来

传言是，结构化数据只会在未来变得更加重要。这是谷歌收集有关网络和整个世界信息的方式之一。作为搜索引擎优化，解开JSON-LD结构化数据和架构词汇表的结符合您的最佳利益，我希望本指南能有所帮助。