I want to create a breadcrumb navigation with the Microdata format.
So I'm using following BreadcrumbList markup and Google Structured Data Testing Tool recognized it:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home/fashionn">
<span itemprop="name">Fashion</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">Coats</span>
<meta itemprop="position" content="3">
</li>
</ol>
But from Bing Markup Validator I receved following message:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Regarding Bing documentation the following markup is correct for breadcrumb:
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home/fashion">
<span itemprop="title">Fashion</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Coats</span>
</li>
</ol>
So is there a way to create a breadcrumb navigation with Microdata format which would be valid both for Google and Bing?
To rephrase your goal, as far as I understand it: You want to markup your breadcrumbs
with Microdata
using two vocabularies (Schema.org and Data-Vocabulary.org)
without duplicating your content
so that Bing’s and Google’s testing tool still validate it.
Microdata makes it hard to mix vocabularies:
In itemtype, you can only use types from the same vocabulary.
In itemprop, you can mix properties from different vocabularies, but only the properties from one vocabulary can be specified in the shorter string form, while the properties from all other vocabularies have to be specified as absolute URIs.
(This isn’t a problem if consumers support the absolute URI form for the properties they recognize.)
(By the way, RDFa supports mixing vocabularies way better, so you might want to consider using RDFa instead of Microdata.)
A way to avoid the problem, maybe.
Use Data-Vocabulary.org for Bing and Google.
While the vocabulary Data-Vocabulary.org is deprecated and deleted (I wonder why Bing is still recommending it), Google still seems to support it, too (probably because it’s still used on many websites from back then, when Google recommended it, too).
I don’t know if it really works, but at least Google’s SDTT doesn’t give any warnings/errors for your Data-Vocabulary.org snippet.
Solutions, maybe.
Unfortunately, I can’t test it in Bing’s tool (because an account is required), so the following snippets don’t necessarily work.
itemref + absolute URIs for Data-Vocabulary.org’s title
This snippet uses Schema.org as primary vocabulary. An empty div outside of Schema.org’s BreadcrumbList is used to create the item for Data-Vocabulary.org’s Breadcrumb. This item references the a elements via itemref. It reuses the url property (because it’s named the same in both vocabularies) and provides Data-Vocabulary.org’s title property as absolute URI.
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b1 b2">
</div>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Home</span>
</a>
</span>
</span>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Fashion</span>
</a>
</span>
</span>
<meta itemprop="position" content="2" />
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that Breadcrumb/title is not recognized; it’s specified as absolute URI, so it can be used everywhere).
Whether it works in Bing’s testing tool depends on if Bing recognizes http://data-vocabulary.org/Breadcrumb/title as title property.
As the vocabulary is deleted, I’m not sure if it really was http://data-vocabulary.org/Breadcrumb/title instead of http://data-vocabulary.org/title, but if I remember it correctly, it should have been the first one.
itemref + absolute URIs for Schema.org’s name
Same idea like in the snippet above, but this time Data-Vocabulary.org would be the primary vocabulary, while Schema.org’s BreadcrumbList gets created in an empty div.
This is harder, because Schema.org’s structure requires more properties, so you have to create more empty elements.
<div itemscope itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b1">
</span>
<meta itemprop="position" content="1" />
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b2">
</span>
<meta itemprop="position" content="2" />
</div>
</div>
<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li itemprop="title">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://schema.org/name">Home</span>
</a>
</li>
<li itemprop="title">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://schema.org/name">Fashion</span>
</a>
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that name is not recognized; it’s specified as absolute URI, so it can be used everywhere).
Can someone please tell me what's wrong with the following code, as Google Merchant Centre is saying missing or invalid schema.org microdata for availability:
<ul>
<li itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="sku" content="MATE221W"></span>
<span itemprop="priceCurrency" content="GBP"></span>
<span itemprop="price" content="17.95"></span>
<link itemprop="availability" href="http://schema.org/InStock" />
</li>
</ul>
I've looked at a lot of documentation but I can't figure out if the structured data should be placed on all pages? For example, I have this code on my main home page:
<ol vocab="http://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
Home
<span property="position" content="1"></span>
<span property="name" content="Home"></span>
</li>
<li property="itemListElement" typeof="ListItem">
About
<span property="position" content="2"></span>
<span property="name" content="About"></span>
</li>
<li property="itemListElement" typeof="ListItem">
Services
<span property="position" content="2"></span>
<span property="name" content="Services"></span>
</li>
<li property="itemListElement" typeof="ListItem">
Contact
<span property="position" content="2"></span>
<span property="name" content="Contact"></span>
</li>
</ol>
Although Google now shows all the breadcrumbs like this:
Is it a problem with my relative URLs? Should I not include the meta data for other pages that the user isn't on?
I try to markup my first page (a news website). The structure is like this:
<html itemscope itemtype="http://schema.org/WebPage>
<body>
<ul itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/ItemList"> // main part
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/NewsArticle"> head line of an news1 </li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/NewsArticle"> head line of an news2 </li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/NewsArticle"> head line of an news3 </li>
</ul>
<div>
</body>
</html>
I got error with itemprop="mainContentOfPage" and itemprop="itemListElement" in Google’s Testing Tool because of
is not a know valid target...
How can I solve this error?
The mainContentOfPage property cannot have an ItemList as value.
You probably want to use the mainEntity property instead:
<html itemscope itemtype="http://schema.org/WebPage">
<body>
<ul itemprop="mainEntity" itemscope itemtype="http://schema.org/ItemList">
</ul>
</body>
</html>
Meaning: the ItemList item is the primary entity described in this WebPage item.
I am trying to follow documentation for breadcrumbs markup https://developers.google.com/structured-data/breadcrumbs
I am not sure if I should also put current page as a child in breadcrumbs with its link pointing to the same page? Interesting that google on that page doesnt even have current page in breadcrumbs, and looking in its page code they don't even have breadcrumb markup.
<ul>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li>
<a itemprop="url" href="<?php echo $home_url; ?>">
<span itemprop="title">Home</span>
</a>
</li>
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li>
<a itemprop="url" href="<?php echo $home_url; ?>/pvc-stolarija"><span itemprop="title">Pvc stolarija</span></a>
</li>
<li><?php echo get_the_title(); ?></li>
</span>
</span>
</ul>