Rich snippets: avaliações em resenhas

<strong>Novo!</strong> schema.orgpermite que você marque uma gama muito maior de tipos de itens em suas páginas, usando um vocabulário que o Google, a Microsoft e o Yahoo! conseguem entender. <a href="answer.py?answer=80472">Saiba mais.</a> O Google ainda oferece suporte para sua marcação de rich snippets existente.

Existem diversas formas de incluir avaliações nas resenhas.

A forma mais comum é incluir a avaliação escrita como um número diretamente no HTML, como este exemplo de microformatos:

 
Avaliação: <span class="rating">4,5</span> 

Independentemente de como você transmitiu as informações de avaliação na sua página—por exemplo, usando strings numéricas, porcentagens, imagens ou sprites—você pode transmitir essas informações ao Google usando microdados, marcação RDFa ou microformatos. A menos que você indique de outra forma, o Google presume que você está usando uma escala de avaliação de 1 (worst) a 5 (best), conforme o código acima. Este artigo descreve como marcar diversas informações de avaliação. Dica: Não adicione um bloco de texto oculto separado para especificar a avaliação. Conteúdo oculto não será exibido.

Como usar imagens (estrelas) para indicar avaliações

Esta seção descreve como você pode marcar as suas informações de avaliação para usar imagens (por exemplo, uma imagem de quatro estrelas) de modo a indicar informações de classificação.

Microdados

Se você usar uma imagem (por exemplo, uma imagem de quatro estrelas) para exibir avaliações, adicione itemprop="rating" à tag img. O Google pode extrair a avaliação do texto alt.

 
<img itemprop="rating" src="four_star_rating.gif" alt="Avaliação de 4 estrelas: Recomendado" /> 

Em alguns casos, quando sprites de imagem e Javascript e/ou CSS são usados para processar a imagem, talvez não seja possível incluir a avaliação no texto alt. Digamos que a seguinte linha use sprites de imagem e CSS para exibir uma imagem de 4,5 estrelas:

 
<span class="rating-foreground" style="width:90%" /> 

Se você usa este método para exibir avaliações, veja como você deve usar os microdados para marcar o bloco de HTML que será processado como uma imagem.

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

Ao incluir <meta itemprop="rating" content="4.5" /> no bloco de HTML que faz com que as estrelas sejam exibidas, você indica que o analisador de rich snippets deve usar o valor no atributo content para encontrar a avaliação.

Microformatos

Se você usar uma imagem (por exemplo, uma imagem de quatro estrelas) para exibir avaliações, adicione class="rating" à tag img. O Google pode extrair a avaliação do texto alt.

 
<img class="rating" src="four_star_rating.gif" alt="Avaliação de 4 estrelas: Recomendado" /> 

Em alguns casos, quando sprites de imagem e Javascript e/ou CSS são usados para processar a imagem, talvez não seja possível incluir a avaliação no texto alt. Digamos que a seguinte linha use sprites de imagem e CSS para exibir uma imagem de 4,5 estrelas:

 
<span class="rating-foreground" style="width:90%" /> 

Se você usa este método para exibir avaliações, veja como você deve usar o padrão de classe de valor dos microformatos para marcar o bloco de HTML que será processado como uma imagem.

<span class="rating-foreground rating" style="width:90%"> 
    
   <span class="value-title" title="4,5" /> 
 
</span> 

Ao incluir <span class="value-title" title="4,5" /> dentro do bloco nomeado class="rating", você indica que o analisador de rich snippets deve usar o valor no atributo title para encontrar a avaliação.

RDFa

Se você usa uma imagem (por exemplo, uma imagem de quatro estrelas) para exibir avaliações, adicione property="v:rating" à tag img e especifique a avaliação com o atributo content, da seguinte maneira:

 
<img property="v:rating" src="four_star_rating.gif" content="4" /> 

Há muitas maneiras de marcar informações de avaliação nas suas páginas web. Independentemente da forma que você usar, use o atributo content para especificar a avaliação em si.

Digamos que a seguinte linha use sprites de imagem e CSS para exibir uma imagem de 4,5 estrelas.

 
<span class="rating-foreground" style="width:90%" /> 

Aqui está com a avaliação especificada pelo atributo content:

 
<span class="rating-foreground" style="width:90%" property="v:rating" content="4,5" /> 

Avaliações que não usam uma escala de 5 pontos

Por padrão, o Google presume que o seu site usa uma escala de 5 pontos, na qual 5 é a melhor avaliação possível e 1 é a pior.

Muitos sites de resenhas mostram avaliações em uma escala diferente, por exemplo, uma avaliação que varia de 1 a 10 pontos ou de 0 a 100%. Esta seção descreve como você pode marcar as suas informações de avaliação se usar uma escala diferente.

Microdados

Como marcar uma única resenha

Para avaliações simples em uma escala de 5 pontos, a propriedade rating pode ser usada para indicar a avaliação. Veja um exemplo de trecho de texto sem qualquer marcação:

 
Resenha do jogo "Blast 'Em Up" 
 
Avaliação: 3,5 de 5 

Este é o mesmo conteúdo HTML marcado usando microdados:

 
<span itemscope itemtype="http://data-vocabulary.org/Review"> 
    
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   Avaliação: <span itemprop="rating">3,5</span> de 5 
 
</span> 

Agora, vejamos um exemplo de uma avaliação em uma escala de 10 pontos. Neste caso, o objetivo é transmitir não só a avaliação real, mas também a escala de avaliação em que ela foi baseada.

 
Resenha do jogo Blast 'Em Up 
 
Avaliação: 7 de 10 

Veja o mesmo conteúdo com marcação de microdados:

 
<span itemscope itemtype="http://data-vocabulary.org/Review"> 
     
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
      
         Avaliação:
         <span itemprop="value">7</span> de 
          
         <span itemprop="best">10</span> 
     
    </span>
</span> 

Neste caso, a propriedade rating consiste em outro item, como indicado pelo itemscope. O atributo itemtype indica que o item aninhado é uma avaliação: itemtype="http://data-vocabulary.org/Rating".

Como marcar uma resenha agregada

Para sites com resenhas agregadas (a avaliação tem base na média de um conjunto de resenhas em vez de em uma única resenha), o processo é parecido com o caso de resenha única. Veja um exemplo de trecho de texto sem qualquer marcação:

 
Resenha de Blast 'Em Up
 
Avaliação: 88 de 100 
 
com base em 35 resenhas. 

Veja o mesmo texto com marcação de microdados:

 
<span itemscope itemtype="http://data-vocabulary.org/Review-aggregate">  
     
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
            
         Avaliação: 
         <span itemprop="average">88</span> de
         
         <span itemprop="best">100</span> 
    
   </span>
   com base em
   <span itemprop="count">35</span> resenhas.

</span> 

Assim como no caso de resenha única, best indica a melhor avaliação possível. Nesse caso, uma avaliação média é especificada, portanto se usa average em vez de value para marcar a avaliação em si.

Como marcar uma única resenha quando não há a melhor pontuação

Veja um exemplo de trecho de texto sem qualquer marcação:

 
Resenha de Blast 'Em Up
 
Pontuação: 9,0 — Excelente 

Nesse caso, a melhor pontuação possível é 10, mas isso não está escrito na página. As pessoas veem essa mensagem e intuitivamente percebem que a pontuação está em uma escala de 10 pontos. Neste caso, você pode adicionar os dados relevantes usando a tag meta:

 
<span itemscope itemtype="http://data-vocabulary.org/Review"> 
     
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
            
         Avaliação:  
         <span itemprop="value">9,0</span> 
          
         <meta itemprop="best" content="10"/>—Excelente 
     
    </span> 
</span> 

O atributo content na tag meta permite que você forneça informações que não estão explicitamente escritas na página. Geralmente, o Google não exibirá conteúdo que não esteja visível para o usuário final, mas quando a melhor e a pior avaliação não estiverem presentes na página, usar meta com best ou worst é permitido.

Como marcar uma resenha agregada quando não há uma melhor pontuação

Este exemplo final mostra como marcar informações de resenhas agregadas que não estejam em uma escala de 5 pontos quando as melhores/piores pontuações possíveis não estiverem explicitamente escritas na página. O objetivo é exibir não só a avaliação média, mas também a escala em que ela foi baseada.

Veja um exemplo de trecho de texto sem qualquer marcação:

 
Resenha de Blast 'Em Up
 
Nota média: 9 
4 resenhas 

Veja o mesmo conteúdo HTML marcado com microdados:

 
<span itemscope itemtype="http://data-vocabulary.org/Review-aggregate">  
     
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
          
      Classificação média:
      <span itemprop="average">9</span>
       
      <meta itemprop="best" content="10"/>  
        
      <meta itemprop="worst" content="1"/> 
    
   </span>
   <span itemprop="count">4</span> Resenhas 
 
</span> 
Microformatos

Como marcar uma única resenha

Você pode usar as subpropriedades best e worst de rating (que é, por sua vez, uma propriedade de hReview) para marcar o seu conteúdo. Veja um exemplo de trecho de texto sem qualquer marcação:

Blast 'Em Up—Resenha do jogo
 
Avaliação: 7 de 10 

Este é o mesmo conteúdo HTML marcado com o microformato hReview:

 
<span class="hreview"> 
    
   <span class="item">
      
      <span class="fn">Blast 'Em Up</span>
   
   </span>—Resenha do jogo
    
   <span class="rating"> 
       
      Avaliação:
      <span class="value">7</span> de 
       
      <span class="best">10</span> 
    
   </span> 
</span> 

A subpropriedade value de rating indica a avaliação real, enquanto best indica a melhor avaliação possível.

Como marcar uma resenha agregada

Veja um exemplo de trecho de texto sem qualquer marcação:

Resenha de Blast 'Em Up
 
Avaliação: 88 de 100 
 
com base em 35 resenhas. 

Este é o mesmo conteúdo HTML marcado com o microformato agregado hReview:

<span class="hreview-aggregate"> 
    
   <span class="item">
      
      <span class="fn">Blast 'Em Up</span></span> Resenha
    
   <span class="rating">Avaliação: 
       
      <span class="average">88</span> de <span class="best">100</span> 
    
   </span> 
   com base em
   <span class="count">35</span> resenhas. 
 
</span> 

Assim como no caso de resenha única acima, best indica a melhor avaliação possível. Nesse caso, uma avaliação média é especificada, portanto usa-se average em vez de value para marcar a avaliação em si.

Como marcar uma única resenha quando não há a melhor pontuação

Você pode marcar informações de resenhas agregadas que não estejam em uma escala de 5 pontos, quando as melhores/piores pontuações possíveis não estão explicitamente escritas na página. Veja um exemplo de trecho de texto sem qualquer marcação:

Blast 'Em Up—Resenha do jogo
 
Avaliação: 7

Nesse caso, você pode garantir que esteja claro para os mecanismos de pesquisa que a avaliação 7 está em uma escala de 1 a 10 marcando o conteúdo com o microformato hReview e adicionando os dados relevantes usando o padrão de classe de valor dos microformatos:

<span class="hreview"> 
    
   <span class="item">
      
      <span class="fn">Blast 'Em Up</span>
   
   </span>—Resenha do jogo
    
   <span class="rating"> 
       
      Avaliação: 
      <span class="value">7</span>
      
      <span class="best">
         
         <span class="value-title" title="10"/> 
       
      </span>
   </span> 
</span> 

Como marcar uma resenha agregada quando não há uma melhor pontuação

Você pode marcar informações de resenhas agregadas que não estejam em uma escala de 5 pontos, quando as melhores/piores pontuações possíveis não estão explicitamente escritas na página.

Veja um exemplo de trecho de texto sem qualquer marcação:

Resenha de Blast 'Em Up
 
Classificação média: 7 
4 resenhas 

Nesse caso, você pode garantir que esteja claro para os mecanismos de pesquisa que a avaliação 7 está em uma escala de 1 a 10 marcando o conteúdo com o microformato hReview-aggregate e adicionando os dados relevantes usando o padrão de classe de valor dos microformatos:

<span class="hreview-aggregate"> 
    
   <span class="item">
      
      <span class="fn">Blast 'Em Up</span> </span> Avaliação
   <span class="rating"> 
       
      Classificação média:
         <span class="average">7</span> 
          
         <span class="best">
         
            <span class="value-title" title="10"/> 
       
         </span> 
         <span class="worst">
            
            <span class="value-title" title="1"/> 
          
         </span> 
   </span> 
   <span class="count">4</span> Resenhas 
 
</span> 
RDFa

Como marcar uma única resenha

Para avaliações simples em uma escala de 5 pontos, a propriedade rating pode ser usada para indicar a avaliação. Veja um exemplo de trecho de texto sem qualquer marcação:

Blast 'Em Up—Resenha do jogo
 
Avaliação: 3,5 de 5 

Este é o mesmo conteúdo HTML marcado usando RDFa:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   Avaliação: <span property="v:rating">3,5</span> de 5 
 
</span> 

Agora, vejamos um exemplo de uma avaliação em uma escala de 10 pontos.

Blast 'Em Up—Resenha do jogo
 
Avaliação: 7 de 10 

Veja o mesmo conteúdo com marcação RDFa:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span>—Resenha do jogo
   
   <span rel="v:rating"> 
       
      <span typeof="v:Rating">
         
         Avaliação:
         <span property="v:value">7</span> de 
          
         <span property="v:best">10</span>
       
      </span>
   </span> 
</span> 

Há algumas diferenças notáveis ​​entre este exemplo e o primeiro nesta seção. rel é usado (em vez de {0/property) para transmitir a relação entre a classificação e a avaliação. Além disso, value e best são usados ​​para especificar a classificação em si e a melhor classificação possível, respectivamente.

Como marcar uma resenha agregada

Para sites com resenhas agregadas (a avaliação tem base na média de um conjunto de resenhas em vez de em uma única resenha), o processo é parecido com o caso de resenha única. Veja um exemplo de trecho de texto sem qualquer marcação:

Resenha de Blast 'Em Up
 
Avaliação: 88 de 100 
 
com base em 35 resenhas. 

Veja o mesmo texto com marcação RDFa:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span> Resenha
    
   <span rel="v:rating"> 
       
      <span typeof="v:Rating">
               
         Avaliação: 
         <span property="v:average">88</span> de 
         
         <span property="v:best">100</span> 
       
      </span>
   </span>
   com base em
   <span property="v:count">35</span> resenhas.

</span> 

Assim como no caso de resenha única, best indica a melhor avaliação possível. Nesse caso, uma avaliação média é especificada, portanto usa-se average em vez de value para marcar a avaliação em si.

Como marcar uma única resenha quando não há a melhor pontuação

Veja um exemplo de trecho de texto sem qualquer marcação:

Resenha de Blast 'Em Up
 
Pontuação: 9,0—Excelente 

Nesse caso, a melhor pontuação possível é 10, mas isso não está escrito na página. As pessoas intuitivamente veem essa mensagem e percebem que a pontuação está em uma escala de 10 pontos. Nesse caso, você pode adicionar os dados relevantes na própria tag HTML usando o atributo content:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span> Resenha
    
   <span rel="v:rating"> 
       
      <span typeof="v:Rating">
         
         Avaliação:
         <span property="v:value">9.0</span> 
          
         <span property="v:best" content="10"/>—Excelente
       
      </span>
   </span> 
</span> 

O atributo content permite que você forneça informações que não estão explicitamente escritas na página. Observe que, geralmente, o Google não exibirá conteúdo que não esteja visível para o usuário final, mas quando a melhor e a pior avaliação não estiverem presentes na página, o uso do content com best ou worst será permitido.

Como marcar uma resenha agregada quando não há uma melhor pontuação

Este exemplo final mostra como marcar informações de resenhas agregadas que não estejam em uma escala de 5 pontos quando as melhores/piores pontuações possíveis não estiverem explicitamente escritas na página.

Veja um exemplo de trecho de texto sem qualquer marcação:

Resenha de Blast 'Em Up
 
Nota média: 9 
4 resenhas 

Veja o mesmo conteúdo HTML com uma marcação RDFa:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span> Resenha
    
   <span rel="v:rating"> 
       
      <span typeof="v:Rating">
         
         Classificação média:
         <span property="v:average">9</span>
          
         <span property="v:best" content="10"/>  
           
         <span property="v:worst" content="1"/> 
       
      </span>
   </span> 
   <span property="v:count">4</span> Resenhas
 
</span>