How to create SiteNavigationElement using JSON-LD?

Question

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:

Answer 1

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.

Answer 2

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.