谷歌SEO结构化数据编写指南(JSON-LD)

Schema.org 词汇表是终极合作。

由于 Google、Microsoft、Yahoo 和 Yandex 之间的相互握手,我们拥有了一个字段库,可以用来突出显示和更恰当地定义网页上的信息。正如 Alexis Sanders 在这个精彩的播客中所解释的那样,通过利用结构化数据,我们为搜索引擎提供了更多的信心(即更好地理解页面内容)。这样做可以产生许多积极的影响,包括引人注目的 SERP 显示和提高排名。

如果您是 google SEO,您对使用 Schema.org 词汇表审核或创建结构化数据标记有多大信心?如果您只是不舒服地在座位上移动,那么这就是您的指南。在其中,我旨在揭开 JSON-LD 的一些语法的神秘面纱,并分享有关为网页创建结构化数据的有用技巧。

了解 JSON-LD 的语法

虽然有几种不同的方式可以标记页面内容,但本指南将重点介绍 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 标记生成器,我将在本指南的这一部分中使用它。

接下来,您需要选择页面和标记类型。对于此示例,我选择 https://gofishdigital.com/ 作为我们的页面,并选择组织作为我们的标记类型。

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

希望在我们的语法课之后,您可以毫无问题地阅读本示例的大部分(或全部)内容!

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

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

下载文本编辑器

在这一点上,我们必须把训练轮收起来,把在线工具留在后面(单撕)。我们需要可以编辑和创建自定义标记的地方。我不会对此温和——现在就获得一个文本编辑器。这是物有所值的,并且将为您提供远远超出结构化数据标记的服务。我将使用我最喜欢的文本编辑器 Sublime Text 3。

专业提示:转到查看 > 语法 > Javascript > JSON 以适当地设置您的语法。

我已经将生成器中的一些基线组织标记粘贴到 Sublime Text 中。这是它的样子:

添加属性:简单模式

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

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

Schema.org 上的第二列是“预期类型”。这一次,它显示“文本”,这意味着我们可以简单地输入电子邮件地址。天哪,我喜欢它容易的时候。

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

答对了。预期的类型只是“文本”。我将在“email”属性后添加一个逗号,然后输入“telephone”。在这个例子中不需要强调任何东西;我可以告诉你,你已经掌握了窍门。

添加属性:困难模式

接下来,我们将添加一个稍微复杂一点的属性——“address”属性。就像“电子邮件”和“电话”一样,让我们​​在 https://schema.org/Organization 上跟踪它。

所以,我确实看到了“文本”,但我也看到了预期的“邮政地址”类型。带有数据标记的游戏的名称是:如果你能更具体,那就更具体。让我们点击“PostalAddress”,看看那里有什么。

我看到许多需要简单文本值的属性。让我们选择其中一些属性并添加我们的“地址”标记!

以下是我添加此标记的步骤:

  • 在“电话”属性之后放置一个逗号
  • 称为“地址”属性
  • 由于“地址”属性有一个预期的类型,我打开了内花括号
  • 称为“邮政地址”类型
  • 在“PostalAddress”类型中调用属性
  • 关闭内部花括号

你能从上面的图片中发现所有这些吗?如果是这样,那么恭喜你——你已经完成了困难模式!

创建一个复杂的数组

在我们关于括号的讨论中,我提到了一个数组。当一个属性(例如“sameAs”)有两个或更多条目时,可以使用数组。

这是简单数组的一个很好的例子。但是有时我们必须创建复杂的数组。例如,Go Fish Digital 有两个不同的位置。我们将如何为此创建一个数组?

如果我们分解它,它并不是那么复杂。在北卡罗来纳州信息之后,您将看到一个封闭的内花括号。我刚刚输入了一个逗号,然后为弗吉尼亚位置添加了相同的类型 (PostalAddress) 和属性。由于为“地址”属性创建了两个条目,因此我将整个内容括在括号中。

使用 @graph 创建节点数组

2019 年 4 月 16 日,来自 Yoast 的 Joost de Valk 宣布 Yoast google SEO 11.0 的到来,它拥有新的结构化数据标记功能。您可以在这篇文章和这个视频中获得更新的概述。但是,我想更深入地研究 Yoast 用来为搜索引擎提供信息丰富的连接标记的特定技术:使用 @graph (*the crowd gasps) 创建一个节点数组。

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

  • 组织
  • 网站
  • 网页
  • 面包屑列表
  • 文章

我已将每个(见下文)分开,以便您可以轻松查看数组的组织方式。每个节点中调用了很多属性,但真正的魔力在于“@id”。

在网站节点下,他们调用“@id”并声明以下 URL:https://yoast.com/#website。后来,在他们建立了 WebPage 节点之后,他们说该网页是 yoast.com 网站的一部分,其中包含以下行:

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

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

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

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

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

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

干得好,尤斯特!

源页面:https://yoast.com/wordpress-google seo/

<script type=”application/ld+json”>
{“@context”:”https://schema.org”,
“@graph”:[
{
“@type”:”Organization”,
“@id”:” https://yoast.com/#organization”,
“名称”:”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

]、
“标志”:{”@type”:”ImageObject”,
“@id”:”https://yoast.com/#logo”,
“url”:”https://yoast.com/app/uploads/2015/09/Yoast-Logo -Icon-120×120.png”,
“caption”:”Yoast”},
“图像”:{“@id”:“https://yoast.com/#logo”}},
{
“@type”:“网站”,
“@id”:“https://yoast.com/#网站”,
“url”:“https://yoast.com/”,
“名称”:“Yoast”,
“发布者”:{“@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-google seo/#webpage”,
“url”:”https://yoast.com/wordpress-google seo/”,
“inLanguage”:”en-US”,
“name”:”WordPress google SEO 教程 \u2022 The Definitive Guide \u2022 Yoast”,
“isPartOf”:{“@id”:”https ://yoast.com/#website”},
“image”:{“@type”:”ImageObject”,
“@id”:”https://yoast.com/wordpress-google seo/#primaryimage”,
“url”:”https://yoast.com/ app/uploads/2008/04/WordPress_google SEO_definitive_guide_FI.png”,
“caption”:””},
“primaryImageOfPage”:{“@id”:”https://yoast.com/wordpress-google seo/#primaryimage”} ,
“datePublished”:”2019-03-28T14:05:01+00:00″,
“dateModified”:”2019-04-11T12:24:14+00:00″,
“description”:”这是唯一的教程,您需要通过改善您的 WordPress 谷歌 SEO 来大幅增加您的搜索引擎流量。想要更高的排名?继续阅读!”,
“breadcrumb”:{“@id”:”https://yoast.com/wordpress-google seo/#breadcrumb”}},
{
“@type”:”BreadcrumbList”,
“@id”:”https://yoast.com/wordpress-google seo/#面包屑”,
“itemListElement”:[
{
“@type”:”ListItem”,
“position”:1,
“item”:
{“@type”:”WebPage”,
“@id”:”https://yoast.com/” ,
“url”:”https://yoast.com/”,
“name”:”Home”}},
{
“@type”:”ListItem”,
“position”:2,
“item”:{“@type “:”网页”,
“@id”:”https://yoast.com/google seo-blog/”,
“url”:”https://yoast.com/google seo-blog/”,
“名称” :”google SEO blog”}},
{
“@type”:”ListItem”,
“position”:3,
“项目”:{“@type”:“网页”,
“@id”:“https://yoast.com/tag/wordpress/”,
“url”:“https://yoast.com/tag/wordpress /”,
“name”:”WordPress”}},
{
“@type”:”ListItem”,
“position”:4,
“项目”:{“@type”:“网页”,
“@id”:“https://yoast.com/wordpress-google seo/”,
“url”:“https://yoast.com/wordpress- google seo/”,
“name”:”WordPress google SEO: 权威指南”}}]},
{
“@type”:”Article”,
“@id”:”https://yoast.com/wordpress-google seo/#article”,
“isPartOf”:{“@id”:”https://yoast.com/wordpress-google seo/#webpage”},
“author”:{“@id”:”https:// yoast.com/about-us/team/joost-de-valk/#author”,
“name”:”Joost de Valk”},
“publisher”:{“@id”:”https://yoast.com/ #组织”},
“标题”:”WordPress google SEO:权威指南”、
“datePublished”:”2019-03-28T14:05:01+00:00″、
“dateModified”:”2019-04-11T12:24:14+00: 00″,
“commentCount”:”4″,
“mainEntityOfPage”:”https://yoast.com/wordpress-google seo/#webpage”,
“image”:{“@id”:”https://yoast.com/wordpress-google seo/#primaryimage”} ,
“keywords”:”Content google SEO, Google Analytics, Mobile google SEO, Security, Site Speed, Site Structure,
Technical google SEO, WordPress, Yoast google 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 是 Yoast 的创始人和首席产品官,也是负责人
WordPress.org 的营销和传播。他是一名数字营销人员、开发人员和开源狂热者。”,
“sameAs”:[
“https://www.facebook.com/jdevalk”,
“http://www.linkedin.com/in/jdevalk”,
” https://twitter.com/jdevalk”]}
]}</script>

对标记进行故障排除

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

Sublime Text 报错

如果您按照我上面的专业提示将语法设置为 JSON,Sublime Text 会为您突出显示某些错误。

Sublime Text 检测到错误并突出显示。需要注意的是,错误以三种方式“报告”:

  • 错误是突出显示的项目。
  • 错误出现在突出显示的行上。
  • 错误在前一个字段中的某个地方。

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

老实说,这个错误报告一开始可能会让人困惑,但你很快就会习惯它,并且会相当容易地开始查明错误。

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

转到 https://search.google.com/structured-data/testing-tool > 新测试 > 代码片段。粘贴并运行您的代码。如果出现错误,您将看到以下内容:

单击错误报告,该工具将突出显示错误后的字段。如您所见,“info@gofishdigital”后缺少逗号导致该工具突出显示“电话”。那里的逻辑是,没有逗号,那行实际上是错误。这是合乎逻辑的,但可能会令人困惑,因此值得指出。

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

验证结构化数据标记可能会让人抓狂,每一个小技巧都会有所帮助。随着结构化数据变得越来越复杂,部分、括号和花括号的数量可能会增加。Sublime Text 有一个您可能没有注意到的功能,可以帮助您跟踪所有内容!

在上图中,我将光标放在与“sameAs”属性关联的第一行。仔细看,你会注意到 Sublime Text 已经强调了与这个分组相关的括号。如果光标位于分组内的任何位置,则需要这些下划线。

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

验证结构化数据

当然,所有这些错误检查的最终目标是让您的代码得到验证。上面的故障排除技巧将帮助您开发一种防弹的错误检查方法,并且您最终将获得经过验证的标记所带来的欣快感!

使用 Google 搜索独特案例

本指南中的课程和示例应该为大多数谷歌 SEO 提供了一个坚实、通用的知识库。但是您可能会遇到不确定如何适应的情况。在这些情况下,谷歌它。通过研究用例(有些只是松散地适合我的情况)和摆弄代码,我学到了很多关于 JSON-LD 结构化数据和 Schema 词汇的知识。你会遇到很多聪明而独特的嵌套技术,这些技术会让你的轮子旋转起来。

结构化数据和搜索的未来

传言是结构化数据只会在前进中变得更加重要。这是 Google 收集有关网络和整个世界的信息的方式之一。作为 google SEO,解开 JSON-LD 结构化数据和 Schema 词汇的结符合您的最大利益,我希望本指南有助于做到这一点。 

发表评论

免费定制谷歌SEO方案

请输入您的资料

你也可以直接右下角客服直接跟我们联系
=

请输入您的资料

seo
你也可以直接右下角客服直接跟我们联系
=

request a quote