由于 Google、Microsoft、Yahoo 和 Yandex 之间的相互握手,我们拥有了一个字段库,可以用来突出显示和更恰当地定义网页上的信息。正如 Alexis Sanders 在这个精彩的播客中所解释的那样,通过利用结构化数据,我们为搜索引擎提供了更多的信心(即更好地理解页面内容)。这样做可以产生许多积极的影响,包括引人注目的 SERP 显示和提高排名。
虽然有几种不同的方式可以标记页面内容,但本指南将重点介绍 Google 喜欢的格式;JSON-LD。此外,我们不会深入探讨它的所有复杂性,而是介绍那些最常遇到且对 google SEO 有用的实例。
在开始 <script> 标记之后你会注意到的第一件事是一个开放的花括号。并且,就在结束的 </script> 标记之前,是一个闭合的花括号。
我们所有的结构化数据都将存在于这两个花括号中。当我们构建我们的标记时,我们可能会看到额外的花括号,这就是缩进真正有助于防止事情变得过于混乱的地方!
接下来你会注意到引号。每次我们调用 Schema 类型、属性或填写字段时,我们都会将信息用引号引起来。
接下来是冒号(没有傻笑)。基本上,每次我们调用类型或属性时,我们都需要使用冒号继续输入信息。这是一个字段分隔符。
逗号用于设置另一个值(即更多信息)即将到来的期望。
请注意,填写“logo”属性的信息字段后,没有逗号。那是因为没有额外的信息要说明。
当我们调用一个包含两个或多个条目的属性时,我们可以使用一个左括号和一个右括号作为外壳。
看看我们如何将 Go Fish Digital 的 Facebook 和 Twitter 个人资料包含在“sameAs”属性中?由于有多个条目,我们将这两个条目括在括号内(我称之为数组)。如果我们只包含 Facebook URL,我们就不会使用括号。我们只需将值(URL)用引号括起来。
每当我们调用具有预期“类型”的属性时,我们将使用内花括号来包含信息。
在上图中,调用了“contactPoint”属性。此特定属性的预期类型为“ContactPoint”。这不是很好而且令人困惑吗?我们稍后会更详细地讨论它,但现在只注意在调用“contactPoint”属性后,打开了一个内花括号。在下一行,您将看到调用的 ContactPoint 类型。声明了该类型中的属性(“telephone”和“contactType”),然后关闭了内部花括号。
在这个用例中还有一些其他的东西,如果你现在能理解,将来会为你省去很多麻烦:
看看“客户服务”后面怎么没有逗号。那是因为在该集合中没有更多信息可以共享。但是在封闭的内大括号之后有一个逗号,因为还有更多数据要到来(特别是“sameAs”属性)。
现在我们对语法有了一些了解,让我们开始创建结构化数据标记。
如果您是初学者,或者作为创建基线标记的一种方式来构建(并节省时间),在线生成器非常棒。我最喜欢的是 Merkle 的 Schema 标记生成器,我将在本指南的这一部分中使用它。
填写一些信息后,我们的工具为主页创建了一些很棒的基线标记:
希望在我们的语法课之后,您可以毫无问题地阅读本示例的大部分(或全部)内容!
在这一点上,我们必须把训练轮收起来,把在线工具留在后面(单撕)。我们需要可以编辑和创建自定义标记的地方。我不会对此温和——现在就获得一个文本编辑器。这是物有所值的,并且将为您提供远远超出结构化数据标记的服务。我将使用我最喜欢的文本编辑器 Sublime Text 3。
专业提示:转到查看 > 语法 > Javascript > JSON 以适当地设置您的语法。
我已经将生成器中的一些基线组织标记粘贴到 Sublime Text 中。这是它的样子:
第一列显示有一个电子邮件属性。分数!我将在我们的右括号后添加一个逗号以设置对更多信息的期望,然后我将添加“email”属性:
让我们继续推动。我想确保我们的电话号码是这个标记的一部分,所以让我们看看是否有一个属性……
答对了。预期的类型只是“文本”。我将在“email”属性后添加一个逗号,然后输入“telephone”。在这个例子中不需要强调任何东西;我可以告诉你,你已经掌握了窍门。
所以,我确实看到了“文本”,但我也看到了预期的“邮政地址”类型。带有数据标记的游戏的名称是:如果你能更具体,那就更具体。让我们点击“PostalAddress”,看看那里有什么。
我看到许多需要简单文本值的属性。让我们选择其中一些属性并添加我们的“地址”标记!
以下是我添加此标记的步骤:
你能从上面的图片中发现所有这些吗?如果是这样,那么恭喜你——你已经完成了困难模式!
在我们关于括号的讨论中,我提到了一个数组。当一个属性(例如“sameAs”)有两个或更多条目时,可以使用数组。
这是简单数组的一个很好的例子。但是有时我们必须创建复杂的数组。例如,Go Fish Digital 有两个不同的位置。我们将如何为此创建一个数组?
如果我们分解它,它并不是那么复杂。在北卡罗来纳州信息之后,您将看到一个封闭的内花括号。我刚刚输入了一个逗号,然后为弗吉尼亚位置添加了相同的类型 (PostalAddress) 和属性。由于为“地址”属性创建了两个条目,因此我将整个内容括在括号中。
2019 年 4 月 16 日,来自 Yoast 的 Joost de Valk 宣布 Yoast google SEO 11.0 的到来,它拥有新的结构化数据标记功能。您可以在这篇文章和这个视频中获得更新的概述。但是,我想更深入地研究 Yoast 用来为搜索引擎提供信息丰富的连接标记的特定技术:使用 @graph (*the crowd gasps) 创建一个节点数组。
代码以“@graph”打开,然后是一个左括号,它调用一个数组。这与上面标题为“创建复杂数组”的部分中使用的技术相同。现在打开数组,您将看到一系列节点(或模式类型):
我已将每个(见下文)分开,以便您可以轻松查看数组的组织方式。每个节点中调用了很多属性,但真正的魔力在于“@id”。
这有多棒?他们建立了有关网站和特定网页的信息,然后在两者之间建立了联系。
当您阅读下面的标记时,请特别注意这两件事:
干得好,尤斯特!
使用所有这些括号、大括号和逗号,可能会发生错误。那么我们如何检测和修复它们呢?
如果您按照我上面的专业提示将语法设置为 JSON,Sublime Text 会为您突出显示某些错误。
Sublime Text 检测到错误并突出显示。需要注意的是,错误以三种方式“报告”:
老实说,这个错误报告一开始可能会让人困惑,但你很快就会习惯它,并且会相当容易地开始查明错误。
单击错误报告,该工具将突出显示错误后的字段。如您所见,“info@gofishdigital”后缺少逗号导致该工具突出显示“电话”。那里的逻辑是,没有逗号,那行实际上是错误。这是合乎逻辑的,但可能会令人困惑,因此值得指出。
验证结构化数据标记可能会让人抓狂,每一个小技巧都会有所帮助。随着结构化数据变得越来越复杂,部分、括号和花括号的数量可能会增加。Sublime Text 有一个您可能没有注意到的功能,可以帮助您跟踪所有内容!
在上图中,我将光标放在与“sameAs”属性关联的第一行。仔细看,你会注意到 Sublime Text 已经强调了与这个分组相关的括号。如果光标位于分组内的任何位置,则需要这些下划线。
我经常使用此功能来匹配我的括号和/或花括号,以确保我没有遗漏任何内容或添加额外内容。
当然,所有这些错误检查的最终目标是让您的代码得到验证。上面的故障排除技巧将帮助您开发一种防弹的错误检查方法,并且您最终将获得经过验证的标记所带来的欣快感!
本指南中的课程和示例应该为大多数谷歌 SEO 提供了一个坚实、通用的知识库。但是您可能会遇到不确定如何适应的情况。在这些情况下,谷歌它。通过研究用例(有些只是松散地适合我的情况)和摆弄代码,我学到了很多关于 JSON-LD 结构化数据和 Schema 词汇的知识。你会遇到很多聪明而独特的嵌套技术,这些技术会让你的轮子旋转起来。
传言是结构化数据只会在前进中变得更加重要。这是 Google 收集有关网络和整个世界的信息的方式之一。作为 google SEO,解开 JSON-LD 结构化数据和 Schema 词汇的结符合您的最大利益,我希望本指南有助于做到这一点。