Aprenda Como Implementar um Sistema de Classificação por Estrelas no Blogger

Aprenda a criar um sistema de classificação por estrelas real no seu blog do Blogger, com avaliações refletidas nos resultados de pesquisa do Google através de rich snippets.

Visão Geral do Processo

Implementar um Sistema de Classificação por Estrelas no Blog: Permitir que os visitantes avaliem suas postagens com estrelas.
Armazenar as Avaliações de Forma Segura: Utilizar um serviço de backend (como Firebase) para armazenar as avaliações.
Calcular a Média das Avaliações: Obter a média das estrelas e o número de avaliações para cada postagem.
Integrar os Dados Estruturados (JSON-LD): Adicionar informações de classificação nos dados estruturados para que o Google possa reconhecer e exibir as estrelas nos resultados de pesquisa.

Vamos detalhar cada uma dessas etapas a seguir.

1. Implementar um Sistema de Classificação por Estrelas no Blog

a. Escolher uma Biblioteca de Estrelas

Para facilitar a implementação, utilizaremos uma biblioteca JavaScript para exibir as estrelas de classificação. Uma opção popular e leve é o RateYo!, mas você pode escolher qualquer outra de sua preferência.

b. Adicionar a Biblioteca ao Seu Blog

Adicione os seguintes links no <head> do seu template do Blogger para incluir o RateYo!:

<!-- Adicionar no <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/3.0.3/jquery.rateyo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/3.0.3/jquery.rateyo.min.js"></script>

c. Adicionar o Widget de Avaliação nas Postagens

No corpo do seu template, onde as postagens são exibidas, adicione o seguinte HTML onde você deseja que as estrelas apareçam (por exemplo, logo abaixo do título da postagem):

<!-- Adicionar onde deseja que as estrelas apareçam -->

<div class="rateyo" 
     b:attr='{"id": "rating-" + data:post.id}'></div>
<span b:attr='{"id": "rating-value-" + data:post.id}'>0</span> estrelas

2. Armazenar as Avaliações de Forma Segura

Para armazenar as avaliações dos usuários, usaremos o Firebase Realtime Database, que é gratuito e fácil de integrar com aplicativos front-end.

a. Configurar um Projeto no Firebase

Criar uma Conta no Firebase:
Vá para Firebase Console e faça login com sua conta do Google.
Criar um Novo Projeto:
Clique em "Adicionar projeto" e siga as instruções para criar um novo projeto.
Adicionar o Firebase Realtime Database:
No painel do projeto, vá para Build > Realtime Database. Clique em "Criar banco de dados" e selecione a localização mais próxima.

Inicialmente, defina as regras de segurança para leitura e escrita abertas (mais tarde, você pode refinar as regras):
```
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```
⚠️ Atenção: Definir regras de leitura e escrita como true é inseguro para produção. É recomendado configurar regras adequadas para restringir o acesso.
Obter as Configurações do Firebase:
Vá para Configurações do Projeto > Configurações Gerais. Role para baixo até Suas apps e clique em Adicionar app > Web. Siga as instruções para registrar seu app e obtenha o snippet de configuração do Firebase.

b. Adicionar o Firebase ao Seu Blog

No <head> do seu template do Blogger, adicione o SDK do Firebase:

<!-- Firebase App (necessário para usar qualquer serviço do Firebase) -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<!-- Firebase Realtime Database -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>

Em seguida, adicione o snippet de configuração do Firebase (substitua os valores pelos do seu projeto):

<script>
// Sua configuração do Firebase
var firebaseConfig = {
  apiKey: "SUA_API_KEY",
  authDomain: "SEU_AUTH_DOMAIN",
  databaseURL: "SUA_DATABASE_URL",
  projectId: "SEU_PROJECT_ID",
  storageBucket: "SEU_STORAGE_BUCKET",
  messagingSenderId: "SEU_MESSAGING_SENDER_ID",
  appId: "SEU_APP_ID"
};

// Inicializar Firebase
firebase.initializeApp(firebaseConfig);
var database = firebase.database();
</script>

c. Implementar a Lógica de Avaliação com JavaScript

Adicione o seguinte script antes do fechamento da tag </body> para inicializar o RateYo! e lidar com as avaliações:

<script>
  $(function () {
    $('.rateyo').each(function () {
      var postId = $(this).attr('id').split('-')[1];
      var ratingRef = database.ref('ratings/' + postId);
      
      // Inicializar o RateYo! com a média atual
      ratingRef.once('value').then(function(snapshot) {
        var data = snapshot.val();
        var average = data &amp;&amp; data.average ? data.average : 0;
        var count = data &amp;&amp; data.count ? data.count : 0;
        
        $('#rating-' + postId).rateYo({
          rating: average,
          fullStar: true,
          onSet: function (rating, rateYoInstance) {
            // Atualizar a avaliação no Firebase
            ratingRef.transaction(function(currentData) {
              if (currentData) {
                currentData.sum += rating;
                currentData.count += 1;
                currentData.average = currentData.sum / currentData.count;
                return currentData;
              } else {
                return {
                  sum: rating,
                  count: 1,
                  average: rating
                };
              }
            });
          }
        });
        
        // Atualizar o texto de classificação
        $('#rating-value-' + postId).text(count > 0 ? data.average.toFixed(1) : '0');
      });
    });
  });
</script>

Explicação do Script:

Iteração Sobre Cada Widget de Avaliação:
Para cada elemento com a classe rateyo, extraímos o postId (identificador único da postagem) a partir do ID do elemento.
Recuperar Dados de Avaliação do Firebase:
Consultamos o banco de dados para obter a soma total das avaliações (sum), o número de avaliações (count) e a média (average).
Inicializar o RateYo!:
Configuramos o widget com a média atual das avaliações. Definimos fullStar: true para permitir apenas classificações inteiras.
Atualizar as Avaliações no Firebase:
Quando um usuário define uma avaliação, usamos uma transação para atualizar a soma e o contador de avaliações de forma segura. Recalculamos a média com base nas novas informações.
Atualizar o Texto de Classificação:
Exibimos a média atualizada ao lado das estrelas.

3. Calcular a Média das Avaliações

No script acima, a média das avaliações já está sendo calculada e armazenada no Firebase. Essa média é usada para exibir as estrelas e será utilizada nos dados estruturados.

4. Integrar os Dados Estruturados (JSON-LD)

Agora que temos as avaliações armazenadas e calculadas, precisamos inserir essas informações nos dados estruturados para que o Google possa reconhecer e exibir as estrelas nos resultados de pesquisa.

a. Recuperar Dados de Avaliação para Cada Postagem

Para cada postagem, recuperaremos a média das avaliações e o número de avaliações a partir do Firebase e inseriremos os dados estruturados no <head> da página.

b. Implementar a Inserção Dinâmica de JSON-LD

Adicione o seguinte script antes do fechamento da tag </body>:

<script>
  $(function () {
    $('.rateyo').each(function () {
      var postId = $(this).attr('id').split('-')[1];
      var ratingRef = database.ref('ratings/' + postId);
      var postTitle = "<data:post.title/>";
      var postUrl = "<data:post.url/>";

      ratingRef.once('value').then(function(snapshot) {
        var data = snapshot.val();
        var average = data && data.average ? data.average : 0;
        var count = data && data.count ? data.count : 0;

        if (count > 0) {
          var jsonLd = {
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            "headline": postTitle,
            "url": postUrl,
            "aggregateRating": {
              "@type": "AggregateRating",
              "ratingValue": average.toFixed(1),
              "reviewCount": count
            }
          };

          var script = document.createElement('script');
          script.type = 'application/ld+json';
          script.text = JSON.stringify(jsonLd);
          document.head.appendChild(script);
        }
      });
    });
  });
</script>

Explicação do Script:

Iteração Sobre Cada Widget de Avaliação:
Para cada elemento com a classe rateyo, extraímos o postId.
Recuperar Dados de Avaliação do Firebase:
Obtemos a média e o número de avaliações da postagem.
Criar o Objeto JSON-LD:
Se houver avaliações, criamos um objeto JSON-LD com o contexto schema.org, o tipo BlogPosting, o título e a URL da postagem, e o AggregateRating com a média e o número de avaliações.
Inserir o JSON-LD no <head>:
Criamos um elemento <script> com o tipo application/ld+json e inserimos o JSON-LD convertido em string. Adicionamos este script ao <head> da página.

c. Personalizar o JSON-LD Conforme Necessário

Tipos de Schema:
Certifique-se de que o tipo de schema (@type) esteja adequado ao conteúdo. Para postagens de blog, BlogPosting é apropriado.
Outros Campos:
Você pode adicionar mais campos ao JSON-LD conforme necessário, como author, datePublished, etc.

5. Garantir que as Avaliações São Reais

Para que o Google reconheça as estrelas como avaliações legítimas, é fundamental que as avaliações sejam de usuários reais e refletidas de forma honesta. Aqui estão algumas recomendações:

Validar as Avaliações:
Implemente medidas para evitar spam ou múltiplas avaliações fraudulentas (por exemplo, limitar a uma avaliação por endereço IP ou por sessão de usuário).
Transparência:
Exiba claramente que as avaliações são de usuários reais. Você pode, por exemplo, listar as avaliações ou permitir comentários.
Conformidade com as Diretrizes do Google:
As avaliações devem estar de acordo com as Diretrizes de Dados Estruturados do Google. Evite manipular ou falsificar avaliações, pois isso pode resultar em penalizações nos resultados de pesquisa.
Atualização Regular:
Mantenha as avaliações atualizadas para refletir a opinião atual dos usuários.

6. Testar e Validar os Dados Estruturados

Após implementar o sistema, é crucial validar os dados estruturados para garantir que estão corretos e em conformidade com as diretrizes do Google.

a. Usar a Ferramenta de Teste de Dados Estruturados do Google

Acessar a Ferramenta:
Vá para a Ferramenta de Teste de Dados Estruturados do Google.
Inserir a URL da Postagem:
Insira a URL de uma postagem onde você implementou as avaliações e clique em "Testar URL".
Verificar os Resultados:
A ferramenta mostrará se os dados estruturados foram detectados corretamente. Verifique se o AggregateRating está presente e sem erros.

b. Monitorar o Google Search Console

Adicione seu blog ao Google Search Console para monitorar como o Google está indexando suas páginas e se há problemas com os dados estruturados.

Codigo Completo de Exemplo

Abaixo, apresento um exemplo completo integrando todas as partes mencionadas acima. Certifique-se de substituir os valores de configuração do Firebase pelos do seu projeto.

HTML do Template do Blogger

<!DOCTYPE html>
<html b:version='2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'>
<head>
  <meta charset='UTF-8'/>
  <title><data:blog.pageTitle/></title>
  
  <!-- Incluir RateYo! CSS e JS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/3.0.3/jquery.rateyo.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/3.0.3/jquery.rateyo.min.js"></script>
  
  <!-- Incluir Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>
  
  <!-- Configuração do Firebase -->
  <script>
    var firebaseConfig = {
      apiKey: "SUA_API_KEY",
      authDomain: "SEU_AUTH_DOMAIN",
      databaseURL: "SUA_DATABASE_URL",
      projectId: "SEU_PROJECT_ID",
      storageBucket: "SEU_STORAGE_BUCKET",
      messagingSenderId: "SEU_MESSAGING_SENDER_ID",
      appId: "SEU_APP_ID"
    };
    
    // Inicializar Firebase
    firebase.initializeApp(firebaseConfig);
    var database = firebase.database();
  </script>
</head>
<body>
  <b:section id='main' class='main-section' showaddelement='no'>
    <b:loop values='data:posts' var='post'>
      <div class='post'>
        <h2><data:post.title/></h2>
        <div class='post-content'><data:post.body/></div>
        
        <!-- Widget de Avaliação -->
        <div class="rateyo" id="rating-<data:post.id/>"></div>
        <span id="rating-value-<data:post.id/>">0</span> estrelas
      </div>
    </b:loop>
  </b:section>
  
  <!-- Script para Avaliação e Dados Estruturados -->
  <script>
    $(function () {
      $('.rateyo').each(function () {
        var elementId = $(this).attr('id');
        var postId = elementId.split('-')[1];
        var ratingRef = database.ref('ratings/' + postId);
        var postTitle = "<data:post.title/>";
        var postUrl = "<data:post.url/>";
        
        // Recuperar dados de avaliação
        ratingRef.once('value').then(function(snapshot) {
          var data = snapshot.val();
          var average = data && data.average ? data.average : 0;
          var count = data && data.count ? data.count : 0;
          
          // Inicializar RateYo!
          $('#' + elementId).rateYo({
            rating: average,
            fullStar: true,
            onSet: function (rating, rateYoInstance) {
              // Atualizar avaliação no Firebase
              ratingRef.transaction(function(currentData) {
                if (currentData) {
                  currentData.sum += rating;
                  currentData.count += 1;
                  currentData.average = currentData.sum / currentData.count;
                  return currentData;
                } else {
                  return {
                    sum: rating,
                    count: 1,
                    average: rating
                  };
                }
              });
            }
          });
          
          // Atualizar texto de classificação
          $('#rating-value-' + postId).text(count > 0 ? data.average.toFixed(1) : '0');
          
          // Inserir JSON-LD no 
          if (count > 0) {
            var jsonLd = {
              "@context": "https://schema.org",
              "@type": "BlogPosting",
              "headline": postTitle,
              "url": postUrl,
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": average.toFixed(1),
                "reviewCount": count
              }
            };
            
            var script = document.createElement('script');
            script.type = 'application/ld+json';
            script.text = JSON.stringify(jsonLd);
            document.head.appendChild(script);
          }
        });
      });
    });
  </script>
</body>
</html>