I'm trying to use the SiteNavigationElement
type from Schema.org. The HTML is generated dynamically so I can't edit it. So JSON-LD is my only option.
I want all navigation elements under a single SiteNavigationElement
object.
I have attached the desired output as screenshot:
Here's how to do it:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph":
[
{
"@context": "https://schema.org",
"@type":"SiteNavigationElement",
"@id":"#table-of-contents",
"name": "Section 1",
"url": "https://www.example.com/page#toc-1"
},
{
"@context": "https://schema.org",
"@type":"SiteNavigationElement",
"@id":"#table-of-contents",
"name": "Section 2",
"url": "https://www.example.com/page#toc-2"
},
{
"@context": "https://schema.org",
"@type":"SiteNavigationElement",
"@id":"#table-of-contents",
"name": "Section 3",
"url": "https://www.example.com/page#toc-3"
},
{
"@context": "https://schema.org",
"@type":"SiteNavigationElement",
"@id":"#pagination",
"name": "Previous page",
"url": "https://www.example.com/page1"
},
{
"@context": "https://schema.org",
"@type":"SiteNavigationElement",
"@id":"#pagination",
"name": "Next page",
"url": "https://www.example.com/page2"
}
]
}
</script>
This code will come out like as seen in this example.
Schema.org’s SiteNavigationElement
type cannot be used for the navigation links, only for the whole navigation.
So the url
would be the URL for the navigation (it typically doesn’t have one) and the name
would be the name of the navigation (e.g., "Navigation" or "Main menu" etc.).
The type SiteNavigationElement
(as well as the parent WebPageElement
type and its other sub-types) is not really useful for typical web pages.