Reputation: 136211
I am building a webpage for a conference. The page contains multiple objects like speaker
(Person), or session
(Event).
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
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?
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?
Upvotes: 4
Views: 3646
Reputation: 96607
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.
Upvotes: 3
Reputation: 1092
You can include multiple structured-data elements on a page if you wish as per Google's guideline:
The best way to tell whether it can parse your expected JSON-LD objects and attributes is to use their Structured Data Testing Tool
Upvotes: 2