I'm doing up a testimonials page and recently I have been utilising structured data to help SE's find the reviews more easily; as per the review information found.
Now, normally if I was doing one review I would do something like this:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Service">
<span itemprop="provider">Business Name</span>
<span itemprop="serviceType">Service Provided</span>
<span itemprop="url">http://www.example.com/</span>
</div>
<div class="review" itemprop="reviewBody">Great service - thanks!</div>
<div class="other">
<p class="name" itemprop="author">Joey Bigs</p>
<p class="details">Owner, Joes Treats</p>
</div>
</div>
Now, what if I wanted to do a page that had several reviews for the same thing; do I need to repeat the below information for each review or can I just display it once?
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Service">
<span itemprop="provider">Business Name</span>
<span itemprop="serviceType">Service Provided</span>
<span itemprop="url">http://www.example.com/</span>
</div>
If I only need to include it once - how do I go about doing this?
You can use Microdata’s itemref attribute to reference the item that gets reviewed, so you don’t have to repeat it for each review:
<div id="foo" itemprop="itemReviewed" itemscope itemtype="http://schema.org/Service">
<!-- make sure that this element is not a child of another itemscope -->
</div>
<div itemscope itemtype="http://schema.org/Review" itemref="foo"></div>
<div itemscope itemtype="http://schema.org/Review" itemref="foo"></div>
<div itemscope itemtype="http://schema.org/Review" itemref="foo"></div>
Related
For some years I'm using on products pages the hreview microformat for product's reviews. Accordingly, to Google's Structured data testing tool, everything is fine with the hreview but I got some warnings for the Product and among those warnings, I got one for the "review" section. I want to get rid of that warning. I'm using schema.org microdata for the product page and I tried to add the schema.org "Review" item type for the reviews, along with the hreview.
So my question is: is there a problem or a bad practice to combine hreview with review microdata from schema.org?
I created an example of my review section:
<div class="hreview review-wrapper" itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="hidden item">
<a class="url fn" href="product.com">
<img src="/images/product.jpg" alt="umbrella" class="photo" />
</a>
</div>
<div class="vcard reviewer">
<div class="author">
Review added by: <span class="fn" itemprop="author">John Doe</span>
</div>
<div class="adr">
<div class="locality"><span>from Paris</span></div>
</div>
</div>
<div class="rating" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">5</span>
</div>
<div class="write-date">
Written on <abbr class="dtreviewed">15th february 2019</abbr>
<meta itemprop="datePublished" content="2019-02-15">
</div>
<div class="review-content">
<div class="description">
<p>
<span itemprop="description">This is the best umbrella ever</span>
</p>
</div>
</div>
</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.)
I am having an issue getting a publisher logo and blog post image to validate using Google's Structured Data Testing Tool.
Some sample markup of what I currently have is:
<article class="post" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
<div class="preview">
<h2 itemprop="mainEntityOfPage headline">Improving the Patient Experience through the Revenue Cycle Part 1</h2>
<div class="meta">
<span itemprop="datePublished" class="published-date">Friday, February 19, 2016</span>
<span class="sep">|</span>
<span itemprop="author" class="author"><a title="Posts by Laurie Shoaf" href="/blog/?author=Laurie+Shoaf">Laurie Shoaf</a></span>
<span class="sep">|</span>
<span class="category"><a title="Posts in Revenue Cycle Management" href="/blog/?category=Revenue+Cycle+Management">Revenue Cycle Management</a></span>
<span class="sep">|</span>
<span class="comments"><a title="Improving the Patient Experience through the Revenue Cycle Part 1 Comments" href="/blog/improving-the-patient-experience-through-the-revenue-cycle-part-1#comments">Comments<span class="hide" itemprop="discussionUrl">/blog/improving-the-patient-experience-through-the-revenue-cycle-part-1#comments</span></a></span>
</div>
<p itemprop="description" class="snippet">This three part series will focus on strategies to augment revenue cycle operations in order to improve the patient experience. In the coming weeks we will share methods designed to enhance patient communications and ideas for maximizing performance when using an early-out or extended business offic...</p>
<a itemprop="url" class="btn blue" href="/blog/improving-the-patient-experience-through-the-revenue-cycle-part-1">Continue Reading »</a>
<span class="hide" itemscope="" itemprop="publisher" itemtype="http://schema.org/Organization"><span itemprop="name">CCi</span><img itemprop="logo" src="/media/cci-small.png" alt="CCi Logo" title="CCi | Power on the Inside" /></span>
<span class="hide" itemprop="dateModified">2/19/2016</span>
<img itemprop="image" src="/media/blog featured/blog-post.png" class="hide" alt="Blog Post Graphic" title="Improving the Patient Experience through the Revenue Cycle Part 1" />
</div>
</article>
The errors I am receiving on the testing side are:
publisher -> logo : The attribute itemtype has an invalid value.
image: A value for the image field is required.
What is the proper way to nest these properties in a "blogPost" schema to pass validation?
In both cases, Google wants to see an ImageObject item (for displaying their Article Rich Snippet).
<div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
<!-- … -->
</div>
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<!-- … -->
</div>
So, I have the code below which works fine when entered into Google's Rich Snippet Testing Tool. The problem is that I don't need the Venue Name linked to any url. However, when I take out the a tag and simplify that line to just <span itemprop="name">Venue Name</span>, the test tool tells me that the page doesn't contain any rich snippet markup. Furthermore, it gives off a warning like this:
Warning: Event urls are pointing to a different domain than the base url.
Is there a way to not have the name of the venue linked to anything?
Basically, I just want the result to look like this (with only the 'buy tickets' part linked):
Feb 2 — Phoenix, AZ - Crescent Ballroom - Buy tickets
I have uploaded the html file that I am testing with and entering into the test tool here.
<div itemscope itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">Name</h1>
<div itemprop="events" itemscope itemtype="http://schema.org/Event">
<meta itemprop="startDate" content="2012-02-02">Date —
<span itemprop="location">City, State</span> -
<a href="/tour" itemprop="url">
<span itemprop="name">Venue Name</span>
</a> -
Buy tickets
</div>
</div>
2/16 - updated code
<div itemscope itemtype="http://schema.org/MusicEvent">
<h1 itemprop="name">Name</h1>
<div itemprop="events" itemscope itemtype="http://schema.org/Event">
<meta itemprop="startDate" content="2012-02-02">Date —
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">City</span>,
<span itemprop="addressRegion">State</span>
</span>-
<span itemprop="name">Venue Name</span> -
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Buy tickets
</div>
</span>
</div>
</div>
2/17 - updated code
<div itemscope itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">Name</h1>
<div itemprop="events" itemscope itemtype="http://schema.org/MusicEvent">
<meta itemprop="startDate" content="2012-02-02">Date —
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">City</span>,
<span itemprop="addressRegion">State</span>
</span>-
<span itemprop="name">Venue Name</span> -
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Buy tickets
</div>
</span>
</div>
</div>
2/17 - new updated code
<div itemscope itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">Name</h1>
<div itemprop="events" itemscope itemtype="http://schema.org/MusicEvent">
<meta itemprop="startDate" content="2012-02-02">Date —
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">City</span>,
<span itemprop="addressRegion">State</span>
</span>-
<span itemprop="name">Venue Name</span> -
</span>
<div itemprop="offers">
Buy tickets
</div>
</div>
</div>
There a few things I am noticing here.
Unless, I misunderstand, this is a music event, so you should probably use the more specific itemtype="http://schema.org/MusicEvent".
The "location" itemprop also needs to be an itemtype of http://schema.org/Place or http://schema.org/PostalAddress. This will also solve your name itemprop issue. So for example:
<span itemprop="location" itemscope itemtype="http://schema.org/Place>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress>
<span itemprop="addressLocality">City</span>,
<span itemprop="addressRegion">State</span>
</span>
<span itemprop="name">Venue Name</span>
</span>
See my next point on why I left out the url itemprop.
The offers property is another itemtype, so you'll want something like this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer>
Presale tickets
</div>
However, I'm not entirely sure that you can have a link to another domain in a url itemprop. This is undocumented but I've yet to see an example of one that does. You may need to leave out the offer itemprop and just let Google bring in ticket information from ticketlink themselves.
Please see my answer to your other question about how these rich snippet links you're trying to reproduce are actually being populated in search results.
UPDATE: Here is the final code snippet that passes the Testing Tool
<div itemscope itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">Name</h1>
<div itemprop="events" itemscope itemtype="http://schema.org/MusicEvent">
<meta itemprop="startDate" content="2012-02-02">Date —
<span itemprop="name">Event Name</span>
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">City</span>,
<span itemprop="addressRegion">State</span>
</span>-
<span itemprop="name">Venue Name</span> -
</span>
Buy tickets
</div>
</div>
I had the same problem as you. The formatting looks okay to me; however, it appears that Google is somehow "flagging" event listings where the URL is different from the domain the page is hosted on. I just noticed this problem in a site I manage as well.
I have contacted Google about this to see what the problem is. In the exceedingly unlikely chance that an actual human replies to my query, I will update my answer here with more information.