How to index star rating in google?


Tags: html,css,seo,google-webmaster-tools,google-crawlers

Problem :

So here is the HTML markup that I have on my site and it displays star rating with the help of some css.

Now I have read this entire google document but I am still not able to understand how to change my markup. I am not willing to make changes in css and I don't have that much data available with me so that can create markup as per microdata/RDF as mentioned in google docs.

What is the minimum change that I can make so that google understands aggregate rating for the item?

<div class="store__rating">
   <meta content="5" itemprop="rating">
   <div class="rateStars"><span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="reviewCount">
      2Reviews
      </span>
   </div>
</div>

enter image description here



Solution :

I ended up doing like this, here is the testing tool, just paste the HTML and validate

<div class="store__rating" typeof="v:Review-aggregate" xmlns:v="http://rdf.data-vocabulary.org/#">
   <span rel="v:rating">
       <span typeof="v:Rating">
         <span content="5" property="v:average"></span>
         <span content="5" property="v:best"></span>
       </span>
   </span>
   <span content="2" property="v:count"></span>
   <div class="rateStars"><span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="filled_green"><i class="icon-star"></i></span>
      <span class="reviewCount">
      2 Reviews
      </span>
   </div>
</div>

    CSS Howto..

    How to change the colors of HTML form elements displayed in UIWebView?

    How do I spilt the footer into different widths?

    How can I write more efficient CSS for the max-width

    How to get full height of webpage with CSS?

    How to ensure each DIV appears on it's own without overlapping

    How to set
  • Backgound color?
  • How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    How can I get my rows 100% wide?

    Pure JavaScript - how to add class to a class? Or change style in class

    Understanding how menus work in html5 and css3

    How do you set the scroll bar skin on a single List instance?

    How to add a color in the
    bottom content area?

    How to change img style inside span in CSS?

    How is Bootstrap's `nav` class making anchors move to their own line

    Jquery - How to set mouseleave event to an after() generating div?

    How to reverse a jQuery animation back to original CSS properties

    How to add html code into html?

    How to correctly apply the .clearfix:after class to HTML?

    How do I center the contents in this div?

    How to use a full width image as border between content and footer

    Javascript: Hover over Issues & How can I structure the html efficiently?

    How do I vertically center an image whose size can change in a div?

    Getting the title of a picture overlayed onto the picture of a slideshow

    How to make a wavy border line to separate background images in html5/css?

    how to add style to form under echo statement by css [closed]

    how to fix this horizontal list on Chrome and Opera?

    How to make the Draggable element to get visible on top of all the element in the screen while dragging?

    How can I properly add CSS and JavaScript to an HTML document?

    How do I line up CSS elements? Is there a tool I can use?

    How do I tell what are the ids and classes of a rail html.erb component?