How to properly use mainEntityOfPage for a blog details page? - blogs

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.