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

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.