SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
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?
Schema.org 
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.
Quais utilizar? 
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.
Marcação 
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>
Inception
Quanto mais, melhor 
<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>
Valide com Google WMTools 
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
Curiosidade
Buscas por voz 
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…
10 Vantagens 
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
Referências 
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
MuitoObrigado 
E-mail: luiz.luibex@gmail.com 
Linkedin: br.linkedin.com/in/luizamcalmeida/ 
Luibex.com.br

Mais conteúdo relacionado

Semelhante a Como implementar Rich Snippets - Thought Works

HTML5 - Seu navegador não é mais o mesmo
HTML5 - Seu navegador não é mais o mesmoHTML5 - Seu navegador não é mais o mesmo
HTML5 - Seu navegador não é mais o mesmoCaio Gondim
 
Schema.org - HTML semântico - Front in Maceio 2012
Schema.org - HTML semântico - Front in Maceio 2012Schema.org - HTML semântico - Front in Maceio 2012
Schema.org - HTML semântico - Front in Maceio 2012Ícaro Medeiros
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007Claudio Gamboa
 
CHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario MeloCHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario MeloMario Melo
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSFabio Ricotta
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)Zeno Rocha
 
SEO - Fatores Onpage - FrontinBH
SEO - Fatores Onpage - FrontinBHSEO - Fatores Onpage - FrontinBH
SEO - Fatores Onpage - FrontinBHAlberto André
 
SEO Para Desenvolvedores
SEO Para Desenvolvedores SEO Para Desenvolvedores
SEO Para Desenvolvedores Umbler
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações WebAnderson Aguiar
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Android com estilo - GDG Dev Fest 2015
Android com estilo - GDG Dev Fest 2015Android com estilo - GDG Dev Fest 2015
Android com estilo - GDG Dev Fest 2015Nathalie Lima
 
Tudo que Você Precisa Saber para Hackear o Google
Tudo que Você Precisa Saber para Hackear o GoogleTudo que Você Precisa Saber para Hackear o Google
Tudo que Você Precisa Saber para Hackear o GoogleFelipe Bazon
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...Guga Alves
 

Semelhante a Como implementar Rich Snippets - Thought Works (20)

HTML5 - Seu navegador não é mais o mesmo
HTML5 - Seu navegador não é mais o mesmoHTML5 - Seu navegador não é mais o mesmo
HTML5 - Seu navegador não é mais o mesmo
 
Schema.org - HTML semântico - Front in Maceio 2012
Schema.org - HTML semântico - Front in Maceio 2012Schema.org - HTML semântico - Front in Maceio 2012
Schema.org - HTML semântico - Front in Maceio 2012
 
Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor na Web 2.0Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor na Web 2.0
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007
 
CHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario MeloCHECKLIST DE SEO ONPAGE - Mario Melo
CHECKLIST DE SEO ONPAGE - Mario Melo
 
Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJS
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
SEO - Fatores Onpage - FrontinBH
SEO - Fatores Onpage - FrontinBHSEO - Fatores Onpage - FrontinBH
SEO - Fatores Onpage - FrontinBH
 
SEO Para Desenvolvedores
SEO Para Desenvolvedores SEO Para Desenvolvedores
SEO Para Desenvolvedores
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direito
 
Android com estilo - GDG Dev Fest 2015
Android com estilo - GDG Dev Fest 2015Android com estilo - GDG Dev Fest 2015
Android com estilo - GDG Dev Fest 2015
 
Search Plugins para Firefox
Search Plugins para FirefoxSearch Plugins para Firefox
Search Plugins para Firefox
 
Tudo que Você Precisa Saber para Hackear o Google
Tudo que Você Precisa Saber para Hackear o GoogleTudo que Você Precisa Saber para Hackear o Google
Tudo que Você Precisa Saber para Hackear o Google
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
 
Mini Curso Mashup Coreu
Mini Curso Mashup CoreuMini Curso Mashup Coreu
Mini Curso Mashup Coreu
 

Mais de Luiz Almeida

Personas & Mapa de Experiência - Tera
Personas & Mapa de Experiência - TeraPersonas & Mapa de Experiência - Tera
Personas & Mapa de Experiência - TeraLuiz Almeida
 
Números e contexto - Neue T @ Neue Labs
Números e contexto - Neue T @ Neue LabsNúmeros e contexto - Neue T @ Neue Labs
Números e contexto - Neue T @ Neue LabsLuiz Almeida
 
O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...
O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...
O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...Luiz Almeida
 
UX e Fontes de Tráfego
UX e Fontes de TráfegoUX e Fontes de Tráfego
UX e Fontes de TráfegoLuiz Almeida
 
Tech Talk de Link Building para a Baby.com.br
Tech Talk de Link Building para a Baby.com.brTech Talk de Link Building para a Baby.com.br
Tech Talk de Link Building para a Baby.com.brLuiz Almeida
 
Google Hummingbird SEO Impacts - Techtalk Baby.com.br
Google Hummingbird SEO Impacts - Techtalk Baby.com.brGoogle Hummingbird SEO Impacts - Techtalk Baby.com.br
Google Hummingbird SEO Impacts - Techtalk Baby.com.brLuiz Almeida
 

Mais de Luiz Almeida (6)

Personas & Mapa de Experiência - Tera
Personas & Mapa de Experiência - TeraPersonas & Mapa de Experiência - Tera
Personas & Mapa de Experiência - Tera
 
Números e contexto - Neue T @ Neue Labs
Números e contexto - Neue T @ Neue LabsNúmeros e contexto - Neue T @ Neue Labs
Números e contexto - Neue T @ Neue Labs
 
O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...
O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...
O SEO que seu usuário não enxerga, Técnicas avançadas para otimizações esse...
 
UX e Fontes de Tráfego
UX e Fontes de TráfegoUX e Fontes de Tráfego
UX e Fontes de Tráfego
 
Tech Talk de Link Building para a Baby.com.br
Tech Talk de Link Building para a Baby.com.brTech Talk de Link Building para a Baby.com.br
Tech Talk de Link Building para a Baby.com.br
 
Google Hummingbird SEO Impacts - Techtalk Baby.com.br
Google Hummingbird SEO Impacts - Techtalk Baby.com.brGoogle Hummingbird SEO Impacts - Techtalk Baby.com.br
Google Hummingbird SEO Impacts - Techtalk Baby.com.br
 

Como implementar Rich Snippets - Thought Works

  • 1.
  • 5. 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
  • 8. +100 Rich Snippets Entre os Rich Snippets mais conhecidos: ! • Map Results • Ratings • BreadCrumb • Reviews • Price • Videos • Recipes • Carrousel • News • Bio's
  • 9. 85% SERP's com Rich Snippets
  • 10.
  • 11.
  • 13. Schema.org 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.
  • 14. Quais utilizar? 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.
  • 15. Marcação 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>
  • 16. 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>
  • 17. 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>
  • 19. Quanto mais, melhor <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>
  • 20. Valide com Google WMTools 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
  • 22. Buscas por voz 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…
  • 23. 10 Vantagens 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
  • 24. Referências 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
  • 25. MuitoObrigado E-mail: luiz.luibex@gmail.com Linkedin: br.linkedin.com/in/luizamcalmeida/ Luibex.com.br