Using AggregateRating and ratingValue when the value is an image

Question

I'm trying to add some rich snippets to my site and am struggling a little with the AggregateRating section as the value for my ratingValue is displayed only as an image.

My markup looks like this:

<tr itemprop="reviews" itemscope itemtype="http://schema.org/Review">
    <th>Rating:</th>
    <td itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <img itemprop="ratingValue" class="rating" src="/content/images/ratings/4.5.png" alt="4.5" title="Rating: 4.5 / 5" />
    </td>
</tr>

As far as I'm aware, this is valid HTML as the text value is available as ALT text so meets accessibility guidelines. But, I'm not sure how to mark up this ALT as the value for ratingValue.

Does anyone know what I should be doing here?

Thanks.

---

Okay, after a few hours of mucking around with the Google Rich Snippets Tester, what I've come up with is this:

<tr itemprop="reviews" itemscope itemtype="http://schema.org/Review">
    <th>Rating:</th>
    <td itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <meta itemprop="ratingValue" content="4.5">
        <img class="rating" src="/content/images/ratings/4.5.png" alt="4.5" title="Rating: 4.5 / 5" />
    </td>
</tr>

This seems to be picked up properly.

Answer 1

Your approach is correct. Just add a tag in the appropriate spot and set the value to be the "ratingValue". It wont' be displayed when the page is rendered to the user.

So you'd use this tag: <meta itemprop="ratingValue" content="4.5">

Within the scope of http://schema.org/Review in your doc like you showed in your updat.