1

This is my HTML code for a review on a user. The documentation for rating says you have to mark up a number like: <span itemprop="reviewRating">5</span>. However, I only use stars and not a number so that is not applicable in my HTML.

<div class="review-card text-center" itemprop="review" itemscope itemtype="http://schema.org/Review">
<img src="https://graph.facebook.com/482469078777667/picture?type=square" alt="" class="profile-img">
<div class="review-author">
<span class="ra-author" itemprop="author">Snehah Lama</span>
<ul class="rating-star">                                                                
<li><i class="material-icons">★</i></li>
<li><i class="material-icons">★</i></li>                   
<li><i class="material-icons">★</i></li>
<li><i class="material-icons">☆</i></li>
<li><i class="material-icons">☆</i></li>              
</ul>
</div>
<div class="review-content">
<p class="content-inner" itemprop="description">Lorem ipsum dolor....</p>
</div>
</div>

Do I have change my whole HTML structure to accommodate a number that can be annotated, or is there another way to accomplish it?

2

If you don’t want to display a structured data value on the page, you can use the meta element (if the value is a URL, you have to use the link element instead).

That said, if you have a Review, specifying an integer as value for reviewRating is not expected. The property expects a Rating value, which can have the ratingValue property.

With showing the value, the markup could look like this:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue">3</span>/5
  </div>
</div>

Without showing the value, the markup could look like this:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <meta itemprop="ratingValue" content="3">
    <span>★★★☆☆</span>  <!-- note that this is likely not accessible, the 'meter' element might be better -->
  </div>
</div>

With the meter element, the actual value (which gets used by Microdata) is hidden anyway:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <meter itemprop="ratingValue" value="3" min="0" max="5">★★★☆☆</meter>
  </div>
</div>

But Google’s SDTT doesn’t seem to work correctly: they use the meter element’s content instead of the content of the value attribute (which is required by the Microdata spec). Adding a content attribute with the same value fixes this in the SDTT.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.