如何将 JSON-LD 面包屑架构添加到我的网站导航以实现 SEO 目的
How to add JSON-LD breadcrumbs schema to my website navigation for SEO purposes
编辑:我在写问题的过程中对问题的理解有所提高,但我仍然没有把所有事情都弄清楚,所以我还在问:
我今天开始接触面包屑,但我仍然不太确定我是否正确理解了它们(我真的很感谢任何能帮助我更好地理解它的人)。
我对面包屑的 SEO 部分感兴趣:我不希望它们显示在我网站的任何位置。所以我不想要这样的东西:
home > products > kids > pants
我已经有了普通菜单(示例):
_________________________________________________________________________________________________
LOGO About us Services Products Contact us
_________________________________________________________________________________________________
并且上面菜单中的每个link都有子link。我只关心面包屑的 SEO 部分是否在已经存在的(上方)菜单中实现。我说的有道理吗?
如果是这样,那么我应该如何实施呢?
实际上,我尝试按照本页底部的示例进行操作:https://schema.org/BreadcrumbList -- JASON-LD 之一。但是他们有一个简单的例子如下:
HTML:
<ol>
<li>
<a href="https://example.com/dresses">Dresses</a>
</li>
<li>
<a href="https://example.com/dresses/real">Real Dresses</a>
</li>
</ol>
JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://example.com/dresses",
"name": "Dresses"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://example.com/dresses/real",
"name": "Real Dresses"
}
}
]
}
</script>
据我了解,以上仅涵盖层次结构中的一个 'path',这可能意味着我需要为所有可能的路径重新创建代码?我试图为一个更复杂的虚构菜单这样做,只是为了把它放在这个问题中:
HTML(我的):
<div class="main-navigation">
<div class="logo"><a href="https://www.haveabiscuit-potter.com/">Have a Biscuit, Potter</a></div>
<!--not a real website -->
<div class="menu-links">
<div class="dropdown">
<a href="https://www.haveabiscuit-potter.com/about-us" class="droptitle">About Us</a>
<div class="dropdown-content">
<a href="https://www.haveabiscuit-potter.com/about-us/our-journey">Our Journey</a>
<a href="https://www.haveabiscuit-potter.com/about-us/part-in-fandom">Our Part in the Fandom</a>
</div>
</div>
<div class="dropdown">
<a href="https://www.haveabiscuit-potter.com/discussion" class="droptitle">Discussion</a>
<div class="dropdown-content">
<a href="https://www.haveabiscuit-potter.com/discussion/harry-needs-biscuit">Why Harry Needs a Biscuit</a>
<a href="https://www.haveabiscuit-potter.com/discussion/dumbledoor-still-good">Dumbledoor is still good: an Introduction</a>
<a href="https://www.haveabiscuit-potter.com/discussion/luna-lovegood-revenclaw">Luna Lovegood: Always a Revenclaw</a>
</div>
</div>
<div class="dropdown">
<a href="https://www.haveabiscuit-potter.com/contact-us" class="droptitle">Contact Us</a>
</div>
</div>
</div>
JSON-LD(我的)- 这涵盖了上面菜单中的 3 links。我什至不确定这是否完全正确,但我们开始吧:
<script type="application/ld+json">
{
"@context": "http://schema.org", //or should I change this to https://haveabiscuit-potter.com -?
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.haveabiscuit-potter.com",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us",
"name": "About Us"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us/our-journey",
"name": "Our Journey"
}
}
],
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.haveabiscuit-potter.com",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us",
"name": "About Us"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us/part-in-fandom",
"name": "Our Part in the Fandom"
}
}
],
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.haveabiscuit-potter.com",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.haveabiscuit-potter.com/discussion",
"name": "Discussion"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.haveabiscuit-potter.com/discussion/dumbledoor-still-good",
"name": "Dumbledoor is Still Good"
}
}
]
}
</script>
//以上是否正确?
现在我们开始改进我的理解的部分:看到为每个 link 手动编写代码很烦人,我用谷歌搜索 "JSON-LD breadcrumb generator" - 我找到了一个让事情变得更简单的: https://technicalseo.com/tools/schema-markup-generator/
然而,我再次在 <script>
标签之间只得到一条路径。那么我应该如何生成它?输出会是数百个 <script>
元素,每个元素只覆盖一条路径吗?或者我可以像上面那样把它们放在一起吗?在任何一种情况下,我是否应该将巨大的 JSON-LD 代码插入到我网站上每个页面的页脚中?
非常感谢您阅读到这里,非常感谢任何帮助。
我正在回答我自己的问题:困惑在于我不知道 'put' 这些面包屑在哪里。我认为它们与导航有关,这就是它们应该出现在所有页面上的原因。
这是不正确的,每个页面的面包屑都是唯一的(嗯,我想这很明显,但我一开始并没有点击它)。
这是让我意识到这一点的代码:https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb
因此每个页面都应该有面包屑 JSON-LD 代码,该代码与其自身及其在网站层次结构中的位置相关。而已。现在我要去看看如何为我所有的网站页面批量生成这些面包屑。
编辑:我在写问题的过程中对问题的理解有所提高,但我仍然没有把所有事情都弄清楚,所以我还在问:
我今天开始接触面包屑,但我仍然不太确定我是否正确理解了它们(我真的很感谢任何能帮助我更好地理解它的人)。
我对面包屑的 SEO 部分感兴趣:我不希望它们显示在我网站的任何位置。所以我不想要这样的东西:
home > products > kids > pants
我已经有了普通菜单(示例):
_________________________________________________________________________________________________
LOGO About us Services Products Contact us
_________________________________________________________________________________________________
并且上面菜单中的每个link都有子link。我只关心面包屑的 SEO 部分是否在已经存在的(上方)菜单中实现。我说的有道理吗?
如果是这样,那么我应该如何实施呢? 实际上,我尝试按照本页底部的示例进行操作:https://schema.org/BreadcrumbList -- JASON-LD 之一。但是他们有一个简单的例子如下:
HTML:
<ol>
<li>
<a href="https://example.com/dresses">Dresses</a>
</li>
<li>
<a href="https://example.com/dresses/real">Real Dresses</a>
</li>
</ol>
JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://example.com/dresses",
"name": "Dresses"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://example.com/dresses/real",
"name": "Real Dresses"
}
}
]
}
</script>
据我了解,以上仅涵盖层次结构中的一个 'path',这可能意味着我需要为所有可能的路径重新创建代码?我试图为一个更复杂的虚构菜单这样做,只是为了把它放在这个问题中:
HTML(我的):
<div class="main-navigation">
<div class="logo"><a href="https://www.haveabiscuit-potter.com/">Have a Biscuit, Potter</a></div>
<!--not a real website -->
<div class="menu-links">
<div class="dropdown">
<a href="https://www.haveabiscuit-potter.com/about-us" class="droptitle">About Us</a>
<div class="dropdown-content">
<a href="https://www.haveabiscuit-potter.com/about-us/our-journey">Our Journey</a>
<a href="https://www.haveabiscuit-potter.com/about-us/part-in-fandom">Our Part in the Fandom</a>
</div>
</div>
<div class="dropdown">
<a href="https://www.haveabiscuit-potter.com/discussion" class="droptitle">Discussion</a>
<div class="dropdown-content">
<a href="https://www.haveabiscuit-potter.com/discussion/harry-needs-biscuit">Why Harry Needs a Biscuit</a>
<a href="https://www.haveabiscuit-potter.com/discussion/dumbledoor-still-good">Dumbledoor is still good: an Introduction</a>
<a href="https://www.haveabiscuit-potter.com/discussion/luna-lovegood-revenclaw">Luna Lovegood: Always a Revenclaw</a>
</div>
</div>
<div class="dropdown">
<a href="https://www.haveabiscuit-potter.com/contact-us" class="droptitle">Contact Us</a>
</div>
</div>
</div>
JSON-LD(我的)- 这涵盖了上面菜单中的 3 links。我什至不确定这是否完全正确,但我们开始吧:
<script type="application/ld+json">
{
"@context": "http://schema.org", //or should I change this to https://haveabiscuit-potter.com -?
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.haveabiscuit-potter.com",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us",
"name": "About Us"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us/our-journey",
"name": "Our Journey"
}
}
],
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.haveabiscuit-potter.com",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us",
"name": "About Us"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.haveabiscuit-potter.com/about-us/part-in-fandom",
"name": "Our Part in the Fandom"
}
}
],
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.haveabiscuit-potter.com",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.haveabiscuit-potter.com/discussion",
"name": "Discussion"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.haveabiscuit-potter.com/discussion/dumbledoor-still-good",
"name": "Dumbledoor is Still Good"
}
}
]
}
</script>
//以上是否正确?
现在我们开始改进我的理解的部分:看到为每个 link 手动编写代码很烦人,我用谷歌搜索 "JSON-LD breadcrumb generator" - 我找到了一个让事情变得更简单的: https://technicalseo.com/tools/schema-markup-generator/
然而,我再次在 <script>
标签之间只得到一条路径。那么我应该如何生成它?输出会是数百个 <script>
元素,每个元素只覆盖一条路径吗?或者我可以像上面那样把它们放在一起吗?在任何一种情况下,我是否应该将巨大的 JSON-LD 代码插入到我网站上每个页面的页脚中?
非常感谢您阅读到这里,非常感谢任何帮助。
我正在回答我自己的问题:困惑在于我不知道 'put' 这些面包屑在哪里。我认为它们与导航有关,这就是它们应该出现在所有页面上的原因。
这是不正确的,每个页面的面包屑都是唯一的(嗯,我想这很明显,但我一开始并没有点击它)。
这是让我意识到这一点的代码:https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb
因此每个页面都应该有面包屑 JSON-LD 代码,该代码与其自身及其在网站层次结构中的位置相关。而已。现在我要去看看如何为我所有的网站页面批量生成这些面包屑。