Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mixing JSON-LD CollectionPage and Microdata `hasPart` of Schema.org

The microdata markup below works perfectly, Google's structured data testing tool shows one CollectionPage and WebSite/WebPage as children.

<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:

<!DOCTYPE html>
<html>
<head>
  <script type="application/ld+json">
    {
      "description": "...",
      "author": {"@type":"Person", "name": "Homer J. Simpson"},
      "@type": "CollectionPage",
      "url": "http://my-springfield.us/sites",
      "publisher": {
        "@type": "Organization",
        "logo": "Object of type ImageObject here",
        "name": "Homer J. Simpson"
      },
      "image": "...",
      "headline": "Springfield Sites",
      "sameAs": ["..."],
      "@context": "http://schema.org"
    }
  </script>
</head>
<body>
  <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>
</html>

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?

like image 717
ilyaigpetrov Avatar asked Oct 16 '22 17:10

ilyaigpetrov


1 Answers

like if they had no connection

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):

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "CollectionPage",
    "@id": ""
  }
</script>

<div itemscope itemtype="http://schema.org/CollectionPage" itemid="">
  <span itemprop="hasPart" itemscope itemtype="http://schema.org/WebSite"></span>
  <span itemprop="hasPart" itemscope itemtype="http://schema.org/WebSite"></span>
  <span itemprop="hasPart" itemscope itemtype="http://schema.org/WebPage"></span>
</div>

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.

More examples

  • same Product in JSON-LD + Microdata
  • WebPage (JSON-LD) + BreadcrumbList (Microdata)
  • Organization (JSON-LD) + WebPage (Microdata)
  • CollegeOrUniversity (JSON-LD) + WebPage (Microdata)
like image 76
unor Avatar answered Oct 21 '22 07:10

unor