I'm trying to add Microdata markup (using Schema.org) to a page. At the moment, the code looks like this:
<div itemscope itemtype="http://schema.org/Product">
<div class="primary">
<div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Acme Co</span>
</div>
<h4 itemprop="name">Blue Widget</h4>
</div>
</div>
However, what I want to do is change the h4 from "Blue Widget" to "Acme Co Blue Widget". I already have the company name encapsulated by the Brand type so I don't want to repeat it on the page. Here's what I'm thinking.
Possible solution
<div itemscope itemtype="http://schema.org/Product">
<h4 class="primary">
<span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Acme Co</span>
</span>
<span itemprop="name">Blue Widget</span>
</h4>
</div>
It's not a question of whether the Microdata/Schema.org markup will be valid (I can test that), but will the header be read by browsers as I want it - "Acme Co Blue Widget"? I'm unsure with all the Schema.org stuff going on.
Yes, that’s fine.
The heading elements h1-h6 can contain phrasing content (which includes span). As span elements are meaningless, these h4 are semantically equivalent:
<h4>Foobar</h4>
<h4><span>Fo<span>o</span>bar</span></h4>
The Microdata attributes don’t change the HTML semantics.
An alternative to your solution would be to use the meta element (but there is no need to use this alternative if you are happy with your solution):
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<meta itemprop="name" content="Acme Co" />
</span>
<h4 itemprop="name" class="primary">Acme Co Blue Widget</h4>
</div>
Related
My two divs (article-tag-summary and article-date-summary) belong under article-image-summary div. This is good and cannot change.
Everything belongs under schema.org/Article, thus also <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">.
Issues:
1 - If I close <div class="article-image-summary"
itemprop="image">, then the two divs fall outside the image and
this is bad for my CSS styling.
2 - If I do NOT close it, then
itemprop="articleSection and itemprop="datePublished are NOT
recognised in schema.org because they relate to ImageObject and
NOT schema.org/Article which is also bad.
This is a purely HTML problem... what I need is to have the date-summary and tag-summary fall under image-summary (so NOT closing div before them), and that these two divs have itemprops that relate to schema.org/Article and NOT to ImageObject.
The example below shows the two closing divs before date and tag, meaning the schema.org validation works. But in this case, my CSS styling for these two elements do not work because they fall outside the image-summary div.
<div itemscope itemtype="http://schema.org/Article">
<div itemprop="image" itemscope itemtype=
"http://schema.org/ImageObject">
<div class="article-image-summary" itemprop="image">
<meta content="auto">
<meta content="100"><a href="#"><img alt=
"#" itemprop="url" src=
"#"></a>
</div>
</div>
<div class="article-tag-summary" itemprop="articleSection">
<a href="#>tag</a>
</div><!--<div class="article-data">-->
<div class="article-date-summary" itemprop="datePublished">
date
<div class="page-views">
<i class="fa fa-eye"></i> count
</div>
</div><!--</div>-->
<h2 class="title-article-masonry" itemprop="headline"></h2>
</div>
You might be able to solve this with Microdata’s itemref attribute.
For that to work, you have to move the article-tag-summary and the article-date-summary (and perhaps other properties that follow) outside of the schema:Article element.
Give each property an id, and reference these id values in the itemref attribute ("foo1" and "foo2" in my example):
<div itemscope itemtype="http://schema.org/Article" itemref="foo1 foo2">
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
</div>
</div>
<div id="foo1" class="article-tag-summary" itemprop="articleSection">
</div>
<div id="foo2" class="article-date-summary" itemprop="datePublished">
</div>
If you need a grouping div for all of these parts, you can of course add it. As you use Schema.org’s Article type, the article element is most likely more appropriate than a div.
I'm creating a site about an author. He is the main-topic. On this site his written books are shown, too.
Unfortunately, I can't find a solution to link these books to the main person-element. I tried itemref, but it doesn't work when linking to such 'independent' element, which has no itemprop value (says the Google testing tool). Both following "book"-cases don't work.
<div id="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">Marvin</span>
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Nice Book</span>
<meta itemprop="author" itemref="author" />
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Best Book</span>
<meta itemprop="author" itemscope="" itemtype="http://schema.org/Person" itemref="author" />
</div>
Has anybody another idea?
You have three options.
itemid
As described by #Dharmang. You give the Person a URI (with the itemid attribute) and reference this URI in each Book with the author property.
<div itemscope itemtype="http://schema.org/Person" itemid="#person-1">
</div>
<div itemscope itemtype="http://schema.org/Book">
<link itemprop="author" href="#person-1" />
</div>
<div itemscope itemtype="http://schema.org/Book">
<link itemprop="author" href="#person-1" />
</div>
(This URI can then used by others that also want to say something about this person, or that want to identify that person. So [your-domain]/[your-path]#person-1 is then a URI that represents the actual person, not just a page about that person. If there is already such a URI for that person, you might want to reuse it instead of creating your own.)
Problem: Consumer support might not be the best (but Google’s testing tool seems to recognize it).
itemref
You have to add itemprop="author" to the Person item, and reference its id from each Book with the itemref attribute. You don’t have to add a meta element for this, you simply do it on the element with the itemscope.
<div itemprop="author" itemscope itemtype="http://schema.org/Person" id="author">
</div>
<div itemscope itemtype="http://schema.org/Book" itemref="author">
</div>
<div itemscope itemtype="http://schema.org/Book" itemref="author">
</div>
Problem: The Person item can’t have a parent with itemscope (because its author property would be added to it). So this means, for example, that you can’t use the mainEntity property to denote that the Person is the primary topic of the WebPage.
itemprop-reverse
If you can nest the Book items in the Person item, you could use the itemprop-reverse attribute, which allows you to use properties in the other direction:
<div itemscope itemtype="http://schema.org/Person">
<div itemprop-reverse="author" itemscope itemtype="http://schema.org/Book">
</div>
<div itemprop-reverse="author" itemscope itemtype="http://schema.org/Book">
</div>
</div>
(If you can’t nest, you could still use it with a URI value, but using itemid in that case is probably the better choice.)
Problem: This attribute is not part of the Microdata specification. It’s defined in W3C’s Microdata to RDF Note. So consumer support might be not so good. Google’s testing tool doesn’t seem to recognize it.
You can use link tag to achieve this, check below snippet:
<div itemid="#author-marvin" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name">Marvin</span>
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Nice Book</span>
<link itemprop="author" href="#author-marvin">
</div>
<div itemscope="" itemtype="http://schema.org/Book">
<span itemprop="name">Best Book</span>
<link itemprop="author" href="#author-marvin">
</div>
itemid of author snippet should match the href of link in book snippet throughout the page markup.
More examples here
I have a page that contains multiple Schema.org Events that have identical properties (name, location, description, etc.). I've figured out how to handle location by doing something like this:
<div itemscope itemtype="http://schema.org/Event">
…
<meta itemprop="location" itemscope itemtype="http://schema.org/Place" itemref="venue-place" />
</div>
<span id="venue-place">
<a href="http://www.example.com/" itemprop="url">
<span itemprop="name">Crystal Ballroom</span>
</a>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1332 W Burnside St.</span>
<span itemprop="addressLocality">Portland</span>,
<span itemprop="addressRegion">OR</span>
<span itemprop="postalCode">97209</span>
</span>
</span>
However, I can't figure out how to do this for the Event's description. I've done something like this, which makes an empty description appear in the Event in Google's Structured Data Testing Tool:
<div itemscope itemtype="http://schema.org/Event">
…
<meta itemprop="description" itemscope itemref="event-summary" />
</div>
<div id="event-summary">
This is the description text.
</div>
What am I doing wrong?
The itemref attribute allows you to reference properties (itemprop), and it has to be specified on the item (itemscope) these properties should be added to.
So you have to
move itemref="event-summary" to the Event element, and
move itemprop="description" to the element with the description.
<div itemscope itemtype="http://schema.org/Event" itemref="event-summary">
</div>
<div itemprop="description" id="event-summary">
</div>
You would ideally do this for the location, too, because having a meta element without a content attribute is invalid (but this could be fixed by adding an empty attribute), and because you could save one element that way.
<div itemscope itemtype="http://schema.org/Event" itemref="venue-place event-summary">
</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" id="venue-place">
</div>
<div itemprop="description" id="event-summary">
</div>
(Note that Google’s Structured Data Testing Tool will use the id value of the Place element to display URIs under #id. I think that’s a bug on their end, so don’t let this confuse you. If you want to get rid of it, you could add an itemid attribute in addition to provide a real/actual URI for the place.)
TL;DR --> I want an itemprop nested in one itemscope to actually be applied to a different itemscope. How do I do that?
Here's a a gist of the code I have (I've removed classes and other extraneous elements on the page to focus on what's important):
<!-- CODE I HAD -->
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">79</span>
<h1 itemprop="name">Someproductsoandso</h1>
<span itemprop="reviewCount">830</span>
</div>
</div>
<!-- CODE I NOW HAVE -->
<div itemscope itemtype="http://schema.org/Product" itemref="productMicrodata">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">79</span>
<h1 itemprop="name" id="productMicrodata">Someproductsoandso</h1>
<span itemprop="reviewCount">830</span>
</div>
</div>
Basically, I have a product itemscope with a child aggregateRating. Inside that aggregateRating scope I have things like the "ratingValue" and "reviewCount" that I want attached to that, but there's also a "name" value that I want attached to the Product (not the aggregateRating, which also can have a "name" value).
With the first chunk of code I used, google said that my product was missing a name, because the name was being applied to the aggregateRating; with the 2nd, the name is now being applied to both the aggregateRating and the Product. That's not the worst thing, but I'd like it just attached to the aggregateRating; do you know how to solve this without mucking up the current markup organization?
Assuming you mean you want it only attached to the Product, as per your penultimate paragraph, and not only attached the aggregateRating as per per your last paragraph, then the best I can come up is
<div itemscope itemtype="http://schema.org/Product" itemref="productMicrodata">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">79</span>
<h1 itemscope><span itemprop="name" id="productMicrodata">Someproductsoandso</span></h1>
<span itemprop="reviewCount">830</span>
</div>
</div>
The itemscope on the h1 hides the h1's children from the aggregateRating item, so the name property will only be attached to the Product item via the productMicrodata itemref. It does however, create a third item which has no type.
I'm adding the schema.org Microdata to my website.
My HTML code is like this:
<div itemscope itemtype="http://schema.org/Organization">
<span class="title">Name of the organization</span>
ABC Company
</div>
Since the itemprop "url" and "name" of the Organization are all in the anchor tag. How can I indicate the both "url" and "name" itemprop on the same tag? Must I add extra span tag for this purpose?
I have tried searching some coding examples on this but cannot find any example to show the use of multiple itemprop on the same tag.
At the end, I want to have Microdata like this:
url="http://www.ABCCompany.com", name="ABC Company"
You have to do it by nesting two elements. For example, you can nest a <span> inside the <a> and put the itemprop="name" on that:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.ABCCompany.com/">
<span itemprop="name">ABC Company</span>
</a>
</div>
I find this site handy for testing such things.
There may be a problem with google. The "rich snippets testing tool" indicates that when you mark an anchor tag as a url, the body of the tag is used as value rather than the href attribute. But nobody wants to display the url inside an anchor tag.
This also works and may look a bit easier to maintain:
<div itemscope itemtype="http://schema.org/Organization">
<span class="title" itemprop="name"><a itemprop="url" href="http://www.ABCCompany.com/">ABC Company</span></a>
</div>
Google's support for schema.org and the google structured data tester have improved considerably since the original question was posted. The code above validates correctly in it.
The OP's original code now seems to work ok. As shown here:
https://search.google.com/structured-data/testing-tool#url=http%3A%2F%2Fmercedes-benzhanoi.com.vn%2Fmercedes-ha-noi.auto%2Fgla-250-4matic.html
<div itemscope="" itemtype="http://schema.org/Organization">
<span class="title" itemprop="name">
<a itemprop="url" href="http://mercedes-benzhanoi.com.vn/mercedes-ha-noi.auto/gla-250-4matic.html">GLA 250 4MATIC</a></span>
</div>