I want to use Microdata with Schema.org to define the main content of my webpage, so I did something like this:
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
...
<div itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/WebPageElement">
<div itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">...</div>
</div>
...
</body>
The problem is that when I check the schema under the Google Structured Data Testing Tool I receive the error:
The property breadcrumb is not recognised by Google for an object of type WebPageElement.
So how to say that the breadcrumb is related to the itemscope of the WebPage and not to the itemscope of the WebPageElement? Because of the design, I can not get the breadcrumb out of the WebPageElement div.
By the ways, I use breadcrumb just as an example here—it can be any other property, like copyrightHolder or headline, for example.
There is an ugly solutions for this: add a div with an itemscope (but without itemtype) as parent for the breadcrumbs property, and use itemref to add the breadcrumb property to the WebPage item.
<body itemscope="itemscope" itemtype="http://schema.org/WebPage" itemref="breadcrumbs">
<div itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/WebPageElement">
<div itemscope>
<div itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">…</div>
</div>
</div>
</body>
I don’t recommend this (but it’s valid Microdata). You should really try to change the markup structure so that you don’t have to nest it like that.
Having said that, you might want to use mainEntity/mainEntityOfPage instead of mainContentOfPage, because mainContentOfPage is only for WebPageElement items, which makes it not very useful.
There are several solutions to this, besides the workaround unor posted. mainEntityOfPage and mainContentOfPage are optional and I'm not sure how much they will affect the appearance of the rich snippets. Using something like about with just the main phrase/page title may be as effective in ranking - I'm unsure on this however.
Personally I would add json-ld for breadcrumbs, which is always hidden, and need not be near the actual visible. It's easier to read and maintain than microdata, can be positioned anywhere and nothing in schema.org states you must stick to only one format. I've successful used JSON-LD for some tasks (for example: dynamic data) and microdata for the rest, which google validates and understands. The json-ld can be added right at the start of <body> or at the end, etc. You can just embed the BreadcrumbList inside a WebPage element. Google gives its own json-ld breadcrumb example. Example from schema.org -
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://example.com/dresses",
"name": "Dresses"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://example.com/dresses/real",
"name": "Real Dresses"
}
}
]
}
</script>
A second alternative solution but not exactly fantastic either is to create duplicate breadcrumb data where you want it, using either <meta> or <link> to make the links invisible. Depending on your website's design and number of breadcrumbs you may be able to find a visible area containing the correct words and add the microdata there - for example within the menu structure of that page, or using the page heading. The example below has 2 hidden breadcrumbs, plus uses the page title from the <h1> tag.
<span itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="name" content="example.com"/>
<meta itemprop="item" content="http://example.com"/>
<meta itemprop="position" content="1"/>
</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><meta itemprop="name" content="topic1"/>
<meta itemprop="item" content="http://example.com/topic1.html" />
<meta itemprop="position" content="2"/></span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="item" content="http://example.com/topic1/new.html" />
<meta itemprop="position" content="3"/>
<h1 itemprop="name">New Products</h1>
</span>
</span>
Although hidden meta data isn't ideal you are duplicating only what is already visible on the page, and only links within your own site. Some machine-readable but invisible microdata is acceptable, eg dates, currencies, times. Link is used within this w3.org example
If you choose to make them visible you could duplicate the breadcrumbs in small text in the footer (for example).
