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:

Desired structure output

Related questions: [What is the correct use of schema.org SiteNavigationElement?](http://stackoverflow.com/q/12491102/1591669) · [HTML image map as SiteNavigationElement](http://stackoverflow.com/q/32084978/1591669) · [schema.org: SiteNavigationElement with multiple elements](http://stackoverflow.com/q/35316436/1591669) — unor, Jun 14 '16 at 17:36
@unor All related links creating schema using html. I have created other elements using json-ld and only i ma facing issue in `SIteNavigationElement`. — krishnaisdinesh, Jun 15 '16 at 04:56
You did not describe where your problem is with implementing it in JSON-LD. --- I linked the related questions because these are about using `SiteNavigationElement` in an incorrect way; for this issue it doesn’t matter which syntax is used (Microdata, RDFa, JSON-LD), the error is one level higher. --- I reverted your edit because your question does not seem to be about Microdata nor Rich Snippets. — unor, Jun 15 '16 at 17:23

score 2 · Answer 1 · answered Jun 14 '16 at 17:32

2

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.

answered Jun 14 '16 at 17:32

unor

92,415
26
211
360

thanks for response. As per requirement i have to create this structure and that can be achieved by editing static html but in my case i can't. Those links are footer links. 'Header' denotes footer column heading name and name, URL represents their respective children. – krishnaisdinesh Jun 15 '16 at 04:59
Did you understand my answer, i.e. that your intended use of `SiteNavigationElement` is not correct, but you want to do it anyway? -- If that’s the case, you need to provide more details in your question where exactly your problem is. But note that consumers (like Google) will most likely not understand your data correctly. – unor Jun 15 '16 at 17:21
I got your point. Assume i have four professional service on same page and have to form schema using json-ld. I have created and it's validated by google. Problem is i need all services inside single professional service object in the form of inside @professionalDescripton -> name, description pairs. But i am getting different professional service object. https://jpst.it/JKZF json code and can be checked here. https://search.google.com/structured-data/testing-tool/ – krishnaisdinesh Jun 16 '16 at 06:29
@krishnaisdinesh: I’m not sure I understand exactly what you want to achieve. If you have four professional services, you *have* to use four different `ProfessionalService` objects. With JSON-LD’s `@graph` you could provide these 4 objects in the same `script` element ([example](http://stackoverflow.com/a/30506476/1591669)), if that is what you want. (By the way, note that [`ProfessionalService`](http://schema.org/ProfessionalService) got deprecated.) – unor Jun 16 '16 at 10:11

Jay · Answer 2 · 2017-12-15T22:39:04.527

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.

How to create SiteNavigationElement using JSON-LD?

2 Answers2

Linked