Following this guide from Google. I am adding Microdata to my website's breadcrumbs.
When testing my own code, I am getting the error that the field "id" is missing, while it is not from what I can see and understand. Am I missing something here or is it a bug in the test tool of Google?
You can test yourself at https://search.google.com/test/rich-results/result with below code.
<html>
<head>
<title>Microdata test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<nav aria-label="breadcrumb" class="breadcrumb top">
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost/hikes-and-walks" href="http://localhost/hikes-and-walks" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Home</span></a> <meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost/hikes-and-walks/hikes/bulgaria" href="http://localhost/hikes-and-walks/hikes/bulgaria" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Bulgaria</span></a> <meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item active" aria-current="page">
<span itemprop="name">Aleko hut to Zheleznitsa village</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
</div>
</div>
</div>
</body>
</html>
It's probably due to some internal validations that are hard to grasp. It looks like itemid
requires a specific URL structure. In this case either relative or absolute URL (protocol+root+tld) work, i.e.changing "http://localhost"
to "http://localhost.site"
passes the test. Relative URLs also work.
So, change itemid URL to:
absolute URL:
itemid="http://localhost.site/hikes-and-walks"
or relative URL:
itemid="/hikes-and-walks"
Also, these (valid) examples won't work:
urn:isbn:9780307476463
file:///ada/Analytical%20Engine/README.md
ftp://file
Here's the working code:
<html>
<head>
<title>Microdata test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<nav aria-label="breadcrumb" class="breadcrumb top">
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost.site/hikes-and-walks" href="http://localhost/hikes-and-walks" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Home</span></a> <meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost.site/hikes-and-walks/hikes/bulgaria" href="http://localhost/hikes-and-walks/hikes/bulgaria" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Bulgaria</span></a> <meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item active" aria-current="page">
<span itemprop="name">Aleko hut to Zheleznitsa village</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
</div>
</div>
</div>
</body>
</html>