Where to place multiple JSON-LD objects in a webpage?

Question

My webapge

I am building a webpage for a conference. The page contains multiple objects like speaker (Person), or session (Event).

My problem

I would like to add semantic data to the page, so that search engines and social networks can easily understand its content. I would like to both describe the page as a whole, and parts of it - like a single session

My question

How do I mark up both the entire page and inner objects in a standard way? Can I use multiple JSON-LD in the same page, or should I use JSON-LD for the page as a whole and other markups for inner objects?

Clarification, following the comments

Thanks for pointing out the answer to JSON-LD Schema.org: Multiple video/image page. However, it I am not sure where should I put the different JSON-LD objects so that each of them refers to a specific part of the document. Should they be linked using div ids? Should the <script> be placed inside the relevant div?

I think your question could be a duplicate of these: [JSON-LD Schema.org: Multiple video/image page](https://stackoverflow.com/q/30505796/1591669) and/or [How do you combine several JSON-LD markups?](https://stackoverflow.com/q/48294593/1591669). The last example in [my answer](https://stackoverflow.com/a/48295719/1591669) to the second question shows how you would ideally specify a `WebPage` object and provide nested objects for the related entities. — unor, Apr 07 '18 at 23:35

score 2 · Answer 1 · answered Apr 07 '18 at 22:39

You can include multiple structured-data elements on a page if you wish as per Google's guideline:

https://developers.google.com/search/docs/guides/sd-policies#multiple-elements-on-a-page

The best way to tell whether it can parse your expected JSON-LD objects and attributes is to use their Structured Data Testing Tool

https://search.google.com/structured-data/testing-tool

unor · Answer 2 · 2018-04-09T00:41:14.647

I am not sure where should I put the different JSON-LD objects so that each of them refers to a specific part of the document.

With JSON-LD, the structured data is not "coupled" to the HTML. (That would be possible with the syntaxes Microdata and RDFa, but even there, after extracting the structured data, it’s of no relevance anymore on which HTML elements it was specified.)

If you have a page about two persons, you would just provide one WebPage and two Person objects. To be able to make statements about these objects from other places, it’s a good practice to give them URIs, which can be specified with @id. For the WebPage, the URI would typically be the canonical URL of the page.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "@id": "",
  "about": [
    {
      "@type": "Person",
      "@id": "#person-1"
    },
    {
      "@type": "Person",
      "@id": "#person-2"
    }
  ]
}
</script>

Theoretically, there could be a property which allows you to reference the HTML elements which describe the entity. Schema.org currently has properties like that in Pending, which are used for SpeakableSpecification (Pending): cssSelector (Pending) (using CSS selectors to reference the elements), xpath (Pending) (using XPath to reference the elements). But these can’t be used for other cases (as currently defined). So you would have to define your own property for this purpose.

Should they be linked using div ids?

You could provide the id value in the object’s url property. It doesn’t "link" the HTML to the structured data, though. It just conveys: You can find information about the entity described by this node object by following this URL.

Often each entity has its own page, but it’s perfectly fine to describe multiple entities on the same page, of course.

Expanding the example from above:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "@id": "",
  "about": [
    {
      "@type": "Person",
      "@id": "#person-1",
      "url": "#about-person-1"
    },
    {
      "@type": "Person",
      "@id": "#person-2",
      "url": "#about-person-2"
    }
  ]
}
</script>

Should the <script> be placed inside the relevant div?

For the structured data, it makes no difference where in the HTML document the script elements are placed.

You could place all objects in one script element (like in the examples above), or you could use multiple script elements, but then you should reference their @id values so that you can still make use of properties like about (example in my answer linked above). It makes no difference semantically.

Where to place multiple JSON-LD objects in a webpage?

My webapge

My problem

My question

Clarification, following the comments

2 Answers2