I have a project - http://preloaders.net. I have set it up so that rating is shown in google search (the orange stars under the title, e.g. try entering preloader spinner keywords ). Everything is working fine, except for home page as I just fixed it.
I am re-coding the whole markup now to HTML5 (which I am pretty new to) and use schema.org and include all products to the whole schema, but I do not know what the substitute for Review-aggregate in schema.org is, so I am trying WebPage. Google webmaster does not show errors, but the question is: will the following code still show the stars or should I do something else?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my title</title>
</head>
<body>
<nav>
</nav>
<main>
<section>
<h1>AJAX LOADERS</h1>
<article itemscope itemtype="http://schema.org/Product">
<figure>
<img itemprop="image" src="/preloader.gif" alt="">
<figcaption itemprop="description">
Spinning Christmas tree with balls.
</figcaption>
</figure>
<a href="#" title="#" itemprop="url">
<h3 itemprop="name">3D Christmas tree </h3>
</a>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="USD">$</span><span class="price" itemprop="price">2.95</span>
</div>
<div class="favorite"></div>
<div class="add-to-cart"></div>
<div class="frames-amount">30 fr</div>
<div class="dimensions">256x256</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Average Rating: <span itemprop="ratingValue">5</span>
Votes: <span itemprop="ratingCount">12</span>
</div>
</article>
</section>
<aside>
<article itemscope itemtype="http://schema.org/Product">
<a href="/en/free">
<h3 itemprop="name">Free templates</h3>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="USD">$</span><span class="price" itemprop="price">0</span>
</div>
<div itemprop="description">
Spinning Christmas tree with balls.
</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Average Rating: <span itemprop="ratingValue">5</span>
Votes: <span itemprop="ratingCount">12</span>
</div>
</a>
</article>
</aside>
</main>
<footer>
<nav>
</nav>
</footer>
<script type="application/ld+json">
{ "#context": "http://schema.org",
"#type": "WebPage",
"name": "Loading GIF & APNG (AJAX loaders) generator",
"description": "More than 800 free and premium ajax loader (loading animated GIF and APNG) spinners, bars and 3D animations generator for AJAX and JQuery",
"aggregateRating":
{"#type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "7",
"itemReviewed": "AJAX loaders generator"
}
}
</script>
</body>
</html>
Sorry for noob question, just need to make sure I am in the right direction.
Thanks in advance.
Here is an example of what you have to do
And here is the official documentation
What you've done is versy similar to the code from the exampple so I guess that what you've done is enough to have the stars
Related
Does anyone have any idea what I need to add in order to solve the issues for the following piece of code?
<div class="product-info-main">
<div class="product attribute overview">
<div class="value" itemprop="description">
KISS KISS BANG BANG
</div>
</div>
<div class="product-info-price">
<div class="page-title-wrapper product">
<h1 class="page-title"><span class="base" data-ui-id="page-title-wrapper" itemprop="name">FAUX FUR TEDDY COAT</span></h1>
</div>
<div class="price-box price-final_price" data-price-box="product-id-9586" data-product-id="9586" data-role="priceBox">
<span class="normal-price"><span class="price-container price-final_price tax weee" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span class="price-wrapper" data-price-amount="350" data-price-type="finalPrice" id="product-price-9586"><span class="price">€350.00</span></span></span></span>
<meta content="350" itemprop="price">
<meta content="EUR" itemprop="priceCurrency">
</div>
</div>
</div>
The errors are for the following pieces of code:
<div class="value" itemprop="description">KISS K...
<span class="base" data-ui-id="page-title-wrapper" itemprop="name">...
<span class="price-container price-final_price tax weee" itemprop="offers" itemscope itemtype="http://schema.org/Offer">...
<meta itemprop="price" content="350" />...
<meta itemprop="priceCurrency" content="EUR" />...
Your price and priceCurrency are out of scope of the Offer. The working code would be probably:
<div class="product-info-main">
<div class="product attribute overview">
<div class="value" itemprop="description">
KISS KISS BANG BANG
</div>
</div>
<div class="product-info-price">
<div class="page-title-wrapper product">
<h1 class="page-title"><span class="base" data-ui-id="page-title-wrapper" itemprop="name">FAUX FUR TEDDY COAT</span></h1>
</div>
<div class="price-box price-final_price" data-price-box="product-id-9586" data-product-id="9586" data-role="priceBox">
<span class="normal-price"><span class="price-container price-final_price tax weee" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span class="price-wrapper" data-price-amount="350" data-price-type="finalPrice" id="product-price-9586"><span class="price">€350.00</span>
<meta content="350" itemprop="price">
<meta content="EUR" itemprop="priceCurrency">
</span></span></span>
</div>
</div>
</div>
Removing everything which is not relevant for Microdata, you have:
<div itemprop="description">KISS KISS BANG BANG</div>
<span itemprop="name">FAUX FUR TEDDY COAT</span>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"></span>
<meta content="350" itemprop="price">
<meta content="EUR" itemprop="priceCurrency">
Unless you have a parent Microdata item (with itemscope and possibly itemtype) not shown in your snippet, none of your itemprop attributes is associated with an item, which is invalid.
I assume your data is about a Product, so it should be something like this:
<article itemscope itemtype="http://schema.org/Product">
<p itemprop="description">KISS KISS BANG BANG</p>
<h2 itemprop="name">FAUX FUR TEDDY COAT</h2>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta content="350" itemprop="price">
<meta content="EUR" itemprop="priceCurrency">
</div>
</article>
I was wondering what is the best way to structure (Microdata) a list of manufactures that a company represents.
I have the following example as a List. Would this work?
<div itemscope itemtype="http://schema.org/ItemList">
<div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<div>
<img itemprop=image data-src="/companyALogo.jpg" alt="Company A" />
<div>
<meta itemprop="position" content=0>
<div itemprop="name">Company A</div>
<div>
<a itemprop="url" href="https://company/companyAPage"> More On Company A</a>
</div>
</div>
</div>
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<div>
<img itemprop=image data-src="/companyALogo.jpg" alt="Company B" />
<div>
<meta itemprop="position" content=1>
<div itemprop="name">Company B</div>
<div>
<a itemprop="url" href="https://company/companyBPage"> More On Company B</a>
</div>
</div>
</div>
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<div>
<img itemprop=image data-src="/companyCLogo.jpg" alt="Company C" />
<div>
<meta itemprop="position" content=2>
<div itemprop="name">Company C</div>
<div>
<a itemprop="url" href="https://company/companyCPage"> More On Company C</a>
</div>
</div>
</div>
</div>
</div>
</div>
Your structured data just conveys that there is a list of something, where each list item has a name and a URL. It does not convey the context for the list, and it does not convey what each list item is supposed to represent.
A manufacturer would usually be an Organization, or more specifically a LocalBusiness.
The itemListElement property allows you to provide LocalBusiness items directly, or you could use intermediate ListItem items, to which you can add the LocalBusiness items via the item property.
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/LocalBusiness">
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<div itemprop="item" itemscope itemtype="http://schema.org/LocalBusiness">
</div>
</div>
Unless a consumer (like Google Search) requires the slightly more complex ListItem way for a specific feature, the only reason for using it would be if the item order is relevant. The reason is that Microdata doesn’t capture the order of the HTML elements, so you need to use the position property if the order matters.
So now it’s clear that it’s a list of businesses, but it’s still not clear what the purpose of the list is. I’m not sure what "a list of manufactures that a company represents" means exactly, but if Schema.org offers a suitable property to convey this, it’s likely that it doesn’t work with an ItemList, but by providing multiple values for the property directly. So you might have to weigh up the disadvantages and advantages.
I have a website which list multiple companies, my markup goes something like this:
<h2>Checkout those cool companies</h2>
<div itemscope="itemscope" itemtype="https://schema.org/Organization">
<img itemprop="logo" src="logo1.jpg" alt="">
<h3 itemprop="name">Company1</h3>
<p itemprop="description">It's a great company</p>
<span itemprop="url">http://company1.com</span>
</div>
<div itemscope="itemscope" itemtype="https://schema.org/Organization">
<img itemprop="logo" src="logo2.jpg" alt="">
<h3 itemprop="name">Company2</h3>
<p itemprop="description">It's a great company as well</p>
<span itemprop="url">http://company2.com</span>
</div>
<div itemscope="itemscope" itemtype="https://schema.org/Organization">
<img itemprop="logo" src="logo3.jpg" alt="">
<h3 itemprop="name">Company3</h3>
<p itemprop="description">It's a amazing company</p>
<span itemprop="url">http://company3.com</span>
</div>
I'm using itemtype="https://schema.org/Organization multiples times in order to help crawler better identify the content.
Is this an appropriate use of https://schema.org/Organization?
How can I make my own https://schema.org/Organization not conflict with the companies markup I'm listing?
Yes, it’s correct to use multiple Organization items for this purpose.
To make clear that your own Organization is not part of this list, you could
provide it as value for author/publisher (of the WebPage), and
provide an ItemList for the list of the other organizations.
In case this list of organizations is the main content for that page, you could use mainEntity (for the ItemList) and use CollectionPage instead of WebPage:
<body itemscope itemtype="http://schema.org/CollectionPage">
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
</div>
<section itemprop="mainEntity" itemscope itemtype="http://schema.org/ItemList">
<h2>Checkout those <span itemprop="name">cool companies</span></h2>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Organization"></article>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Organization"></article>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Organization"></article>
</section>
</body>
I'm trying to create Google Rich Snippets for my Product page.
I've created a Product using
<div itemscope="" itemtype="http://schema.org/Product">
...
</div>
Inside this product, I have an Offer, created with
<div itemscope="" itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
...
</div>
</div>
I want to add the seller property (an Organization) to the Offer, however, my HTML structure have the seller under the Product and not under the Offer.
<div itemscope="" itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
...
</div>
<div itemprop="seller" itemscope="" itemtype="http://schema.org/Organization">
...
</div>
</div>
However, this doesn't seem to please the Google Structured Data testing tool.
I have then tried with using itemref on the Organization and using a meta-tag in the Offer
<div itemscope="" itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="seller" itemref="provider">
...
</div>
<div id="provider" itemscope="" itemtype="http://schema.org/Organization">
...
</div>
</div>
But it still doesn't seem to recognize the seller as the Organization.
What am I doing wrong?
You are not using itemref correctly:
The itemref attribute has to be specified on an element with itemscope.
It has to reference an element with itemprop.
So your example would have to look like:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="provider">
</div>
<div id="provider" itemprop="seller" itemscope itemtype="http://schema.org/Organization">
</div>
</div>
But this does not work, because this way, the seller property will be added to both items, Product and Offer. This is not valid because Product can’t have the seller property.
So you would either have to change the nesting, or don’t use Product on the container div.
However, there’s also an ugly fix: add a dummy element with itemscope:
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="provider">
</div>
<div itemscope>
<div id="provider" itemprop="seller" itemscope itemtype="http://schema.org/Organization">
</div>
</div>
</div>
I'm creating a simple (well, it was going to be simple before I decided to mark it up with Microdata) web page containing company contact information for a business with two offices. I'm using schema.org and LocalBusiness for the two offices.
Here are the relevant parts of my HTML:
<body itemscope itemtype="http://schema.org/Corporation">
<header>
<hgroup>
<h1>Company Name</h1>
<h2 itemprop="description">Company description</h2>
</hgroup>
</header>
<section>
<h1><span itemprop="name">Company Name Limited</span> Offices</h1>
<article itemscope itemtype="http://schema.org/LocalBusiness">
<h2 itemprop="name">Company Name, Location 1 Office</h2>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Street Address</span><br />
<span itemprop="addressLocality">Locality</span><br />
<span itemprop="addressRegion">Region</span><br />
<span itemprop="postalCode">Postcode</span><br />
<span itemprop="addressCountry">Country</span>
</p>
<p><a itemprop="maps" href="http://maps.google.co.uk/blahblah">Map</a></p>
<p>Telephone: <span itemprop="telephone">01234 567890</span><br />
Fax: <span itemprop="faxNumber">01234 567890</span><br />
Email: <span itemprop="email">email#domain.co.uk</span><br />
http://www.domain.co.uk</p>
<!-- itemprop="branchOf" -->
</article>
<article itemscope itemtype="http://schema.org/LocalBusiness">
<h2 itemprop="name">Company Name, Location 2 Office</h2>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Street Address</span><br />
<span itemprop="addressLocality">Locality</span><br />
<span itemprop="addressRegion">Region</span><br />
<span itemprop="postalCode">Postcode</span><br />
<span itemprop="addressCountry">Country</span>
</p>
<p><a itemprop="maps" href="http://maps.google.co.uk/blahblah">Map</a></p>
<p>Telephone: <span itemprop="telephone">01234 567890</span><br />
Fax: <span itemprop="faxNumber">01234 567890</span><br />
Email: <span itemprop="email">email#domain.co.uk</span><br />
http://www.domain.co.uk</p>
<!-- itemprop="branchOf" -->
</article>
</section>
</body>
Where I currently have <!-- itemprop="branchOf" -->, I believe I need to associate the LocalBusinesses with the Corporation mentioned earlier in the page.
How should I do this? Can an element id be used for this?
Thanks.
This is possible with the use of the itemref attribute:
Add itemprop="branchOf" to the body
Add an id to the body, e.g. id="foo"
Add itemref="foo" to both article
Reduced example:
<body id="foo" itemprop="branchOf" itemscope itemtype="http://schema.org/Corporation">
<span itemprop="name">Company Name Limited</span>
<article itemscope itemtype="http://schema.org/LocalBusiness" itemref="foo">
<span itemprop="name">Company Name, Location 1 Office</span>
</article>
<article itemscope itemtype="http://schema.org/LocalBusiness" itemref="foo">
<span itemprop="name">Company Name, Location 2 Office</span>
</article>
</body>
You can use #itemref for this, have a look at this example - I normally use Philip's Live Microdata service to test it.
Since "branchOf" refers to an Organization and an Organization has a url (like everything), I guess "branchOf" should point to the url of the Organization.
I think you should try this:
<p id="office-place" itemprop="branchOf" itemscope itemtype="http://www.schema.org/Organization"><span itemprop="name">Company Name</span></p>