SEO - Rich Snippets (estrelas) nos resultados do Google

Este documento trás informações básicas sobre como exibir estrelas nos resultados da busca orgânica do Google.

Atenção: é necessário conhecimento sobre HTML para execução das instruções abaixo.

Rich Snippets são fragmentos de conteúdo, utilizado pelo Google para exibição nos resultados. Sendo estes, gerados através de marcações construídas no  HTML de sua loja.

Portanto para que seu produto nestes resultados tenham estrelas, é necessário garantir que ao menos algumas marcações estejam presentes na página.

1. Sua página de produto deve possuir uma estrutura de product, como no exemplo abaixo:

<div id="content" itemscope="" itemtype="http://schema.org/Product">
    <h1 class="name" itemprop="name">Nome do seu produto</h1>
    <p class="description" itemprop="description">Descrição do seu produto</p>
</div>

O trecho acima, pode ser validado através da 'ferramenta de testes de dados estruturados do Google': https://search.google.com/structured-data/testing-tool

O resultado será: 


Procure evitar deixar erros nas marcações, se utilizar da mesma ferramenta acima para validar sua loja, o Google apontará erros, caso existam. Estes podem prejudicar sua indexação.

2. Após termos um product, é possível complementar o mesmo com informações adicionais. 


É importante que em sua página tenha apenas um único 'product', dois ou mais, pode ser considerado conteúdo duplicado, resultando em punição pelo Google.

A própria ferramenta de testes deixa algumas sugestões como: brand, image, sku, etc.

Na documentação externa, de Schema.org, você encontra todas as marcações disponíveis para products: https://schema.org/Product

Como nosso objetivo aqui é incluir as estrelas, também nos resultados.

Precisamos delas sendo impressas na página do seu produto, preferencialmente abaixo do nome, ainda dentro da estrutura product mencionada acima. 


Você pode encontrar aqui, instruções para instalação das estrelas, de acordo com sua plataforma: https://help.trustvox.com.br/category/6-instalacao-da-trustvox-em-sua-loja

Localize: "Estrelas abaixo do nome do produto", em um artigo.

Ficará algo próximo deste exemplo (pode variar conforme sua plataforma):

<div id="content" itemscope="" itemtype="http://schema.org/Product">
    <h1 class="name" itemprop="name">Nome do seu produto</h1>

    <!-- As estrelas serão carregadas aqui -->
    <div data-trustvox-product-code-js="ALTERAR-ID-DO-PRODUTO" data-trustvox-display-rate-schema="true"></div>

    <!-- "data-trustvox-display-rate-schema" quando "true", imprime AggregateRating. 
         Se "false", apenas exibirá as estrelas, e NÃO imprime AggregateRating, 
         normalmente é desabilitado quando a marcação fica duplicada na página, 
         pois o Widget de Opiniões também possui AggregateRating. -->


    <p class="description" itemprop="description">Descrição do seu produto</p>


    <!-- Widget de Opiniões do Produto -->
    <div id="_trustvox_widget"></div>
</div>

Feito isto, você já terá estrelas sendo indexadas pelo, Google. 

Porém não conseguirá validar desta forma através da 'ferramenta de testes de dados estruturados do Google'. 

O conteúdo da DIV de estrelas da RA Trustvox inserida é dinâmico. Ele somente será carregado junto com a página de produto, se o mesmo existir em nossa base.


Como o conteúdo das estrelas carregadas pela RA Trustvox é dinâmico, nós mesmos fazemos as inserções de marcações de 'AggregateRating', não sendo necessário mais nenhum passo para que tal seja lido pelo Google.

Você pode validar, após implementado, copiando o código HTML da sua página de produto já renderizada, através do Inspect do seu navegador. 

Após renderizado ele ficará assim: 

<div id="content" itemscope="" itemtype="http://schema.org/Product">
    <h1 class="name" itemprop="name">Nome do seu produto</h1>
    
    <!-- As estrelas serão carregadas aqui -->
    <div data-trustvox-product-code-js="123" data-trustvox-should-skip-filter="true" data-trustvox-display-rate-schema="true">
        <div class="ts-shelf-container" id="ts-js-shelf-1391">
            <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
                <span class="ts-shelf-left ts-shelf-rate-value ts-shelf-rate-count ts-shelf-rate-enabled">
          <span itemprop="ratingValue">5 </span> de <span itemprop="bestRating">5</span>
                </span>
                <div class="ts-shelf-rate ts-sprite">
                    <meta content="0" itemprop="worstRating">
                    <div class="ts-shelf-rate-symbols ts-sprite" style="width: 100%;"></div>
                </div>
                <span class="ts-shelf-right ts-shelf-rate-count ts-shelf-rate-enabled">
          (<span itemprop="ratingCount">7</span>)
                </span>
            </div>
        </div>
    </div>
    
    <p class="description" itemprop="description">Descrição do seu produto</p>


    <!-- Widget de Opiniões do Produto -->
</div>

Com este código, de uma página de produto já carregada, obtivemos: 

Pronto!

Agora é só aguardar pela indexação do Google, se estiver tudo certinho com o SEO de sua loja, em uma média de 7 à 14 dias, você verá as estrelas nos resultados. :)

PS: O Widget da RA Trustvox também possui AggregateRating! Portanto considere manter apenas uma marcação dentro do seu escopo de Product.

Ainda precisa de ajuda? Entre em contato Entre em contato