The website of an organization, say "Sun Industries", would like to add a list of employees. The address and contact information of the organization is already present at the webpage, but the list of employees would be somewhere else.
So we have
<div id="organization" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Sun Industries</span>,
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Technologies Street 42</span>,
<span itemprop="addressLocality">Venustown</span>
<span itemprop="postalCode">98765</span>
</span>
</span>
</div>
and later on in the HTML5 code we will have
<div id="employee-1" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
</div>
How do we link the two objects "organization" and "employee-1" together?
I tried to add the following child to the "employee-1" object
<meta itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" itemref="organization">
but that did not work (at least not in Google's Structured Data Testing Tool).
How can I use the microdata property itemref correctly in this case?
Just to be clear, I also tried the following:
Add itemprop="worksFor" to the "organization" object.
Add itemref="organization" to the "employee" object.
So
<div id="organization" itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Sun Industries</span>,
...
</div>
...
<div id="employee-1" itemscope itemtype="http://schema.org/Person" itemref="organization">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
</div>
but that gave me a Warning: Page contains property "worksfor" which is not part of the schema. for the "organization" object.
Well, actually your last code snippet looks fine.
Maybe with Yandex Validator the output will be more clear
person
itemType = http://schema.org/Person
worksfor
organization
itemType = http://schema.org/Organization
name = Sun Industries
name = John Doe
jobtitle = Sales Manager
Couple of other working examples.
<body>
<div id="organization" itemscope itemtype="http://schema.org/Organization" itemref="employee-1">
<span itemprop="name">Sun Industries</span>,
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Technologies Street 42</span>,
<span itemprop="addressLocality">Venustown</span>
<span itemprop="postalCode">98765</span>
</span>
</span>
</div>
<div id="employee-1" itemprop="employee" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
</div>
</body>
Gives the following:
organization
itemType = http://schema.org/Organization
employee
person
itemType = http://schema.org/Person
name = John Doe
jobtitle = Sales Manager
name = Sun Industries
location
place
itemType = http://schema.org/Place
address
postaladdress
itemType = http://schema.org/PostalAddress
streetaddress = Technologies Street 42
addresslocality = Venustown
postalcode = 98765
Or this
<body>
<div id="employee-1" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
<meta itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" itemref="organization">
</div>
<div id="organization">
<span itemprop="name">Sun Industries</span>,
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Technologies Street 42</span>,
<span itemprop="addressLocality">Venustown</span>
<span itemprop="postalCode">98765</span>
</span>
</span>
</div>
</body>
That results in
person
itemType = http://schema.org/Person
name = John Doe
jobtitle = Sales Manager
worksfor
organization
itemType = http://schema.org/Organization
name = Sun Industries
location
place
itemType = http://schema.org/Place
address
postaladdress
itemType = http://schema.org/PostalAddress
streetaddress = Technologies Street 42
addresslocality = Venustown
postalcode = 98765
Spec is not very clear about using itemref but example helps
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
<p>Band: <span itemprop="name">Jazz Band</span></p>
<p>Size: <span itemprop="size">12</span> players</p>
</div>
Your last example is correct.
(Google’s testing tool no longer gives the mentioned error. Back then they were probably not up to date with new additions to the Schema.org vocabulary.)
Specification
Links to the itemref specifications:
W3C’s Microdata (Note): itemref
WHATWG’s HTML (Living Standard): Microdata: itemref
tl;dr:
You specify itemref on the element (with itemscope) to which you want to add properties.
You specify id on the element (with itemprop) which you want to add.
Examples
A minimal example:
<div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" id="org">
<!-- this property (worksFor) gets added to the Person item below -->
</div>
<div itemscope itemtype="http://schema.org/Person" itemref="org">
<!-- looks for the element with the ID "org" -->
</div>
This is equivalent to:
<div itemscope itemtype="http://schema.org/Person">
<div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
</div>
</div>
Other examples:
adding meta elements from the head
adding the property specified on the body element to elements that are children of that body
adding an Event to an Action
adding a name property from a child item to the parent item
add a property that is a child of an Offer item to the parent Product item instead of the Offer
adding breadcrumb to WebPage
adding the Hotel as a branchOf an Organization
adding several related products to a Product
adding the Product to an Offer
two examples of relating Event items: either via superEvent or via subEvent
To keep in mind
The itemref attribute can only be used for elements in the same document.
You can reference multiple elements from one itemref attribute (separate the ID tokens with space characters).
The referenced element may be a container for multiple properties.
You have to make sure that the referenced elements are not children of an element with itemscope, otherwise their properties will also be added to this item (but you can circumvent this by adding a dummy itemscope).
There are 2 ways to links schema data together.
itemid: Link 2 complete objects (ie Organisation & Person)
itemref: Link 1 complete object to 1 incomplete object (ie Article & Comments)
1st one is easy. All you do is add the itemid property onto item you wish to link and add a link on other item:
<div itemid='#org' itemscope itemType='http://schema.org/Organization'>
<!-- ..... -->
</div>
<article itemscope itemType='http://schema.org/Article'>
<link itemprop='publisher' href='#org'>
</article>
Second one is not so easy. What if the comments for your blog post are somewhere far away. How do you connect them to your blog post? You can create an empty item with an id and then connect it to your blog post like so:
<div id="comments" itemscope>
<span itemprop="commentCount">0</span>
</div>
<div id="words" itemscope>
<span itemprop="wordCount">0</span>
</div>
We don't need to give comments an itemType. All we need is to add itemscope. This way we get no validation errors. Now we can link the comments back to blog post like so:
<div itemscope itemtype="http://schema.org/BlogPosting" itemref="comments words">
<!-- .... -->
</div>
Tada! We even managed to import wordCount as well.
Related
I want to access the environment properties:
<h1 th:text="${#environment.getProperty('site.name1')}">
<span th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
but I don't get anything for site.name2 even it exists in application.property file
here my application.properties file:
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.h2.console.settings.trace=false
spring.h2.console.settings.web-allow-others=false
site.name1=plats
site.name2=bruts
spring.messages.encoding=UTF-8
spring.thymeleaf.encoding=UTF-8
spring.servlet.multipart.max-file-size=1000MB
spring.servlet.multipart.max-request-size=1000MB
spring.servlet.multipart.enabled=true
server.port=8080
This is how it looks using:
<h1>Plats
<span class="muellerhoff">Bruts</span>
</h1>
and with:
<h1>
<span th:text="${#environment.getProperty('site.name1')}"></span>
<br/>
<span class="muellerhoff" th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
The end goal is HTML as follows:
<h1>Plats
<span class="muellerhoff">Bruts</span>
</h1>
You can use <th:block> in this case, to handle the name1 value. The block tag will not appear in the final HTML.
<h1>
<th:block th:text="${#environment.getProperty('site.name1')}"></th:block>
<span class="muellerhoff" th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
More info about the th:block tag can be found here.
I have a product which has reduced price. I want to show both prices - original and discounted. Is there a way to mark this in Schema.org?
For now I have something similar:
<ul class="productPriceList" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<li class="productPriceList">
<div class="price red"><span class="" itemprop="price">4302</span> <span itemprop="priceCurrency" content="USD">$</span></div>
<span class="price crossOut" itemprop="price">26890</span> <span itemprop="priceCurrency" content="USD">$</span> <span class="product-promo">84</span>% off
</li>
</ul>
This shows as:
offers
#type: Offer
price: 4302
priceCurrency: USD
price: 26890
priceCurrency: USD
Your current markup doesn’t convey which price is the old/new one. You shouldn’t use that.
You could use two PriceSpecification items instead (as value for the priceSpecification property). With validFrom and validThrough you can specify the dates when the old price was valid and since when the new price is valid.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="priceSpecification" itemscope itemtype="PriceSpecification">
<s>$ <span itemprop="price">26890</span></s>
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="validThrough" content="…" />
</div>
<div itemprop="priceSpecification" itemscope itemtype="PriceSpecification">
$ <span itemprop="price">4302</span>
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="validFrom" content="…" />
</div>
</div>
(Note that the span element can’t have a content attribute in Microdata. I replaced it with a meta element.)
I'm trying to do the right mikrodaty layout for the site. Do I understand how to act . For example I go to https://schema.org/Organization and go through the list to the bottom . Opt for each tag (name, adress, streetAddress and so on ) . If possible, I need to fill out all the tags , am I right?Now I got something like this:
<div itemscope itemtype="http://schema.org/Organization">
<div class="historyb" id="historyb">
<span class="historyh2" itemprop="name">MyName</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">
Street & number of house
</span>
<span itemprop="addressLocality">City</span>,
<span itemprop="postalCode">111111</span>
</div>
<a href="mailto:MyEmail#gmail.com" itemprop="email">
MyEmail#gmail.com
</a>
<span itemprop="foundingDate">Date</span>
<span itemprop="foundingLocation">City</span>
<span itemprop="legalName">Full Name</span>
<a itemprop="url" href="#"><img itemprop="logo" src="http://www.mysite.ru/images/logo.png" /></a>
</div>
This is valid according to Google's test tool but you might want to include addressCountry and addressRegion for https://schema.org/Place
I'm using schema.org definition to represent a product.
I have a doubt about product size: should I specify the unit of measure in the field?
Here's my code (I need a separate span for "cm" to style it differently):
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product name</h1>
Size:
<span itemprop="width">60 <span>cm</span></span>
<span itemprop="height">50 <span>cm</span></span>
<span itemprop="depth">40 <span>cm</span></span>
</div>
Is this the correct way to define the size?
The width/depth/height properties expect Distance or QuantitativeValue as value.
If you want to use Distance:
As the Distance type does not seem to define a suitable property to provide the actual value, and its description says that values have
[…] the form '<Number> <Length unit of measure>'. E.g., '7 ft'.
I assume that the type should not be provided explicitly, e.g.:
<span itemprop="width">
60 <span>cm</span>
</span>
If the type should be provided, I guess using name is the only option:
<span itemprop="width" itemscope itemtype="http://schema.org/Distance">
<span itemprop="name">60 <span>cm</span></span>
</span>
If you want to use QuantitativeValue:
<span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">60</span>
<span>cm</span>
<meta itemprop="unitCode" content="CMT" />
</span>
Instead of specifying the UN/CEFACT code for "cm" (= CMT) in a meta element (which is allowed in the body, if you use it for Microdata), you could also use the data element:
<span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">60</span>
<data itemprop="unitCode" value="CMT">cm</data>
</span>
I have the following problem. I have add the microdata schema to my page but I want hidden.
Anyone have an idea?
The code that I've use is the following:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="http://www.example.net/"><div itemprop="name"><strong>Audiosky Mobile Development</strong></div>
</a>
<div itemprop="description">Description/div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Los Angeles</span><br>
<span itemprop="addressRegion">California</span><br>
<span itemprop="postalCode"></span><br>
<span itemprop="addressCountry">USA</span><br>
</div>
</div>
If you want to hide your markup you may use meta tags.
Like in example from schema.org Getting Started page
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg">
**<meta itemprop="ratingValue" content="4">**
**<meta itemprop="bestRating" content="5">**
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
For invisible links use tag link like in example.
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
**<link itemprop="availability" href="http://schema.org/InStock">**Available today!
</div>
However don't overuse hidden text as Search Engines may judge it somewhat spammy. In your case I advise to put markup in address block at your main or contact page and hide only few tags.
better than css hide or meta & link tags, use JSON+LD
example from https://schema.org/LocalBusiness
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "LocalBusiness",
"address": {
"#type": "PostalAddress",
"addressLocality": "Mexico Beach",
"addressRegion": "FL",
"streetAddress": "3102 Highway 98"
},
"description": "A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.",
"name": "Beachwalk Beachwear & Giftware",
"telephone": "850-648-4200"
}
</script>
You can also try this to hide it from user. It working fine for me.
<address style="display: none;">
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg">
**<meta itemprop="ratingValue" content="4">**
**<meta itemprop="bestRating" content="5">**
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
</address>