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

Question

Edit: My understanding of the issue improved as I was writing the question, but I still haven't cleared everything out, that's why I am still asking:

I got introduced to breadcrumbs today and I am still not quite sure I understand them correctly (and I would be really thankful to anyone that helps me understand this better).

I am interested in the SEO part of breadcrumbs: I don't want them displayed anywhere on my website. So I don't want something looking like this:

home > products > kids > pants

I already have a normal menu (example):

_________________________________________________________________________________________________

   LOGO                     About us      Services      Products     Contact us
_________________________________________________________________________________________________

And each link on the above menu has sublinks. I only care that the SEO part of the breadcrumbs gets implemented in the already existing (above) menu. Am I making sense?

If so, then how exactly should I implement it? I actually tried to follow the example at the bottom of this page: https://schema.org/BreadcrumbList -- the JASON-LD one. But they have a simple example as follows:

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

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

As I understand, the above only covers one 'path' in the hierarchy, which probably means I need to recreate the code for all possible paths? I tried to do that for a more complex made-up menu just to put it in this question:

The HTML (mine):

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

The JSON-LD (mine) - this covers just like 3 links from the above menu. I am not even sure if this is remotely correct but here we go:

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

//Is the above correct?

Now we get to the part where my understanding improved: seeing that it is tiresome to write the code manually for each link, I googled "JSON-LD breadcrumb generator" - and I found one that makes things easier: https://technicalseo.com/tools/schema-markup-generator/

However, I again get only one path in between the <script> tags. So is that how I should generate it? Will the output be hundreds of <script> elements each covering only one path? Or can I put them together like what I did above? And in either case, should I insert the enormous JSON-LD code to the footer of every page on my website?

Really thankful that you have read this far, and I really appreciate any help.

Answer 1

I am answering my own question: the confusion lied in that I didn't know where to 'put' those breadcrumbs. I thought they were related to the navigation, and that's why they should be present on all pages.

That is not correct, breadcrumbs are unique for each page (well I guess that's obvious but it didn't click for me at first).

Here is the code that made me realize it: https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb

So each page should have the breadcrumb JSON-LD code that is relevant to itself and to its position in the hierarchy of the website. That's it. Now I am off to see how to bulk generate those breadcrumbs for all my website pages.

Answer 2

Sorry to see no body cares about this question, but I do. Recently, I added the breadcrumb using bootstrap 5 to my website, since the feeling to make it better striked me somehow. In the beginning, I thought the bot might be smart enough to recognize the "visaul" breadcrumb in HTML, so I go with html implementation first. However, the google rich result test failed to identify my breadcrumb. That's when I realized that only three structured data format are accepted by google: reference .

Wish your website a prosperous one!