Error: "The property offers is not recognized by Google for an object of type Offer" in Structured data - google-search-console

I have added below html code to a product page on one of our websites:
<div itemtype="http://schema.org/Offer" itemscope="" itemprop="offers">
<div class="product-type-data">
<div itemtype="http://schema.org/Offer" itemscope="" itemprop="offers" class="price-box">
<span id="product-price-118" class="regular-price">
<span itemprop="price" class="price">30,00 €</span>
</span>
</div>
<p class="availability in-stock">Verfügbarkeit: <span>Auf Lager</span></p>
<meta content="http://schema.org/InStock" itemprop="availability">
<div class="clearfix"></div>
</div>
<meta content="EUR" itemprop="priceCurrency">
<meta content="30" itemprop="price">
I'm receiving the Error: "The property offers is not recognized by Google for an object of type Offer" (Only for div having class "price-box" ) in Structured data when testing this in Webmaster Tools.
I am also attaching a error snapshot of webmaster here.
Is anyone able to point me in the right direction of where I'm going wrong?
Thanks

I know this is an old question, but I wanted to respond in case someone else needs an answer. I am also going to make an assumption that the offer is for a product (this isn't required, but is probably very common for most people).
To begin, I want to refer to a few resources for reading about the subject.
https://schema.org/
Google Structured Data Test Tool
Google Product Reference
I also want to clarify that the question pertains to Microdata, not JSON-LD, so I will respond with Microdata formatting.
I believe your problem is that you have an "offers" within an "offers". Try this code:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-type-data">
<div class="price-box">
<span id="product-price-118" class="regular-price">
<span class="price">30,00 €</span>
</span>
</div>
<p class="availability in-stock">Verfügbarkeit: <span>Auf Lager</span></p>
<div class="clearfix"></div>
</div>
<meta content="http://schema.org/InStock" itemprop="availability">
<meta content="30" itemprop="price">
<meta content="EUR" itemprop="priceCurrency">
</div>
If you put the above code into the google testing tool, it will validate.
If you would like another example, go to the google product reference link above and in the examples section (Single product page), select the Microdata tab and then select "See Markup". This will give you a more complete example. I have included it below in case google ever removes this code.
<div itemtype="http://schema.org/Product" itemscope>
<meta itemprop="mpn" content="925872" />
<meta itemprop="name" content="Executive Anvil" />
<link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
<link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" />
<link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" />
<meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
<div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
<link itemprop="url" href="https://example.com/anvil" />
<meta itemprop="availability" content="https://schema.org/InStock" />
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
<meta itemprop="price" content="119.99" />
<meta itemprop="priceValidUntil" content="2020-11-05" />
<div itemprop="seller" itemtype="http://schema.org/Organization" itemscope>
<meta itemprop="name" content="Executive Objects" />
</div>
</div>
<div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
<meta itemprop="reviewCount" content="89" />
<meta itemprop="ratingValue" content="4.4" />
</div>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope>
<div itemprop="author" itemtype="http://schema.org/Person" itemscope>
<meta itemprop="name" content="Fred Benson" />
</div>
<div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
</div>
</div>
<meta itemprop="sku" content="0446310786" />
<div itemprop="brand" itemtype="http://schema.org/Thing" itemscope>
<meta itemprop="name" content="ACME" />
</div>
</div>

You can find examples of JSON+LD for Product type at https://schema.org/Product and for Offers https://schema.org/Offer but here's an example of:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Product",
"aggregateRating": {
"#type": "AggregateRating",
"bestRating": "100",
"ratingCount": "24",
"ratingValue": "87"
},
"image": "dell-30in-lcd.jpg",
"name": "Dell UltraSharp 30\" LCD Monitor",
"offers": {
"#type": "AggregateOffer",
"highPrice": "$1495",
"lowPrice": "$1250",
"offerCount": "8",
"offers": [
{
"#type": "Offer",
"url": "save-a-lot-monitors.com/dell-30.html"
},
{
"#type": "Offer",
"url": "jondoe-gadgets.com/dell-30.html"
}
]
}
}
</script>

Related

Server Side Swift: Navbar Toggle not working in Vapor 4 Leaf + Bootstrap

Configurations:
Vapor 4 | Updated beta version & packages | macOS Catalina v.10.15.3 | XCode 11.4 beta 2 | Bootstrap CDN 4.4.1
I'm unable to toggle my navbar button. I'm not sure if it's a bug in Leaf. I've implemented Bootstrap and CSS in the right order. Try and run this code. Don't forget to resize your browser window to mobile or tablet view in order to show navbar toggle button.
Here's my leaf code:
// base.leaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- <link rel="stylesheet" href="/styles/bootstrap.min.css"/>-->
<link rel="stylesheet" href="/fonts/fa/css/all.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/styles/main.css"/>
<link rel="stylesheet" href="/styles/header.css"/>
<link rel="stylesheet" href="/styles/footer.css"/>
<title>#(metaContent.title)</title>
<meta name="description" content="#(metaContent.description)"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main>
#import("main")
</main>
<footer id="myFooter">
<div class="bg-secondary" style="height:3px;">
</div>
<div class="footer-copyright footer-brand">
<h6 class="mt-2 text-light">© 2020 Company. All Rights Reserved.</h6>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// index.leaf
#extend("base"):
#export("main"):
<div class="container mt-3">
<h1>#(metaContent.title)</h1>
<p>#(body.content)</p>
</div>
#endexport
#endextend
In Safari's Inspect element, my html document is rendered in the right order. But, I've no clue why the click on navbar toggle isn't working.
As far as I remember using Vapor 4 leaf renderer there is a bug about #. They are always interpreted as the beginning of a leaf tag.
The simplest workaround is to escape them with a \ : data-target="#navbarCollapse" become data-target="\#navbarCollapse"
I believe there is a bug in Leaf parser, and the # in data-target="#navbarCollapse" gets misinterpreted. The way I have solved it is to change data-target to data-target=".navbarCollapse" and to modify class attribute of navbarSupportedContent div element from <div class="collapse navbar-collapse" id="navbarSupportedContent"> to <div class="collapse navbar-collapse navbarSupportedContent" id="navbarSupportedContent">. Not the best of workaround, but it does the trick until the Leaf parser is modified.

Materialize: How to add icons to input-field submit buttons?

I am trying to build a todo app based on Materialize-css. I want the input-field to be on the same line, as the submit button which should include a materialize icon. That's what I have currently:
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<input type ="submit" class ="btn waves-effect waves-light inline" value = "Submit"/>
</div>
</div>
Here's a picture about how it looks currently. I just don't know how to add the icon to the submit button, because there is no opening and closing tag, it's just an input tag. I need that input-tag to be able to use php code after the submition.
Todo-App
You just have to replace the input tag with a button tag like in the example, hope it will help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue darken-3">
Charts
<!-- <i class="material-icons">menu</i> -->
<ul class="right hide-on-med-and-down">
<!-- <li>Sass</li> -->
</ul>
</div>
</nav>
<!-- <ul class="sidenav" id="mobile-demo">
<li>Sass</li>
</ul> -->
</header>
<main >
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>

Ionic v1 placing icon in or next to input field

I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>

Schema.org is not validating: "it appears to include multiple reviews of an item, but no aggregate review information"

I am trying to implement Schema.org structured data to my website. On one of my pages, I have a possibility for users to rate and review a tourist attraction (for example St. Stephan's Cathedral in Vienna). Now I want to enhance my HTML with structured data for it.
Here is an example code of it (also available on http://pastebin.com/u8YZtrpW):
<!doctype html>
<html lang="de">
<head></head>
<body itemscope itemtype="http://schema.org/WebPage">
<div itemscope itemtype="http://schema.org/Place">
<article class="boxy-full">
<div>
<div class="rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" title="Rating: 4.50/5 <br># Ratings: 10">
<meta itemprop="ratingValue" content="4.50"/>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="ratingCount" content="10"/>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star-empty"></i>
</div>
</div>
<h1 itemprop="name">Vienna - St. Stephan's Cathedral</h1>
<div class="ccheader">
<meta itemprop="image" content="/myimg.jpg"/>
<img src="/myimg.jpg" alt="St. Stephan's Cathedral"/>
</div>
<div class="content">
<p>Here comes some text to describe the Place...</p>
</div>
</article>
<div class="boxy-full">
<h2>User-Bewertungen</h2>
<article class="blueblock" itemscope itemtype="http://schema.org/Review">
<div class="pull-right" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="ratingValue" content="5"/>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1">
<div class="rating" title="Rating: 5/5" data-placement="bottom">
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
<meta itemprop="itemreviewed" content="Stephansdom in Wien">
<h3 itemprop="name">Review 1 Title</h3>
<div class="co" itemprop="reviewBody">
Here comes some review text...
</div>
<footer class="small">Created by Gastuser, on 19.01.2015
<meta itemprop="datePublished" content="2015-01-19">
</footer>
</article>
<article class="blueblock" itemscope itemtype="http://schema.org/Review">
<div class="pull-right" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="ratingValue" content="5"/>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1">
<div class="rating" title="Rating: 5/5" data-placement="bottom">
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
<meta itemprop="itemreviewed" content="Stephansdom in Wien">
<h3 itemprop="name">Review 1 Title</h3>
<div class="co" itemprop="reviewBody">
Here comes some review text...
</div>
<footer class="small">Created by Gastuser, on 19.01.2015
<meta itemprop="datePublished" content="2015-01-19">
</footer>
</article>
</div>
</div>
</body>
</html>
My problem now is, that the Google webmaster tool for testing structured data (https://www.google.com/webmasters/tools/richsnippets) gives me the following error message:
No rich snippet will be generated for this data, because it appears to include multiple reviews of an item, but no aggregate review information.
But there is an aggregated rating markup. What I am doing wrong?
I don’t know why Google’s old SDTT reports this, but their new SDTT doesn’t:
Apart from the author property that Google would like to see for the Review items, no relevant errors or warnings are reported.

Bootstrap carousel not sliding on iphone

I'm building a responsive webpage with bootstrap plugin. Everything works fine in desktop browsers, even in low resolution and toggle device mode (chrome). But when i open the page on chrome or safari, on my iphone, the carousel just don't slide. It goes to the next slide, but without using the sliding effect.
This is the URL: http://diogoalmeida.pt/2/index.html
This is my HTML code:
<!DOCTYPE html>
<html lang="pt">
<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>Bootstrap 101 Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Blueimp Gallery -->
<link rel="stylesheet" href="css/blueimp-gallery.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Menu -->
<nav class="navbar navbar-fixed navbar-green" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav nav-green navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container-fluid myCarousel">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
<div class="item">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div class="container">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" style="width:10%;" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" style="width:10%;" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" style="width:10%;" alt="Orange">
</a>
</div>
</div>
<!-- JQuery -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4(custom-touch).js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Blueimp Gallery -->
<script src="js/jquery.blueimp-gallery-1.2.2.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
</body>
</html>
Problem solved, the bootstrap auto compiler (website) wasn't including vendor prefixes.
Solution here -> https://github.com/twbs/bootstrap/issues/14973
similar problem .....my problem was that the images were not sliding to the next on small screens , i added to the head and it worked
<script src="../resources/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="../resources/assets/js/smoothproducts.min.js"></script>
<script src="../resources/assets/js/theme.js"></script>