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

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-->

Related

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>

Using schema.org branchOf with itemref

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>

schema.org with data scattered over page

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.

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