With Microdata, what is the best way to represent an event page with multiple date/time booking options? There will be occasions when the event page only has one booking option, i.e one set date/time, no alternative, does this require a different method?
<section>
<h1>Tennis Lessons</h1>
<ol>
<li>Book Tickets for
<time datetime="2001-05-15 19:00">May 15</time>
</li>
<li>Book Tickets for
<time datetime="2001-05-16 19:00">May 16</time>
</li>
<li>Book Tickets for
<time datetime="2001-05-17 19:00">May 17</time>
</li>
</ol>
</section>
Or is this the wrong way to approach it and the events are children of a product?
<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Tennis Lessons</h1>
<ol>
<li itemscope itemtype="http://schema.org/Event">Book Tickets for
<time datetime="2001-05-15 19:00">May 15</time>
</li>
<li itemscope itemtype="http://schema.org/Event">Book Tickets for
<time datetime="2001-05-16 19:00">May 16</time>
</li>
<li itemscope itemtype="http://schema.org/Event">Book Tickets for
<time datetime="2001-05-17 19:00">May 17</time>
</li>
</ol>
</section>
In this case, on a booking confirmation page, it would then be correct to wrap the whole section in event Microdata as it then only has one possible date/time option?
Schema.org defines that an Event happens "at a certain time". So each lesson should be represented by its own Event item.
If you can book a lesson on your page, you may want to use the offers property and provide an Offer for each Event.
The nesting in your second snippet (Event items inside the Product item) has no influence on the Microdata (example). You have to use a property (within the itemprop attribute) if you want to connect Microdata items.
While you could use Product to represent the fact that you provide the service of tennis lessons, it seems that the Product type is missing a suitable property to reference an Event item. The typical solution would be to use both types, but Microdata is rather limited in that regard (it works better with RDFa).
If you want to provide data that is the same for all events, you could make use of the itemref attribute (instead of repeating it for each event).
So a basic structure could be this:
<section>
<h1>Tennis Lessons</h1>
<p itemprop="description" id="event-desc">…</p>
<ol>
<li itemscope itemtype="http://schema.org/Event" itemref="event-desc">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
</div>
</li>
<li itemscope itemtype="http://schema.org/Event" itemref="event-desc">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
</div>
</li>
</ol>
</section>
Related
I want to create a breadcrumb navigation with the Microdata format.
So I'm using following BreadcrumbList markup and Google Structured Data Testing Tool recognized it:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home/fashionn">
<span itemprop="name">Fashion</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">Coats</span>
<meta itemprop="position" content="3">
</li>
</ol>
But from Bing Markup Validator I receved following message:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Regarding Bing documentation the following markup is correct for breadcrumb:
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home/fashion">
<span itemprop="title">Fashion</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Coats</span>
</li>
</ol>
So is there a way to create a breadcrumb navigation with Microdata format which would be valid both for Google and Bing?
To rephrase your goal, as far as I understand it: You want to markup your breadcrumbs
with Microdata
using two vocabularies (Schema.org and Data-Vocabulary.org)
without duplicating your content
so that Bing’s and Google’s testing tool still validate it.
Microdata makes it hard to mix vocabularies:
In itemtype, you can only use types from the same vocabulary.
In itemprop, you can mix properties from different vocabularies, but only the properties from one vocabulary can be specified in the shorter string form, while the properties from all other vocabularies have to be specified as absolute URIs.
(This isn’t a problem if consumers support the absolute URI form for the properties they recognize.)
(By the way, RDFa supports mixing vocabularies way better, so you might want to consider using RDFa instead of Microdata.)
A way to avoid the problem, maybe.
Use Data-Vocabulary.org for Bing and Google.
While the vocabulary Data-Vocabulary.org is deprecated and deleted (I wonder why Bing is still recommending it), Google still seems to support it, too (probably because it’s still used on many websites from back then, when Google recommended it, too).
I don’t know if it really works, but at least Google’s SDTT doesn’t give any warnings/errors for your Data-Vocabulary.org snippet.
Solutions, maybe.
Unfortunately, I can’t test it in Bing’s tool (because an account is required), so the following snippets don’t necessarily work.
itemref + absolute URIs for Data-Vocabulary.org’s title
This snippet uses Schema.org as primary vocabulary. An empty div outside of Schema.org’s BreadcrumbList is used to create the item for Data-Vocabulary.org’s Breadcrumb. This item references the a elements via itemref. It reuses the url property (because it’s named the same in both vocabularies) and provides Data-Vocabulary.org’s title property as absolute URI.
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b1 b2">
</div>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Home</span>
</a>
</span>
</span>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Fashion</span>
</a>
</span>
</span>
<meta itemprop="position" content="2" />
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that Breadcrumb/title is not recognized; it’s specified as absolute URI, so it can be used everywhere).
Whether it works in Bing’s testing tool depends on if Bing recognizes http://data-vocabulary.org/Breadcrumb/title as title property.
As the vocabulary is deleted, I’m not sure if it really was http://data-vocabulary.org/Breadcrumb/title instead of http://data-vocabulary.org/title, but if I remember it correctly, it should have been the first one.
itemref + absolute URIs for Schema.org’s name
Same idea like in the snippet above, but this time Data-Vocabulary.org would be the primary vocabulary, while Schema.org’s BreadcrumbList gets created in an empty div.
This is harder, because Schema.org’s structure requires more properties, so you have to create more empty elements.
<div itemscope itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b1">
</span>
<meta itemprop="position" content="1" />
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b2">
</span>
<meta itemprop="position" content="2" />
</div>
</div>
<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li itemprop="title">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://schema.org/name">Home</span>
</a>
</li>
<li itemprop="title">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://schema.org/name">Fashion</span>
</a>
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that name is not recognized; it’s specified as absolute URI, so it can be used everywhere).
Situation: need to add the availability property to a product page.
Schema.org recommends this format for Microdata:
<link itemprop="availability" href="http://schema.org/InStock" />In stock
I'm combining it with the code on our site:
<li>
<i class="fa fa-check-square-o">
<link itemprop="availability" href="http://schema.org/InStock">
<span>In Stock</span>
</i>
</li>
Problem: Google Structured Data Testing Tool reports:
http://schema.org/InStock (The property availability is not recognized by Google for an object of type Product.)
Is this a code issue?
Or am I missing some Schema/Google "wrapper" for the availability property?
Ack. Figured it out. availability has to be inside an Offer:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<h1>
<ul>
<li>
<i class="fa fa-check-square-o">
<link itemprop="availability" href="http://schema.org/InStock">
<span>In Stock</span>
</i>
</li>
</ul>
</h1>
</div>
I'm trying to show my customers where the nearest CivilStructure is (e.g. railway station or airport) to a particular Product sold by an Organsization.
Here is an example of what I mean
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name"> Name of product </h1>
<p itemprop="brand" itemscope itemtype="http://schema.org/Organization"> Name of company selling product </p>
<ul itemscope itemtype="http://schema.org/CivicStructure">
<li itemprop="name">Name of railway station</li>
</ul>
</div>
Product has a property of brand which can then be used to provide information on an Organization selling that product. However, I can't find an itemprop property within Product or Organization to link a CivilStructure to the Organization. Its basically a related location but I'm struggling to understand how to mark it up correctly. Any suggestions please?
Example markup of what I have:
<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id="main" itemprop='mainContentOfPage' itemscope='itemscope' itemtype="http://schema.org/Blog">
<article itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
blah blah blah
</article>
<div>
<aside>
<ul>
<li><article><img/>popular post article</article></li>
<li><article><img/>popular post article</article></li>
</ul>
</aside>
</body>
What should I use for the articles within each list item? I thought of articleSection, but that doesn't make sense because it's not within an article schema. So I'm trying to wrap my around the best way to add Microdata here.
Moving the aside within the article isn't really a viable option either. This is Blogger, so doing that would be tricky, especially on the admin widget-management side of things.
Update (2016): In the meantime Schema.org introduced a property to denote that an item is the main/primary one for a page: mainEntity (see details). So the below answer is somewhat out of date.
If they are also blog posts, you would use BlogPosting, too.
Microdata is not only for the main content of a page. However, the Schema.org vocabulary currently lacks a property to mark an item as the main content item of a page (the property mainContentOfPage is only allowed for WebPage).
By using articleBody for the main BlogPosting, capable consumers should be able to deduce that the other BlogPosting items on the page (which naturally don’t have the articleBody property) are only linked/related posts.
So it could look like:
<div itemscope itemtype="http://schema.org/Blog">
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div itemprop="articleBody">…</div>
</article>
<aside>
<ul>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name">Post 4</span>
</article>
</li>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name">Post 5</span>
</article>
</li>
</ul>
</aside>
</div>
We are developing a new site and I'm keen to implement rich snippets and more descriptive meta data for our products and services pages in the form of Rich Snippets.
My problem is that our products and services cannot be purchased directly from the website as they are bespoke and custom built based upon users requirements. As a result they don't have a price and stock level.
I notice from the Google guidelines that they state:
The product should be available for purchase directly on the page
My question is, what is the best and most appropriate way to use rich snippets to describe these products and services? Can I use rich snippets at all to describe these products and services?
Consider using schema.org/AggregateOffer for Product Rich Snippets. Although main use case for it is marking one product available from different sellers, it seems suitable for you as well. It allows to indicate lowest and highest price - I guess you have some price limits even for bespoke products.
If you have reviews for those products on your site Review Rich Snippets are applicable for you. Use schema.org/Review or schema.org/AggregateRating for this.
Example for both:
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="cute_dress.jpg" />
<span itemprop="name">Very Cute Dress</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>
<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
<span itemprop="lowPrice">$1250</span>
to <span itemprop="highPrice">$1495</span>
</div>
</div>
will give you
Breadcrumbs is another option for you. Use data-vocabulary.org for this purpose since breadcrumbs in schema.org are messy and incomplete.
Example:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
will give you