Como implementar Rich Snippets - Thought Works

Post on 16-Jul-2015

103 views 2 download

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

MuitoObrigadoE-mail: luiz.luibex@gmail.com

Linkedin: br.linkedin.com/in/luizamcalmeida/ Luibex.com.br