您如何使用微数据标记FontAwesome的五星级产品评级？

Question

根据Google的说法，有几种方法可以将5星评级标记为搜索结果。

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=172705

这些都不适合使用FontAwesome等图标字体。

星级评定不需要是互动的。

目前我们的代码是：

<div class="rating">
    <meta itemprop="rating" content="4.5" />
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star-half"></i>
    <span class="visually-hidden" >4.5 stars</span>
</div>

跨度从显示中隐藏，但仍可供屏幕阅读器访问。

添加<meta>标签是必要的还是有效的？ Google建议：

通过在导致显示星标的HTML块中包含<meta itemprop="rating" content="4.5" /> ，您可以指示富片段解析器应使用content属性中的值来查找评级。

并有以下示例：

<span class="rating-foreground" style="width:90%"> 
   <meta itemprop="rating" content="4.5" /> 
</span>

Answer 1

据我所知， itemprop =“rating”可以添加到任何元素，所以可以将它移动到你的div。

Answer 2

使用schema.org中的聚合评级项属性，我们到目前为止的最佳选择如下：

<div class="rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star-half"></i>
    <span class="visually-hidden"><span itemprop="ratingValue">4.5</span>/5</span>
</div>

删除<meta>标记但添加并从总计中分离出评级值。

Answer 3

您必须包含itemprop =“votes”才能在搜索结果中显示评分星标

例：

<span class="visually-hidden">
<span itemprop="ratingValue">4.5</span>/5
<span itemprop="votes">10</span>
</span>