Rich Snippets Google

Quando você faz uma pesquisa no Google, lhe retorna vários resultados relacionados a palavra chave que você pesquisou. Por padrão cada resultado de pesquisa contém 04 linhas, e cada linha uma tipo de dados:

1. Linha: Tìtulo
2. Linha: Link
3. Linha: Descrição
4. Linha: Descrição

Para melhorar os resultados e a experiência do usuário, o Google criou o Rich Snippets.

O que são Rich Snipetts

Snippets, são pequenas marcações nos trechos dos resultados de busca. Foram desenvolvidos para dar aos usuários uma noção sobre o conteúdo da página e por que ela é relevante para a consulta.

Rich =Valioso | Snippets = Trecho = Trecho Valioso.

São pequenos trechos valiosos contidos dentro de cada resultados de pesquisa orgânica que fornecem mais informações sobre o conteúdo do resultado. É assim que eu defino Rich Snippets.

Veja alguns exemplos de resultados com marcação Rich Snippets:

Se o Google compreender o conteúdo de suas páginas, pode então criar rich snippets: informações detalhadas para ajudar os usuários com consultas específicas.

Por exemplo:

• Snippet de um restaurante – pode mostrar a avaliação média e a faixa de preço
• Snipppet de uma página da receita –  pode mostrar o tempo total de preparação, uma foto e a classificação da avaliação da receita
• Snippet de um álbum de música – pode listar as músicas junto com um link para reproduzir cada música.

Esses rich snippets ajudam os usuários a identificar se o site é relevante para a pesquisa e podem resultar em mais cliques em sua página.

Tipos e Formatos para a marcação Rich Snippets

São três os tipos de formatos para marcação Rich Snippets:

• Microdados
• Microformatos
• RDFa

Eu adotei o tipo de marcação Microdados pela facilidade e flexibilidade no momento que você estiver realizando a marcação do conteúdo em sua página.

 Que tipos conteúdos podem usar marcação para Rich Snippets

O Google suporta rich snippets para os seguintes tipos de conteúdo:

• Resenhas
• Pessoas
• Produtos
• Negócios e organizações
• Receitas
• Eventos
• Música

Sintaxe para marcação

Veja abaixo um exemplo de código sem marcação e em seguida com a marcação:

Sem Marcação

<div id="_azul_topo_rodape">

<h4>Localização</h4>

<p> Rua Lício Marcondes do Amaral, 451 - Morumbi - São Paulo <br /> CEP: 05616-100 </p>
<p>Telefone: +55 11 3771 2201</p>
<p><a href="http://www.olhovivodesign.com.br">OlhoVivoDesign</a> - Todos os Direitos Reservados</p>

</div>

Com Marcação

<div id="_azul_topo_rodape" itemscope itemtype="http://schema.org/Organization">

<h4>Localização</h4>

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><p>
<span itemprop="streetAddrress">Rua Lício Marcondes do Amaral, 451 - Morumbi</span> - 
<span itemprop="addressLocality">São Paulo</span> <br /> 
<span itemprop="postalCode">CEP: 05616-100 </span></p>
</div><p>Telefone: 

<span itemprop="telephone">+55 11 3771 2201</span></p><p>
<a href="http://www.olhovivodesign.com.br" itemprop="url">
<span itemprop="name">OlhoVivoDesign</span></a> - 
Todos os Direitos Reservados</p>

</div>

Vamos analisar a marcação?

<div id="_azul_topo_rodape" itemscope itemtype="http://schema.org/Organization">

Nessa linha temos dois atributos: itemscope e itemtype.

Itemscope indica que o conteúdo dentro da <div> descreve um ítem. Itemscope acima indica que “http://schema.org/Organization” se trata de um Ítem é do tipo “Organization” e não simplesmente um link.

Itemtype indica o tipo de Ítem. No exemplo acima Itemtype indica que aquela marcação é do tipo “Organization“.

Dados aninhados

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><p>

Itemprop indica um tipo de propriedade pertencente ao Item principal. Cada tipo de Item tem um conjunto de propriedades (clique aqui para ver a tabela completa de propriedade para cada item). Neste exemplo temos o endereço da empresa, e para usar a marcação em endereço usamos a propriedade Itemprop=”address”.

Note porém que Address usa Itemscope Itemtype que define um tipo de Ítem, isso aconteceu porque a propriedade Address tem seu próprio conjunto de propriedades, e nesse caso temos que defini-lo acrentando itemscope itemtype=”http://schema.org/PostalAddress”.

Outra questão que apredemos aqui e a possibilidade de trabalhar com dados aninhados, ou seja, dentro de uma marcação do tipo “Organization” (ou qualquer outro tipo) podemos inserir outras marcações.

DIca: Você pode usar suas proprias DIV de estilo para inserir a marcação.

Por exemplo: Digamos que você tem um estilo do tipo <div id=”footer”> e dentro do footer você tem dados que descreve o nome da empresa e o endereço. Dentro dessa div você pode inserir um Itemscope Itemtype ficando assim <div id=”footer” itemscope itemtype=”http://schema.org/Organization”>