schema.org with data scattered over page - microdata

I would like to add schema.org markup to a product page. So basically all of the page is wrapped in a: <div itemscope itemtype="http://schema.org/Product">
The page shows the name of the product which I mark with itemprop="name", it shows an image which I mark with itemprop="image" etc.
In order to markup the price and the category of the item, I use http://schema.org/Offer. The problem is that price and category are displayed in different parts of the webpage. Is it OK to use itemtype=http://schema.org/Offer twice as in the following example?
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Name of product</span>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="category">animals</span>
</div>
<img itemprop="image" src="#"/>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">1000 EUR</span>
</div>
</div>

Don’t use http://schema.org/Offer twice. You are creating two offers that way.
The solution proposed by user1769790 may work for you, but note that the image will be associated with both, the Product and the Offer (which may or may not be what you want).
You could use the itemref attribute instead. See my answer on a similar question on Webmasters SE.
It could look like:
<div itemscope itemtype="http://schema.org/Product" itemref="foobar-image">
<span itemprop="name">Name of product</span>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="foobar-price">
<span itemprop="category">animals</span>
</div>
</div>
<img itemprop="image" id="foobar-image" src="" alt="" />
<div itemprop="price" id="foobar-price">1000 EUR</div>

Check if this answered your Question.
http://www.google.com/webmasters/tools/richsnippets?q=uploaded:8004e75474f6bc632c2a56ed33ba1d90
Enclose Product on the entire page. img is common for both product and offer. the solution considers image url for each category (Offer).
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Name of product</span>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="category">animals</span>
<img itemprop="image" src="#"/>
<span itemprop="price">1000 EUR</span>
</div>
</div>
I can help; if you can add more details of your page.

Related

XPATH mulitple condition to exclude some elements

I would like to parse schema data using XPATH.
Here's a simple structure.
<div itemscope itemtype="http://www.schema.org/Product">
<div itemscope itemtype="http://www.schema.org/Person">
<span itemprop="birthday" datetime="2009-05-10">May 10th 2009</span>
</div>
<div itemprop="name"> Product name </div>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price" content="500.00"> USD 500 </span>
</div>
</div>
The result I would like to parse is like this:
1. Category: http://www.schema.org/Product
v name: Product name
v Offers
- price: USD 500
2. Category: http://www.schema.org/Person
v birthday: May 10th 2009
To categorize "http://www.schema.org/Product" and "http://www.schema.org/Person", I used this code:
var category = $x("//*[#itemtype and not(#itemprop)]");
So category[0]:
<div itemscope itemtype="http://www.schema.org/Product">
<div itemscope itemtype="http://www.schema.org/Person">
<span itemprop="birthday" datetime="2009-05-10">May 10th 2009</span>
</div>
<div itemprop="name"> Product name </div>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price" content="500.00"> USD 500 </span>
</div>
</div>
Category[1]:
<div itemscope itemtype="http://www.schema.org/Person">
<span itemprop="birthday" datetime="2009-05-10">May 10th 2009</span>
</div>
Before parsing itemprop, I have to purge this one on category[0] to prevent duplicated data,
...
<div itemscope itemtype="http://www.schema.org/Person">
<span itemprop="birthday" datetime="2009-05-10">May 10th 2009</span>
</div>
...
How can I exclude those things on category[0]?
I would like to exclude this one under category[0]->
Final expression I would like to make:
Select category[0] not select ([contains(#itemtype,'schema.org/') and not(#itemprop)]/descendant-or-self::*)
Please shed light on the matter.
Thank you:)

I am trying to figure out the correct way to use microdata on a <figure> and <figcaption>

I tried this but keep getting errors saying that the address needs a value. However, this is exactly how they had it on schema.org
<section class="content col-sm-4 mx-auto" id="germination" itemscope
itemtype="http://schema.org/Event">
<a itemprop="url"
href="http://mevocals.weebly.com/germination.html">
<img itemprop="image" class="img-fluid rounded "
src="https://freedomfieldme.net/images/germinationPoster_02.png"
alt="Germination poster of Freedom Field Cannabis Friendly camping
and music festival" title="Germination">
<h4 itemprop="name">Germination Camping and Music Fesitval!
</h4>
</a>
<p>Our first festival of the year. Come and help us start the
season off with a bang!</p>
<meta itemprop="startDate" content="2018-04-17T1600">
Thu, 04/17/2018<br>
4:pm.
<div itemprop="location" itemscope
itemtype="http://schema.org/Place">Freedom Field</div>
<div itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Harmony</span>
<span itemprop="addressRegion">ME</span>
</div>
</section><!--germination-->

Separate rich snippet scopes for the same item

I am creating rich snippets for my webshop. One of the itemtypes I use is the "Organization" type. The problem with this is that I have specified the Organisation name and the image in the header of my webshop and the address in the footer. In between is the rest of the webshop with all it's products, reviews etc.
When I test my rich snippets with http://www.google.nl/webmasters/tools/richsnippets, I get two separate Organisations instead of one. Is there a way to combine my two scopes to become one Organisation?
Here is the situation I have right now:
<div id="header" itemscope itemtype="http://schema.org/Organization">
<h1 itemprop="name">Webshopname</h1>
<img id="logo" itemprop="logo" src="https://webshopurl/img/webshop-logo.png">
</div>
<div class="whole_article" itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Articlename</h1>
</div>
<div id="footer" itemscope itemtype="http://schema.org/Organization">
<div id="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">Address 12</div>
<div itemprop="postalCode">Postalcode</div>
<div itemprop="addressLocality">Locality</div>
</div>
</div>
Don’t create several items about the same thing on the same page.
You can use the itemref attribute to add properties to an item that are not nested in the same element:
<div id="header" itemscope itemtype="http://schema.org/Organization" itemref="address">
<h1 itemprop="name">Webshopname</h1>
<img id="logo" itemprop="logo" src="https://webshopurl/img/webshop-logo.png">
</div>
<div class="whole_article" itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Articlename</h1>
</div>
<div id="footer">
<div id="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">Address 12</div>
<div itemprop="postalCode">Postalcode</div>
<div itemprop="addressLocality">Locality</div>
</div>
</div>

Rich Snippet AggregateRating on type Place

According to schema.org Place should support AggregateRating.
But when I use this snippet:
<div class="row-fluid rating-summary" itemscope itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.5</span>
<span itemprop="bestRating">5</span>
<span itemprop="ratingCount"21</span>
</div>
</div>
Googles Rich Snippet tester won't display the rating until I exchange Place with Product. That’s of course wrong.
I can solve this by using
itemscope itemtype="http://schema.org/WebPage"
on the body but I would really like to know what’s the best way to integrate Rating for Rental Properties.
Try smth like this
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/AggregateRating">
Avg. Rating:
<span itemprop="ratingValue">9</span>
<meta itemprop="bestRating" content="10"/>
<span itemprop="ratingCount">4</span> Reviews
</div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Place">
<a itemprop="url" href="wells-fargo-center.html">
Wells Fargo Center
</a>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Philadelphia</span>,
<span itemprop="addressRegion">PA</span>
</div>
</div>
</div>
As you see the idea is to put Place inside Review. Google gives stars for that.
Not so nice as for me but works.

Marking up HTML code with microdata when there are multiple products on a page

I have a page which compares 4 products at a time in parallel tabular form i.e. It mentions features of each of them one after another. Here is a sample page .
I wish to tag these features so that it becomes easier for search engines to interpret. However, in all the examples given here, you have to mention all the features of a product at a time in a div. This causes a problem for my case, where I mention the features of product together.
A typical example as given goes like this :-
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
</div>
However, I would like it to be in this way :-
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span> // Item 1
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic2</span> // Item 2
</div>
Further followed by :-
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$19.95</span> // Item 1
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$21.95</span> // Item 2
</div>
So, in nutshell, is there a way so that I can tag an item with some code and then use it to refer to other details of that item ?
Please comment if I am unclear in asking my doubt !
Use itemref:
<div itemscope itemtype="http://schema.org/Offer" itemref="item1_price">
<span itemprop="name">Blend-O-Matic</span>
</div>
<div id="item1_price">
<span itemprop="price">$19.95</span>
</div>
See results from Google Structured Data Testing Tool here
You might want to have a look at this for SERP. It shows how to have multiple products in a "ItemList"
http://scottgale.com/schema-org-markup-serp/2013/03/17/
Hth
PS: This works without error or issue on the Google Structured Data testing tool over at http://www.google.com/webmasters/tools/richsnippets
But)))
If to be more realistic - You always have WebPage itemtype yes?
So if you have it we have about this:
<div itemscope="" itemtype="http://schema.org/WebPage">
<div itemscope itemtype="http://schema.org/Offer" itemref="item1_price">
<span itemprop="name">Blend-O-Matic</span>
</div>
<div id="item1_price">
<span itemprop="price">$19.95</span>
</div>
</div>
See the google result
And we have a mistake. If we add the same itemscope="" itemtype="http://schema.org/Offer" we will have one full offer and one duplicate with only price. Code:
<div itemscope="" itemtype="http://schema.org/WebPage">
<div itemscope="" itemtype="http://schema.org/Offer" itemref="item1_price">
<span itemprop="name">Blend-O-Matic</span>
</div>
<div itemscope="" itemtype="http://schema.org/Offer">
<span id="item1_price" itemprop="price">$19.95</span>
</div>
</div>
Google result
So we need a different way as I understand, am I right?

Resources