About Google’s Microdata example
Google’s Microdata example is invalid. If the meta element has the itemprop attribute, the content attribute is required (details).
I described different ways how to specify mainEntityOfPage in Microdata, the most straigtforward one being a link element that creates a URL value (instead of another Microdata item):
<link itemprop="mainEntityOfPage" href="http://example.com/article-1" />
mainEntity
It’s easier to understand the use of mainEntityOfPage if we first look its inverse property, mainEntity.
For a WebPage that contains a BlogPosting, we could have:
<body itemscope itemtype="http://schema.org/WebPage">
<article itemprop="mainEntity" itemscope itemtype="http://schema.org/BlogPosting">
</article>
</body>
This means: There’s a WebPage and a BlogPosting, and the BlogPosting is the "primary entity" described in this WebPage. To denote this especially makes sense if there are more items involved, e.g., a Person describing the author, five more BlogPosting items for related posts, a WebSite item giving some metadata, etc. Thanks to mainEntity/mainEntityOfPage, consumers can learn what the primary/main item on that page is (i.e., what the page stands for).
mainEntityOfPage
The following example with mainEntityOfPage would result in equivalent structured data like the example with mainEntity from above:
<article itemscope itemtype="http://schema.org/BlogPosting">
<div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
</div>
</article>
As you can see, the element for the BlogPosting item contains the element for the WebPage item. This is of course rather unusual markup.
But the mainEntityOfPage property does not only expect an (CreativeWork) item as value, it alternatively expects a URL. So instead of providing a WebPage item explicitly, you can provide the URL of the page instead:
<article itemscope itemtype="http://schema.org/BlogPosting">
<link itemprop="mainEntityOfPage" href="http://example.com/article-1" />
</article>
(This is what Google expects, according to their documentation for the Articles Rich Snippet.)
Excursus: URL of page vs. post
Many sites don’t differentiate between the URL for the web page and the URL for the blog post. For these sites it might seem silly to state something like
http://example.com/article-1 (the blog post)
is the 'mainEntityOfPage'
http://example.com/article-1 (the web page)
http://example.com/article-1 (the web page)
has 'mainEntity'
http://example.com/article-1 (the blog post)
But it can be useful anyway (e.g., for choosing which item is the primary one, because the other items won’t have this statement; or for a blank node; etc.).
However, some sites do differentiate (especially for Linked Data), so they might state something like
http://example.com/article-1#this (the blog post)
is the 'mainEntityOfPage'
http://example.com/article-1 (the web page)
http://example.com/article-1 (the web page)
has 'mainEntity'
http://example.com/article-1#this (the blog post)
Here, http://example.com/article-1#this represents the blog posting, and http://example.com/article-1 represents the page with information about this posting (or the content of the posting itself). A clearer example would be a person and a page about this person; or a building and a page about this building. See my answer for an example why you might want to do this. (But, as explained above, you don’t have to differentiate; you can use the same URL for both.)
<article itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">Should I removeitemprop="blogPost"from that and create something like this:<article itemscope itemtype="https://schema.org/BlogPosting"> <link itemprop="mainEntityOfPage" href="https://linktoarticle" />– Ariannearianrhod