How to properly use mainEntityOfPage for a blog details page?

Question

I've read several answers as to what mainEntityOfPage is and how to use it, and each one was more confusing than the last.

So my question is specific; I have a website which contains a blog section. On the blog details page I want to use structured data in JSON-LD format.

My question: would my mainEntityOfPage be WebPage or BlogPosting?

Should I use this:

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

or this:

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

I'm thinking the mainEntityOfPage is BlogPosting, so first example, yes? Or do I still have it all wrong?

Answer 1

The definition of mainEntityOfPage is:

Indicates a page (or other CreativeWork) for which this thing is the main entity being described.

The main entity on a blog post page is the blog post, not the page. So, the second snippet is correct:

{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage"
  }
}

If you want to use the first snippet (so that WebPage is the top-level item), you have to use mainEntity instead of mainEntityOfPage:

{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "mainEntity": {
    "@type": "BlogPosting"
  }
}

Note 1: mainEntity and mainEntityOfPage are inverse properties, so these two snippets mean the same.

Note 2: Maybe it helps to read it as "is the mainEntityOfPage", and "has mainEntity".

Note 3: You can use ItemPage (instead of WebPage) on the blog post pages.