Como implementar Rich Snippets - Thought Works
25
-
Upload
luiz-almeida -
Category
Internet
-
view
103 -
download
2
Transcript of Como implementar Rich Snippets - Thought Works
TássiaSpinelli
LuizAlmeida
RichSnippets
O que é?
"Pequenas linhas de texto que aparecem embaixo de todo resultado da pesquisa,
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"
- Tools, Google WebMaster
Resultados comuns
Resultados "enriquecidos"
> >
> >
> >
+100 Rich Snippets
Entre os Rich Snippets mais conhecidos: !• Map Results • Ratings • BreadCrumb • Reviews • Price • Videos • Recipes • Carrousel • News • Bio's
85%SERP's com Rich Snippets
Como Implementar?
MicroData (W3C Recommended) RDFa
JSON-LD !São os tipos de marcações que podem ser feitas em seu código HTML. !As ferramentas de busca indexam os três, porém MicroData aparentemente é identificado com mais facilidade.
Schema.org
750 É a quantidade de marcações existentes atualmente. Uma listagem bem completa no site, que possibilita a escolha do Rich Snippet ideal para cada site.
Quais utilizar?
Imagine que você tem uma página sobre o filme Avatar. A marcação HTML seria parecido com esta: !<div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>
Marcação
O primeiro passo é identificar o item a ser marcado com o ItemScope o ItemType: !<div itemscope itemtype="http://schema.org/Movie"> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>
Marcação
Agora é necessário identificar e nomear as propriedades existentes dentro da marcação /Movie com o ItemProp: !<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span itemprop="director">Director: James Cameron (born August 16, 1954)</span> <span itemprop="genre">Science fiction</span> <a href=“../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>
Marcação
Inception
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name"&g;Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>
Quanto mais, melhor
1.0 - Instale o GWM Tools 1.1 - Valide sua propriedade 2.0 - Rastreamento 2.1 - Buscar como Google 2.2 - Envie suas URL com Rich Snipets para o Google 2.2.1 - Clique no botão “enviar para o índice” 3.0 - Acesse “aspecto de pesquisa” 3.1 - Dados estruturados 3.1.1 - Valide se seus dados estão sendo identificados
Valide com Google WMTools
Curiosidade
Usuário: Torre Eiffel !Google: Construída em 31 de março de 1889… !Usuário: Preço dos ingressos !Google: Os ingressos para visitar a Torre custom entre… !Usuário: Visitar de dis ou à noite? !Google: As visitas durante o dia proporcionam uma vista da cidade…
Buscas por voz
1. Resultados orgânicos mais atrativos 2. Geração de leads mais eficiente 3. Taxa de conversão otimizada 4. Economize no AdWords 5. Site mais relevante na visão das ferramentas de busca 6. Site pensado em entidades e não palavras-chave 7. Qualidade do código-fonte elevada 8. Mais benefícios que custo de implementação 9. Crescimento da marca/site orgânico 10.User Experiencie em seus resultados orgânicos
10 Vantagens
google.com/webmasters/tools !google.com/webmasters/tools/richsnippets !schema.org !schema.org/docs/full.html !support.google.com/webmasters/answer/99170?hl=pt-BR
Referências
