如何将 JSON-LD 面包屑模式添加到我的网站导航中以实现 SEO 目的

问题描述 投票：0回答：2

编辑：当我写问题时，我对这个问题的理解有所提高，但我仍然没有清除所有内容，这就是为什么我仍在问：

今天我接触到了面包屑，但我仍然不确定我是否正确理解了它们（我真的很感谢任何帮助我更好地理解这一点的人）。

我对面包屑的 SEO 部分感兴趣：我不希望它们显示在我网站上的任何位置。所以我不想要这样的东西：

home > products > kids > pants

我已经有一个普通的菜单（示例）：

_________________________________________________________________________________________________

   LOGO                     About us      Services      Products     Contact us
_________________________________________________________________________________________________

上面菜单上的每个链接都有子链接。我只关心面包屑的 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>

据我了解，上面只涵盖了层次结构中的一个“路径”，这可能意味着我需要为所有可能的路径重新创建代码？我尝试做一个更复杂的菜单只是为了把它放在这个问题中：

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 个链接。我什至不确定这是否完全正确，但我们开始吧：


<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>

//以上正确吗？

现在我们到了我的理解有所提高的部分：看到为每个链接手动编写代码很烦人，我在谷歌上搜索了“JSON-LD面包屑生成器” - 我发现了一个可以让事情变得更容易的：https:// Technicalseo.com/tools/schema-markup-generator/

但是，我再次在 

<script>
标签之间只得到一条路径。那么我应该如何生成它？输出是否会是数百个 
<script>
元素，每个元素仅覆盖一条路径？或者我可以像上面那样将它们放在一起吗？无论哪种情况，我是否应该将大量的 JSON-LD 代码插入到网站每个页面的页脚中？

非常感谢您读到这里，我真的很感谢您的帮助。

html seo schema breadcrumbs json-ld
2个回答
2
投票

我正在回答我自己的问题：困惑在于我不知道将这些面包屑“放在”哪里。我认为它们与导航相关，这就是为什么它们应该出现在所有页面上。

这是不正确的，每个页面的面包屑都是唯一的（我想这很明显，但一开始我并没有点击它）。

这是让我意识到这一点的代码：https://search.google.com/structed-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb

因此，每个页面都应该具有与其自身及其在网站层次结构中的位置相关的面包屑 JSON-LD 代码。就是这样。现在我要看看如何为我的所有网站页面批量生成这些面包屑。

编辑：如果您的页面上实际上没有视觉面包屑，请不要尝试添加 SEO 面包屑标记。如果您尝试这样做，谷歌将惩罚您。 （有关更多信息，请阅读原始问题下方的评论+此答案下方的评论）。

0
投票

很抱歉看到没有人关心这个问题，但我关心。最近，我使用 bootstrap 5 添加了面包屑到我的网站，因为不知怎的，我有一种让它变得更好的感觉。一开始，我认为机器人可能足够聪明，可以识别 HTML 中的“visaul”面包屑，因此我首先采用 html 实现。但是，google 丰富结果测试 未能识别我的面包屑。就在那时我意识到谷歌只接受三种结构化数据格式：reference。

祝您的网站生意兴隆！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.