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 is giving the error "Missing field 'id'":
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>
Related
I'm having a trouble with no scroll bar showing up on my page when I resized the web page. this page was built up with bootstrap and used CDN as an option to install, so i have nothing to do with the css, any help would be highly appreciated, thank you so much
the code--
<!DOCTYPE HTML>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You had few mark-up error in your code--you forgot to close the nav and head tag.
now working fine
<!DOCTYPE HTML>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.jumbotron {
height: 1000px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
</body>
</html>
Wanted a horizontal menu for my application. Used Bootstrap to create it using the
this http://www.bootply.com/113314 example. it is not working though. Also need help to understand how the button identifies the appropriate list without specifying id or name anywhere given the fact that there are more than one in the document
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<div align="center">
<a href="home.erp">
<img title="Home" class="img-rounded" src="images/empireSmall.png">
</a>
</div>
<div align="right">
<button class="btn btn-danger" onclick="logout()">Logout</button>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Administration
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li> Invoice Application</li>
<li> Karate Student</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
System
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li> User Application</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just to confirm for anyone else finding the same issue - ensure jQuery is referenced prior to Bootstrap JavaScript (e.g. bootstrap.min.js), as this is a dependency.
Recently I've lost my star review on Google SERP. I know that reasons may be differents and various, but I would to be sure that I didn't made mistakes on code:
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<b><span itemprop="ratingValue">5</span> on
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
Could Google have released an update?
The code snippet you provided in the main post: in isolation is not valid according to Google SDTT.
The review has no reviewed item specified
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<b><span itemprop="ratingValue">5</span> on
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
This is fixed by adding in itemprop="itemreviewed"
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<h3 itemprop="itemreviewed">Mario Bros service</h3>
<b><span itemprop="ratingValue">5</span> of
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
Instances of AggregateRating may appear as values for the following properties
Brand
CreativeWork
Event
Offer
Organization
Place
Product
Service
Source - http://schema.org/AggregateRating
Your full snippet in the comments (which I have simplified) is using the Organization schema http://schema.org/Organization and a different vocabulary for Review aggregate
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div class="review">
<div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<img itemprop="rating" src="#" alt="173 recensioni" />
<span itemprop="count">173 recensioni</span>
</div>
</div>
</body>
</html>
Which has multiple errors.
The valid way would be:
Using data-vocabulary.org
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<h3 itemprop="itemreviewed">Mario Bros service</h3>
<p>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<em itemprop="average">5</em> out of <em itemprop="best"> 5 </em>
</span>
<b>based on</b>
<!-- How many people rated this item? -->
<em itemprop="votes">173</em> ratings.
</p>
<p>
<!-- How many people reviewed this item? -->
<em itemprop="count">45 </em> user reviews.
</p>
</div>
</div>
</body>
</html>
Using schema.org
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">24</em> user ratings.
</div>
</div>
</body>
</html>
You also mentioned in comments that they are products:
products such as curtains, roll-up, etc
This is Google's example from the Products data type:
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
Modified for your criteria would be:
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="curtains.jpg" />
<span itemprop="name">Acme brand Curtains</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">173</em> reviews.
</div>
</div>
</div>
</body>
</html>
Enchanced further:
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="brand">Acme brand</span>
<img itemprop="image" src="curtains.jpg" />
<span itemprop="name">Acme brand Curtains</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">173</em> reviews.
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<!--price is 1000, a number, with locale-specific thousands separator and decimal mark, and the € character is marked up with the machine-readable code "EUR" -->
<span itemprop="priceCurrency" content="EUR">€</span>
<span itemprop="price" content="1000.00">1,000.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />
<span>In stock</span>
</div>
</div>
</div>
</body>
</html>
I have a layout with three rows. I would like the first row to have one column that spans all 12 columns at the xs size. At larger sizes I would like two columns, one 9 columns wide and one 3 columns wide. I have attempted this by adding the second column and making it hidden at xs and visible and 3 wide at sm.
However, doing so breaks the layout of my second row at larger screen sizes for some reason. I'm not sure why.
Code working before adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Page w/o Sidebar</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
Code broken after adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
I seem to have figured out the solution. I'm setting the column that I want hidden as visible on small, medium, and large, and setting it to 3 columns on small screens or larger.
I also added a div between the rows with the clearfix class.
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="visible-sm visible-md visible-lg col-sm-3">
<div id="logo">
<p>This is the hidden area</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<!-- rest of the code from before -->
I found the menu bar will overwrite some content of first line. When I click the dropdown 'first', it will locate to the first list item, but it was overwritten by menu bar. I've try apply one solution Posted in jsbin, but failed.
original html is here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>first</li>
<li>end</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<ul>
<li id="first">first</li>
<li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li id="end">end</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
SOLUTION demo (as answer)
Try this:
DEMO
Use padding top in the <li>
<li id="first" style="padding-top: 50px;">first</li>
Protip: Read the docs!
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.