schema.org - having video object nested inside product - microdata

I am trying to add the schema.org meta tags to my product pages - having offers and ratings etc.
The code below works fine and I'm able to test it google rich snippet tool.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="5">
<meta itemprop="reviewCount" content="20">
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Rs.100</span>
</div>
</div>
Now I have a video of this product on this page and based on the page layout - it is positioned above the price. So when I insert the videoobject as shown below - the google rich snippet tool throws an error saying
Error: Page contains property "video" which is not part of the schema
This is the shorter version of the full code which gives the error.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="5">
<meta itemprop="reviewCount" content="20">
</div>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Hello World"/>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="v2.jpg" />
<meta itemprop="contentURL" content="www.viddler.com/player/xyz"/>
<meta itemprop="embedURL" content="http://viddler.com/flash/publisher.swf?key=xyz"/>
<meta itemprop="description" content="Hello world"/>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Rs.100</span>
</div>
</div>
Now if I remove the video object and put it outside the product tag - its valid. But the way my page is structured - the video will appear within the product tag.
I can close the product tag - start the video tag - close the video tag and then open another new product tag - but then it will show as 2 different products.
Any idea how I should go about this.
Thanks

http://www.schema.org/Product doesn’t define the property video.
You could omit itemprop="video".
Drawback: The video is not associated with the product.
You could use the property description instead.
Drawback: the expected type is "Text" (but see Expected types vs text in the schema.org documentation).
You could use itemref to split your markup into two parts without creating two products, leaving the video out of the product item.
Drawback: The video is not associated with the product.

Just in case anyone stumbles across this looking for an answer to the question like I was. I'm not sure if this has changed since the original question was answered, but here is an up-to-date Jan 2018 answer.
According to schema.org (see http://schema.org/Product) CreativeWorks (of which VideoObjects are a type of) can be referenced from within a product with the use of itemprop="subjectOf" instead of itemprop="video". See the example below. This should work with Google's Structured Data Testing Tool.
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor" />
<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>
<span itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" class="price-excluding-tax">
<meta itemprop="availability" href="http://schema.org/InStock">
<meta itemprop="itemCondition" content="http://schema.org/NewCondition">
<span itemprop="priceSpecification" itemscope="" itemtype="http://www.schema.org/PriceSpecification" id="price-excluding-tax-1003">
<span class="price-currency" itemprop="priceCurrency" content="GBP">£</span> <span class="price" itemprop="price" content="999">999.00</span>
</span>
</span>
<div itemprop="subjectOf" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="PT1M7S" />
<meta itemprop="name" content="Opera® ProSafe Hospital Profiling Bed" />
<meta itemprop="description" content="The Opera® ProSafe is the flagship bed from the Opera® range. Its extra low height and high nursing height makes the bed an all-in-one bed, eliminating the need to use low profiling and standard profiling beds separately. The Opera® ProSafe accommodates up to a 10” mattress, allowing the bed to be used with deep airflow mattresses and comply with the BS EN 60601-2-52:2010 medical beds standard."
/>
<meta itemprop="thumbnailUrl" content="https://alpinehc.co.uk/media/import/prosafe-video-thumbnail.png" />
<meta itemprop="contentURL" content="https://vimeo.com/232354348" />
<meta itemprop="embedURL" content="https://player.vimeo.com/video/232354348" />
<meta itemprop="uploadDate" content="2017-09-04T11:37:00+08:00" />
<meta itemprop="height" content="340" />
<meta itemprop="width" content="190" />
<iframe src="https://player.vimeo.com/video/232354348?api=1&player_id=player1&autoplay=1&loop=1" height="240" width="320"></iframe>
</div>
</div>

Adding one more option to what unor already said.
You may consider your video as kind of review (overview of the product). You can even say (depending on your actual web page) that AggregateRating (you have in code)+reviews for it+video are all parts of this broad Review. Then markup may look like this:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="5">
<meta itemprop="reviewCount" content="20">
</div>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Hello World"/>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="v2.jpg" />
<meta itemprop="contentURL" content="www.viddler.com/player/xyz"/>
<meta itemprop="embedURL" content="http://viddler.com/flash/publisher.swf?key=xyz"/>
<meta itemprop="description" content="Hello world"/>
</div>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Rs.100</span>
</div>
</div>

Related

Laravel - HTML rendering in the wrong place

I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.

Google Now doesnt show order schema

I tried Parcel Delivery and it worked, i can click on the little button on the right site in gmail and a cart shows up in google now.
However Order doesn't seem to work for me at all.
I used the google markup tester and it said its fine. I also do have the button on the right site in gmail, but no cart shows up in google now. Since i can't figure out what i'm doing wrong i know ask you this question.
This is the Code i use. It is the code you provide on your site, except that i changed the orderDate since that caused a problem while i tested Parcel Delivery.
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Amazon.com"/>
</div>
<meta itemprop="orderNumber" content="123-4567890-1234567"/>
<meta itemprop="priceCurrency" content="USD"/>
<meta itemprop="price" content="539.00"/>
<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Samsung Chromebook"/>
<meta itemprop="sku" content="B009LL9VDG"/>
<link itemprop="url" href="https://rads.stackoverflow.com/amzn/click/com/B009LL9VDG" rel="nofollow noreferrer"/>
<link itemprop="image" href="http://ecx.images-amazon.com/images/I/81H-DO3qX0L._SX522_.jpg"/>
</div>
<meta itemprop="price" content="249.99"/>
<meta itemprop="priceCurrency" content="USD"/>
<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
<meta itemprop="value" content="2"/>
</div>
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Samsung Marketplace Store"/>
</div>
</div>
<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Google Chromecast"/>
<meta itemprop="sku" content="B00DR0PDNE"/>
<link itemprop="url" href="https://rads.stackoverflow.com/amzn/click/com/B00DR0PDNE" rel="nofollow noreferrer"/>
<link itemprop="image" href="http://ecx.images-amazon.com/images/I/811nvG%2BLgML._SY550_.jpg"/>
</div>
<meta itemprop="price" content="29.99"/>
<meta itemprop="priceCurrency" content="USD"/>
<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
<meta itemprop="value" content="1"/>
</div>
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Google Store # Amazon"/>
</div>
</div>
<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/DeliveryChargeSpecification">
<meta itemprop="price" content="10.00"/>
<meta itemprop="priceCurrency" content="USD"/>
</div>
<link itemprop="url" href="https://www.amazon.ca/gp/css/summary/edit.html/orderID=123-4567890-1234567"/>
<link itemprop="orderStatus" href="http://schema.org/OrderStatus/OrderProcessing"/>
<link itemprop="paymentMethod" href="http://schema.org/CreditCard"/>
<meta itemprop="paymentMethodId" content="**** **** **** 1234"/>
<meta itemprop="orderDate" content="2014-12-02T23:30:00-08:00"/>
<meta itemprop="isGift" content="false"/>
<meta itemprop="discount" content="0.97"/>
<meta itemprop="discountCurrency" content="USD"/>
<div itemprop="customer" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="John Smith"/>
</div>
<div itemprop="billingAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="Google"/>
<meta itemprop="streetAddress" content="1600 Amphitheatre Pkwy"/>
<meta itemprop="addressLocality" content="Mountain View"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="USA"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
Google Now only displays parcel delivery cards, not order markups.
In Google now, if you go to settings->cards->Gmails-> Show cards based on Gmail ---- you see option for Package tracking only.
Hope that helps!

Schema.org product title in offer

I'm implementing the Schema.org/Product mark-up in my e-commerce site. However my mark-up is set up in such a way that the itemprop="name" of the product lies inside of the offer (because of the link to the offer). Now to fix this I could use a display:none but that just seems like it is not the best solution. Is there a way to extract the name info about a product out of the offers section or should I change my mark-up?
Cheers,
Adnan
<div itemscope itemtype="http://schema.org/Product">
<img src="imageurl" itemprop="image" />
<h1 class="product_brand" itemprop="brand manufacturer">Brand</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product_title"><a itemprop="url" href="link"><span itemprop="name">Product name</span></a><span id="stockcount"><link itemprop="availability" href="http://schema.org/InStock">Product Availability</span></link></div>
<div class="product_price" itemprop="price">Price</div>
<link itemprop="itemCondition" href="http://schema.org/NewCondition" />
</div>
<div style="display: none">
<span itemprop="name">Product name (again)</span>
</div>
<div class="description" itemprop="description">
some description
</div>
</div>
You could use a meta tag.
<div itemscope itemtype="http://schema.org/Product">
<img src="imageurl" itemprop="image" />
<h1 class="product_brand" itemprop="brand manufacturer">Brand</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product_title"><a itemprop="url" href="link"><span itemprop="name">Product name</span></a><span id="stockcount"><link itemprop="availability" href="http://schema.org/InStock">Product Availability</span></link></div>
<div class="product_price" itemprop="price">Price</div>
<link itemprop="itemCondition" href="http://schema.org/NewCondition" />
</div>
<meta itemprop="name" content="Product name" />
<div class="description" itemprop="description">some description</div>
</div>

Perfomance is bad while switching between the pages with jquery mobile

I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.
First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ?
If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snippets
<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />
<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>
<script src="StyleSheet/fastclick.js"></script>
<script type="application/javascript">
$.mobile.defaultPageTransition = 'none';
$.mobile.transitionFallbacks.slideout = 'none';
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
$( document ).bind( "mobileinit", function() {
$.mobile.buttonMarkup.hoverDelay = 500
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="HomePage" class="jqm-demos">
<div class="ui-body ui-body-b">
CLick Me to go second page
</div>
</div>
<div data-role="page" id="SecondPage" class="jqm-demos">
<div class="ui-body ui-body-b">
<br> CLick Me to go first page
<div id="JQM" data-theme="b" data-content-theme="c"
data-role="collapsible" data-collapsed-icon="arrow-d"
data-expanded-icon="arrow-u">
<h3>
<span style="float: left;"> JQM is very slow </span> <a
href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
style="float: right;"
class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
</a>
</h3>
<p>I sther any way so that page transition should happen just
like native applciation when using JQM ? Botton click also also
sometimes not responsive.</p>
</div>
</div>
<!-- content -->
<!-- footer -->
<div data-role="footer" data-theme="b" data-tap-toggle="false"
data-position="fixed">
<!--class="ui-bar ui-bar-b"-->
<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
<center>
<a href="#HomePage" data-role="button" data-icon="home"
data-iconpos="notext" data-theme="b">Home</a>
</center>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>

Microdata Rich Snippets Showing On Home Page?

I added the schema.org rich snippets code inside the <head> and the text is showing up on my home page, what am I doing wrong?
DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0 Transitional//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
...
Snippet Code
<div itemscope itemtype="http://schema.org/EntertainmentBusiness">
<span itemprop="name">MySite.com</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.5</span> stars -
based on <span itemprop="reviewCount">233</span> Reviews
</div>
</div>
div is not allowed in head.
Parser’s think that the body started since they encounter div, so this content is displayed.
See "Content model" for the allowed content of the head element.
The correct DTD to use for XHTML and MicroData is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">
Found a code example from schema.org that uses the 'meta' tag - although it's not recommended from an SEO point of view according to the articles I have read:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>

Resources