站点图标 hrefgo超狗

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

结构化数据编写指南

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

理解JSON-LD的语法

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

花括号

打开<script>标签后,您首先会注意到打开的左花括号。在关闭</script>标签之前,有一个右花括号。

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

引号

接下来你会注意到引号。每次调用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/作为我们的页面,选择Organization作为我们的标记类型。

在填写了一些信息后,我们的工具为主页创建了一些奇妙的基线标记:

希望在我们上完语法课后,您可以毫无障碍地阅读大多数(或全部)此示例!

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

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

下载文本编辑器

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

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

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

添加属性:简单模式

https://schema.org/Organization页面上有我们可用于组织类型的所有字段。我们的基线标记没有电子邮件信息,所以我查看了Schema页面,发现了以下内容:

第一列显示电子邮件有一个属性。得分!我将在右括号后添加一个逗号来设置更多信息的期望,然后我将添加“email”属性:

Schema.org上的第二列是“预期类型”。这次,上面写着“文本”,这意味着我们只需输入电子邮件address。天哪,我喜欢这种轻松的感觉。

让我们继续推动。我想确保我们的telephone号码是这个标记的一部分,所以让我们看看是否有一个属性……

没错。预期类型只是“文本”。我将在“email”属性后添加逗号,然后加入“telephone”属性。无需在此示例中强调任何内容;我可以告诉你,你掌握了窍门。

添加属性:困难模式

接下来,我们将添加一个稍微复杂的属性——“address”属性。就像“电子邮件”和“telephone”一样,让我们在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。后来,在他们建立WebPage节点后,他们说该网页是yoast.com网站的一部分,行如下:

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

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

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

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

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

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

太棒了,耶斯德!

来源页面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文本检测到错误并高亮显示。需要注意的是,错误以三种方式“报告”:

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

在这种情况下,这是第三个选项。你发现它了吗?“info@gofishdigital.com”后面少了一个逗号。

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

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

转到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结构化数据和架构词汇表的结符合您的最佳利益,我希望本指南能有所帮助。

退出移动版