Use os Rich Snippets para aumentar conversão nas buscas

Quando uma pessoa está buscando algo no Google ou qualquer outro buscador e nossa página (junto de outras centenas) é mostrada para ela nos resultados orgânicos, temos que convencê-la de que é o nosso resultado o mais interessante e que merece ganhar o clique.

A cada dia que passa, essa briga para atrair as pessoas à clicarem no resultado do seu site é mais intensa, já que cada vez mais a concorrência nos resultados das páginas de busca ficam maiores, com resultados patrocinados, orgânicos, mapas, artigos etc disputando espaço.

Para que possamos fazer esse convencimento, a princípio temos apenas alguns caracteres, divididos entre título e descrição da página, além de uma URL. Parece pouco, não?

Página da Caelum na Busca

Página da Caelum na Busca

Dependendo do seu site e do negócio dele, pode ser que seja necessário algumas informações a mais. Já pensou um e-commerce deixando visível já na página de resultados do Google que seu produto está em um preço promocional? Ou então, um resumo da avaliação positiva dada pelos clientes aos serviços prestados por sua empresa? Ou datas em que acontecerão eventos da sua empresa? Bem, as possibilidades são enormes, mas com bastante frequência precisaremos enriquecer esses resultados de busca, mostrar informações a mais, além dos tradicionais título, descrição e URL, e convencer mais usuários de que o nosso resultado é o mais interessante.

Veja o que o AllRecipes, famoso site americano de receitas, faz para nos convencer de que o resultado dele é o mais interessante:

Resultado da busca do AllRecipes com diversas informações interessantes a mais

Resultado da busca do AllRecipes com diversas informações interessantes a mais

Bem mais atraente, não? Mas como podemos fazer isso? Como enriquecer o resultado da nossa página nas buscas do Google? O segredo está no uso dos dados estruturados, suportados pelos buscadores. São pequenos pedacinhos de metadados, em HTML, que quando colocados em suas páginas, fazem com que os buscadores entendam apresentem trechos extras para sua página nos resultados das buscas, chamado de Rich Snippet (“pedaço rico”, em uma tradução livre).

Com isso, podemos enriquecer uma página de um produto, para mostrar o seu preço, moeda e também se há estoque, com poucas linhas de código. A primeira tarefa é indicar, no HTML, a partir de onde está o conteúdo da página que fala sobre o produto. Fazemos isso, através dos atributos itemscope e itemtype:

<div itemscope itemtype="http://schema.org/Product">
	<h1>Título do produto</h1>
	<p>Descrição do produto...</p>

	<p>Preço: R$49,90</p>

	<p>Em estoque</p>
</div>

O itemscope indica que ali está sendo aberto um escopo para falar de alguma informação importante. Qual informação? Justamente a identificada pelo atributo itemtype. Note que o valor do atributo é http://schema.org/Product. Essa é a identificação do metadado que vamos usar. O metadado de produtos. Existem vários outros disponíveis e inclusive há na própria documentação do Google uma lista completa dos suportados.

Dentro da div, agora podemos indicar qual o preço do produto. Fazemos isso através da identificação de uma Offer (oferta), que é uma propriedade do escopo de produto chamada offers:

<div itemscope itemtype="http://schema.org/Product">
	<h1>Título do produto</h1>
	<p>Descrição do produto...</p>

	<p itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		Preço: R$49,90
	</p>

	<p>Em estoque</p>
</div>

O escopo Offer possui diversas informações que podem ser dadas, como preço, moeda e a disponibilidade. Vamos começar definindo o preço e moeda, através da adição das propriedades price e priceCurrency:

<div itemscope itemtype="http://schema.org/Product">
	<h1>Título do produto</h1>
	<p>Descrição do produto...</p>

	<p itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		Preço: R$ <span itemprop="price">49,90</span>
		<meta itemprop="priceCurrency" content="BRL" />
	</p>

	<p>Em estoque</p>
</div>

Envolvemos o preço dentro da tag span com o itemprop=”price”, já que essa informação é visível na tela. Por outro lado, o código da moeda não é uma informação visível. Não ao menos no formato em que ela deve ser informado, ISO 4217, onde R$ são BRL. Para isso, deixamos a informação no código fonte da nossa página, mas invisível ao usuário, através da tag meta.

Falta agora só colocarmos a disponibilidade. Note que a informação “Em estoque” está em uma tag fora da oferta. Ela é um outro p. No entanto, a disponibilidade é uma informação da oferta. Ou seja, precisamos fazer com que a delimitação do escopo da oferta envolva também a disponibilidade. Podemos fazer isso adicionando uma nova tag div, que envolva ambos os p e passando o escopo Offer para ela:

<div itemscope itemtype="http://schema.org/Product">
	<h1>Título do produto</h1>
	<p>Descrição do produto...</p>

	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<p>
			Preço: R$ <span itemprop="price">49,90</span>
			<meta itemprop="priceCurrency" content="BRL" />
		</p>
	</div>

	<p>Em estoque</p>
</div>

Pronto, agora o estoque está dentro do escopo da oferta. Só precisamos indicar o seu metadado:

<p itemprop="availability" href="http://schema.org/InStock"/>
	Em estoque
</p>

Com isso, teremos um resultado parecido com esse aqui:

Página com informações de preço

Página com informações de preço

Mas as possibilidades não acabam por aí. Existe as propriedades e snippets para reviews, receitas, eventos e várias outras informações. Todas elas funcionam de forma similar à de produtos e possuem o mesmo próposito: “convencer a pessoa a entrar em seu site e aumentar a conversão”. E você já usa? Quais informações do seu site irá enriquecer nas páginas de busca?

No livro de SEO da Casa do Código e no curso online de SEO do Alura também existem diferentes exemplos de uso dos dados estruturados e vários outros assuntos de SEO abordados.

7 Comentários

  1. Paulo Campos 01/09/2015 at 09:39 #

    Muito interessante o artigo, eu não conhecia esse tipo de prática para SEO.

    Com certeza testarei. Vlw man!

  2. André Faria Gomes 02/09/2015 at 14:04 #

    Fantástico!

  3. Samuel Bicalho 05/09/2015 at 11:40 #

    Ótimo artigo. Com recursos desse tipo, a cada dia o usuário bastará sentar na frente do computador e digitar o que ele quer. O google vai dizer se tem o produto em alguma loja, o preço, quanto tempo demora para entrar para o usuário etc. Isso é tecnologia!!!!

  4. David Arty 15/01/2016 at 15:09 #

    Parabéns, Adriano pelo artigo.

    Muito bom!

    Realmente usar rich snipptes pode trazer ótimos resultados. E numa corrida por visitas cada vez mais concorrida usar de tais técnicas podem fazer toda a diferença em um projeto.

    Eu senti a diferença quando apliquei-os no meu site. Acredito que todos que tem preocupação e investem na otimização das suas páginas devem ser atentos as novas possibilidades e recursos.

    E por falar em SEO, se você me permitir, quero compartilhar um artigo do meu blog onde falamos sobre SEO e que pode ser de grande valia para o seu público também:

    http://chiefofdesign.com.br/melhores-praticas-de-seo-para-web-designers-e-desenvolvedores/

    Muito obrigado Adriano por compartilhar conhecimento e informação!

    Continue assim 😀

    Forte Abraço!

  5. Cornélio José Wiedemann 03/02/2016 at 15:33 #

    Realmente magnifico isso

    pretendo usar muito em meus projetos

    Obrigado meu amigo
    muito feliz fiquei em ler esse artigo
    😀

    Att,
    Tio Nélio do Rincão ( TI & DBA )

  6. Saul 29/09/2016 at 17:03 #

    dúvida, o google não está aceitando o preço com vírgula , exige que se coloque ponto.
    É isso mesmo ?
    copiei o texto do schema.org
    Use ‘.’ (Unicode ‘FULL STOP’ (U+002E)) rather than ‘,’ to indicate a decimal point. Avoid using these symbols as a readability separator.

  7. caesar tomas 23/10/2018 at 13:00 #

    Qual a diferença entre usar “meta itemprop” e “itemprop “?

Deixe uma resposta