Visto que todos os dias “nascem” novas páginas, blogs, sites, portais – todos eles com novos conteúdos (ou às vezes apenas cópia de outros sites) -, os buscadores precisam classificar e organizar todo esse contéudo de maneira eficaz, para trazer aos usuários resultados satisfatórios em suas pesquisas. Aí é que entra os Rich Snippets.

O que são os Rich Snippets?

Os Rich Snippets são informações inseridas na estrutura HTML. O objetivo dessas informações é organizar e classificar o contéudo na web. Com eles podemos dar uma ajudinha aos buscadores na hora de indexar nosso site, dizendo a ele que tipo de conteúdo nossas páginas trazem. O Google (o buscador mais utilizado no mundo), “lê” os rich snippets através de três tipos de marcação: microdados (recomendado), microformats e RDFa.

Organizando a informação com os Rich Snippets

O Google suporta rich snippets para os seguintes tipos de conteúdo: navegação (Breadcrumbs), resenhas, pessoas, produtos, negócios e organizações, receitas, eventos e música. Vejamos alguns exemplos:

Trabalhando com Breadcrumbs

Caso seu site possua breadcrumbs, você pode usar os microdados ou RDFa para aparecer assim na SERP do Google:

Exemplo do código com microdados:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.seusite.com/" rel="home" itemprop="url">
<span itemprop="title">Home do site</span>
</a> »
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/categoria/" itemprop="url">
<span itemprop="title">Categoria</span>
</a> »
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/categoria/produto/" itemprop="url">
<span itemprop="title">Produto</span>
</a>
</div>

A marcação itemscope itemtype=”http://data-vocabulary.org/Breadcrumb” indica que o conteúdo dessa div é uma trilha de navegação, ou seja, um link do breadcrumb.

A marcação itemprop=”url” indica que o conteúdo da tag <a></a> é a url, e a marcação itemprop=”title” indica que o conteúdo dentro da tag <span></span> é o titulo da url, ou Anchor Text.

Exemplo de breadcrumbs com RDFa:

<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.seusite.com/" rel="v:url" property="v:title">
Home do site
</a> ›»
</span>

<span typeof="v:Breadcrumb">
<a href="http://www.example.com/categoria/" rel="v:url" property="v:title">
Categoria
</a> &raquo;
</span>

<span typeof="v:Breadcrumb">
<a href="http://www.example.com/categoria/produto/" rel="v:url" property="v:title">
Produto
</a> »
</span>
</div>

Dentro da div, vemos a marcação xmlns:v=”http://rdf.data-vocabulary.org/#”. Isso indica o namespace onde o vocabulário é especificado.

As marcações rel=”v:url” property=”v:title” indica a URL e o título da URL respectivamente. Onde na imagem “code.imasters.com.br” é a Home do site, “Linguagens” é a categoria e “PHP” é o produto.

Trabalhando com resenhas (reviews)

O Rich Snippet de resenha, ou review, serve para avaliar um produto, serviço especifico, música, etc. É possivel dar notas de 1 a 5, que irão aparecer no formato de estrelas, e junto o nome do avaliador.

Exemplo de review com microdados:

<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">

<span itemprop="itemreviewed">Nome do Produto</span>

Resenha feita por <span itemprop="reviewer">Nome do Avaliador</span> em

<time itemprop="dtreviewed" datetime="YYYY-MM-DD">Data</time>.

<span itemprop="summary">Um breve resumo da resenha</span>
<span itemprop="description">O corpo da resenha.</span>
Avaliação: <span itemprop="rating">Valor de 1 a 5</span>

</div>
</div>

A marcação itemscope itemtype=”http://data-vocabulary.org/Review” indica que o conteúdo dessa div é um review de algo.

A marcação itemprop=”itemreviewed” indica o nome do produto. Já a marcação itemprop=”reviewer” indica o nome do avaliador e a  itemprop=”dtreviewed” indica a data que foi feita o review. A marcação itemprop=”summary” traz um breve resumo do produto avaliado.
A marcação itemprop=”description” traz o corpo do review. A marcação itemprop=”rating” indica a nota do review.

Exemplo de review com RFDa:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
<span property="v:itemreviewed">Nome do produto</span>
Avaliado por
<span property="v:reviewer">Nome do avaliador</span> em
<span property="v:dtreviewed" content="2009-01-06">Data do review</span>.
<span property="v:summary">Resumo do review</span>
<span property="v:description">Corpo do review</span>
Avaliação:
<span property="v:rating">4,5</span>
</div>

Dentro da div, vemos a marcação xmlns:v=”http://rdf.data-vocabulary.org/#”. Isso indica o namespace onde o vocabulário é especificado.

A marcação property=”v:itemreviewed” indica o nome do produto, assim como a property=”v:reviewer” indica o nome do avaliador.
A marcação property=”v:dtreviewed”  indica a data em que o review foi feito e a property=”v:summary” traz um breve resumo do produto avaliado. A marcação property=”v:description” traz o corpo do review e a marcação property=”v:rating” indica a nota do review.

Trabalhando com Rich Snippet de pessoas

Com o Rich Snippet de pessoas, é possível fornecer informações de uma determinada pessoa. Informações como nome, cargo e endereço.

Além disso, é possível utilizar em conjunto com o rel=”author”, que permite exibir a foto do seu perfil do Google Plus.

Exemplo de Rich Snippet de pessoa com microdados e rel=”author”:

<div itemscope itemtype="http://data-vocabulary.org/Person">
Meu nome é <span itemprop="name">Nome</span>,
mas todos me chamam de <span itemprop="nickname">Apelido</span>.
Esta é a minha página:
<a href="https://plus.google.com/id-do-google-plus/rel=author" rel=”author” itemprop="url">Página do Google Plus</a>.
Moro em

<!-- microformats de endereço -->
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Bairro</span>,
<span itemprop="region">Cidade</span>
</span>
<!--fim do microformats -->

e trabalho como <span itemprop="title">cargo</span>
na <span itemprop="affiliation">Empresa</span>
</div>

Nesse exemplo, utilizamos além do Rich Snippet de pessoa, o Rich Ssnippet de endereço.

A marcação itemscope itemtype=”http://data-vocabulary.org/Person” indica que o conteúdo dessa div se refere á informações de uma determinada pessoa.

A marcação itemprop=”name” indica o nome da pessoa e a marcação itemprop=”nickname” indica o apelido da pessoa. Essa é uma informação opcional.

A marcação itemprop=”url” indica a url de um site dessa pessoa. No entanto, colocamos o link do perfil do Google Plus e a marcação rel=”author”. Isso permite a exibição da foto do perfil do Google Plus na SERP do Google.

Após essas marcações, vemos outro microdado: o de endereço. As marcações itemprop=”address” e itemscope itemtype=”http://data-vocabulary.org/Address” indicam que a informação a seguir dentro das tags <span></span> são o endereço da pessoa.

As marcações itemprop=”locality” e itemprop=”region” indicam o bairro e a cidade respectivamente.

E por ultimo, temos as marcações  itemprop=”title” e itemprop=”affiliation” que indicam o cargo e a empresa onde a pessoa trabalha.

Exemplo de Rich Snippet de pessoa com RDFa:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
Meu nome é <span property="v:name">Nome</span>,
mas todos me chamam de <span property="v:nickname">Apelido</span>.
Esta é a minha página:
<a href="https://plus.google.com/id-do-google-plus/?rel=author" rel="v:url">Página do perfil do Google Plus</a>.
Moro em
<span rel="v:address">
<span typeof="v:Address">
<span property="v:locality">Albuquerque</span>,
<span property="v:region">Novo México</span>
</span>
</span>
e trabalho como <span property="v:title">engenheiro</span>
na <span property="v:affiliation">ACME Corp</span>.
</div>

Dentro da div, vemos a marcação xmlns:v=”http://rdf.data-vocabulary.org/#”. Isso indica o namespace onde o vocabulário é especificado.

A marcação typeof=”v:Person” indica que o conteúdo dessa div, se refere a informações de uma determinada pessoa.

A marcação property=”v:name” indica o nome da pessoa. A marcação itemprop=”nickname” indica o apelido da pessoa. Essa é uma informação opcional.

A marcação property=”v:url” indica a url de um site dessa pessoa. No entanto, colocamos o link do perfil do Google Plus adicionando no final da url o contexto “?rel=author”. Isso permite a exibição da foto do perfil do Google Plus na SERP do Google.

Após essas marcações, vemos outro microdado: o de endereço. As marcações rel=”v:address” e typeof=”v:adreess” indicam que a informação a seguir dentro das tags <span></span> são o endereço da pessoa.

As marcações property=”v:locality” e property=”v:region” indicam o bairro e a cidade respectivamente.

E por ultimo, temos as marcações  property=”v:title” e property=”v:affiliation” que indicam o cargo e a empresa onde a pessoa trabalha.

Testando os Rich Snippets

O Google possui uma ferramenta com a qual é possível pré-visualizar como ele vai exibir sua página com os Rich Snippets na SERP. Ela integrada ao Google WebMaster Tools e chama Ferramenta de teste de dados estruturados. Basta colocar a url da página que ele mostra o resultado.

SEO e Rich Snippets

Os Rich Snippets ajudam a organizar melhor a informação. Isso melhora a semântica das páginas web e ajuda e muito os buscadores a entender o contéudo do site, facilitando a indexação. Portanto, o uso do Rich Snippets no trabalho de SEO é muito bem-vindo.