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 do I learn what changes my css values?

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How this switch button work by CSS?

    How to get the actual rendered font when it's not defined in CSS?

    CSS/HTML problem in IE - how to fix?

    How to dynamically positioning html table by using css properties?

    How Can I get my DL to style properly?

    How to copy the CSS to another tab in Chrome?

    How to automatically put DIVs in columns (unknown number of DIVs)

    How to load CSS in Django templates?

    CSS - How to hide extra images

    Generated web font doesn't show dots above Ü

    CSS/HTML How to align these elements for a mobile view?

    Using CSS to create custom borders with just the corners showing

    How to create dropdown navigationbar without float?

    How to add a hover transition effect on the navigation?

    How can I invoke an “AktionLink” in an “onClick” event in a “div”?

    Changing opacity for div in div - is this possible? How?

    How to do multiple class selectors in Stylus CSS pre-processor

    How to style focused and visited anchors when scrolling with CSS / jQuery

    How to set border to 0 in this table

    Border-bottom not showing correctly

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to connect CSS files to my JSP pages stored in Web-Content (Dynamic Web Project)

    How to finish my modal ajax code to work correctly?

    How to change/remove CSS classes definitions at runtime?

    Devtools audit shows unwanted/injected css rules

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    CSS\HTML - How to add Ionicons to CSS “content” property?