<body itemscope itemtype="https://schema.org/CollectionPage">
<span itemscope itemtype="https://schema.org/WebSite" itemprop="hasPart">
<a href="https://springfield-xxxx.us" itemprop="url">Official site of Springfield</a>
</span>
<span itemscope itemtype="https://schema.org/WebPage" itemprop="hasPart">
<a href="https://facebook.com/group/XXXX" itemprop="url">Local events in Springfield</a>
</span>
<span itemscope itemtype="https://schema.org/WebPage" itemprop="hasPart">
<a href="https://news.us/city/springfield-xxxx" itemprop="url">Latest news in Springfield</a>
</span>
</body>
However when I add JSON-LD Google's structured data testing tool shows objects CollectionPage and WebPage/WebSite separately like if they had no connection. Here is a sample with JSON-LD:
I tried putting @id in JSON-LD and itemid on the body to no avail: Google testing tool shows two separate CollectionPages or two separate items of other types.
My question: how to connect JSON-LD and microdata so that Google testing tool shows one CollectionPage with WebPage/WebSite as children/props?
解决方案
Well, they aren’t connected in your example. JSON-LD and Microdata can’t work together on the syntax-level.
If you want to connect entities defined in different syntaxes, the only way is to
give these entities URIs (the same URI if they are the same thing), and
reference these URIs as property values (if one entity is the value of another entity’s property).
Giving entities URIs works in the way you mentioned: with @id in JSON-LD, and with itemid in Microdata (and with resource in RDFa Lite).
Consumers (services like search engines or Google’s SDTT, local clients like browser add-ons etc.) would have to support following references (not all do), and if they do support following references, they would also have to support parsing the additional syntax (not all do).
But even if you make use of such URI references, it doesn’t change the conformance requirements of the syntaxes you use. Your HTML document is invalid, because you have itemprop attributes that don’t belong to an itemscope. This is not allowed. So if you want to keep using Microdata, you have to provide the parent item in Microdata, too (CollectionPage in your case).
This would be the way to convey that both CollectionPage occurrences represent the same entity (they have the same URI = the base URL of the current document):
Google’s SDTT still displays two CollectionPage entries (if syntaxes are mixed), but they (correctly) have the same URI. It’s up to Google to decide what to do with this information for their various structured data features. Maybe mixed-syntax references are supported for none/some/all of their features (they don’t seem to document it); how their SDTT displays things doesn’t necessarily reflect how they interpret it for their features.