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.
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.
Edit: don't try to add SEO breadcrumb markup if you don't actually have visual breadcrumbs on your pages. Google will penalize you if you attempt to do it. (For more info, read comments below the original question + below this answer).