Can I mix Microdata and JSON-LD on the same page for different entity

Question

My website is using JSON-LD and Microdata.

For example, in BreadcrumbList, I have used Microdata format, and for others (like Organization, TouristAttraction) JSON-LD has been used.

Can I mix Microdata and JSON-LD on the same page for different entities or should I go with only one format?

Answer 1

It should be fine to use different syntaxes on the same page.

It has one drawback, though: If you want to connect entities specified in different syntaxes, you can’t nest them. You have to use URIs instead. (But note that not necessarily all consumers of the data follow such URI references.)

Example showing nesting vs. referencing

You can connect a BreadcrumbList to a WebPage with the breadcrumb property.

When using only one syntax, you can simply nest the items:

<!-- Microdata only -->
<div itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  </div>
</div>

<!-- JSON-LD only -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb": 
  {
    "@type": "BreadcrumbList"
  }
}
</script>

But if you mix syntaxes, you have to specify and reference URIs instead:

<!-- Microdata, giving the entitiy an URI with the 'itemid' attribute -->
<div itemscope itemtype="http://schema.org/BreadcrumbList" itemid="#page-breadcrumbs">
</div>

<!-- JSON-LD, referencing the URI "#page-breadcrumbs" which is specified in the Microdata -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "breadcrumb": 
  {
    "@type": "BreadcrumbList",
    "@id": "#page-breadcrumbs"
  }
}
</script>

For the other direction, you need to give the item in JSON-LD an URI in @id, and link to this URI within e.g. a link element. See an example.

More examples

I linked to multiple examples that use JSON-LD together with Microdata in this answer on Stack Overflow.