- Linha: Tìtulo
- Linha: Link
- Linha: Descrição
- Linha: Descrição
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.
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
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">