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>
Related
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>
I have a company page that has all the local branches listed on it.
On the page header, I have an itemType of Organization defined.
Each LocalBusiness (Hotel) is further down the page.
For each Hotel, I'm trying to add the branchOf property using a meta tag, but both Yandex and Google Snippets comes up blank for this attribute. Is it possible to do this way?
<div itemscope itemtype="http://schema.org/Organization" id="schema-organization">
<meta itemprop="description" content="blah blah blah" />
<a href="/" itemprop="url">
<h1 itemprop="name">The Hotel Chain</h1>
</a>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="addressLocality">new york city</div>
<meta itemprop="addressRegion" content="NY" />
</div>
</div>
<!-- snip -->
<div itemscope itemtype="http://schema.org/Hotel">
<meta itemprop="branchOf" itemref="schema-organization" />
<h2 itemprop="name">Hotel Location 1</h2>
Get directions on Google Maps
<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="40.7450605" />
<meta itemprop="longitude" content="-73.98301879999997" />
</div>
<div class="wrap-address clearfix" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="ul-reset">
<li><span itemprop="streetAddress">1234 Some Street</span> (between 3rd Ave & Lexington Ave)</li>
<li>
<span itemprop="addressLocality">New York City</span>,
<span itemprop="addressRegion">NY</span>
<span itemprop="postalCode">10016</span>
</li>
</ul>
</div>
<ul>
<li><strong>Phone:</strong><span itemprop="telephone">555-555-5555</span></li>
<li><strong>Fax:</strong><span itemprop="faxNumber">555-555-5555</span></li>
</ul>
<ul>
<li>
Information:
info#hotellocation1.com
</li>
<li itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint">
<span itemprop="contactType">Reservations</span>:
reservations#hotellocation1.com
</li>
<li itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint">
<span itemprop="contactType">Concierge</span>:
Concierge#hotellocation1.com
</li>
</ul>
</div>
About itemref:
it has to be specified on elements with itemscope
it is used to reference other properties (= itemprop in Microdata)
So this means for you:
move itemref to the Hotel
move itemprop="branchOf" to the Organization
Minimal example:
<div itemprop="branchOf" itemscope itemtype="http://schema.org/Organization" id="schema-organization">
<h1 itemprop="name">The Hotel Chain</h1>
</div>
<div itemscope itemtype="http://schema.org/Hotel" itemref="schema-organization">
<h2 itemprop="name">Hotel Location 1</h2>
</div>
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.
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.
I take a warning like that: "Warning: Incomplete microdata with schema.org." when Google Structured Data Testing Tool.
<div itemscope itemtype="http://schema.org/Product" style="display: none;">
<img itemprop="image" runat="server" id="listImage" src="" />
<span itemprop="name" runat="server" id="listName"></span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue" runat="server" id="rValue"></span>out of <span itemprop="bestRating">5</span> based on
<span itemprop="ratingCount" runat="server" id="allRating"></span>user ratings
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
<span itemprop="lowPrice" runat="server" id="lowPrice"></span>to <span itemprop="highPrice" runat="server" id="highPrice"></span>
<meta itemprop="priceCurrency" content="TRY" />
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="" runat="server" id="firstHotel"></a>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="" runat="server" id="secondHotel"></a>
</div>
</div>
what is the problem?
thank u
Google requires certain properties to be present to possibly trigger rich snippets. You ought to check the Google documentation here:
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146750
I had a same issue with the price value. It needs to have 2 decimal precision.
WRONG:
<meta content="4.5" itemprop="price"></meta>
RIGHT:
<meta content="4.50" itemprop="price"></meta>
Thank u.
I changed
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="" runat="server" id="firstHotel"></a>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<a itemprop="url" href="" runat="server" id="secondHotel"></a>
</div>
with
<div>
<a itemprop="url" href="" runat="server" id="firstHotel"></a>
<a itemprop="url" href="" runat="server" id="secondHotel"></a>
</div>