Rich Snippets, Microformats e como deixar seu site bonito no Google

7 Apr

Você já deve ter visto, navegando pelo Google a fora (principalmente no Google US), algumas páginas de resultados bem interessantes, que mostram reviews de usuários, preços de produtos, dados de cinema e afins.
Essas informações são conhecidas como Rich Snippets, e você pode implementá-las no seu site de 3 maneiras diferentes, à sua escolha: microdados, RDFa e Microformats. Vou falar um pouco sobre os Microformats hoje.

Rich Snippets Google

O que são microformats

Como disse no meu post anterior, são necessários padrões para organizar toda a informação que é disponibilizada na web, e os microformats surgem para dar “uma mãozinha” aos buscadores a agregar toda essa informação e ajudá-los a “montar” o rankeamento e qualificação/classificação de resultados da melhor forma possível, através dessa “meta-informação”.

Como começar

1) Com semântica
Antes de mais nada, você DEVE ter código semântico. Se seu site não está de acordo com os padrões web, pode parar de ler esse post por aqui! hehehe
Digo isso porque a aplicação básica de microformats é criar relações que descrevem semântica através de tags, classes e atributos de (X)HTML.

2) Com classe
Com classe, porque a gente aqui no SEO de Saia é chic, né bem?!…
De acordo com as especificações do W3C, nomes de classes podem ser utilizados tanto para referência do estilo de seu site (CSS) como para serem utilizados por user agents, sejam eles browsers ou robôs de busca.

<span class="data-post">06 de abril de 2011</span>

Tá, até agora nada fez sentido na sua vida, né?! Mas não desista! É agora que a coisa fica boa! Keep reading! hehe

Como classes não têm significado algum por padrão, como fazer para dar semântica a elas?
Existem especificações de Microformats estabelecidos, criando, desta forma, um design pattern para dar, então, semântica à vida das pobres classes, antes tratadas apenas como nomezinhos aleatórios dados por front-ends felizes! 😛

As especificações de Microformats, o Google e SEO

Dentre as várias especificações e rascunhos existentes, os principais e que, até então, o Google dá suporte são:

  • hCard – para marcação de cartões de visitas ou informações pessoais
  • hReview – para reviews individuais
  • hReview-aggregate – para informações resumidas a partir de um conjunto de hReviews
  • hProduct – para marcação de produtos, preços e toda informação relacionada a e-commerces
  • hCalendar – para marcação de datas, compromissos, eventos e afins
  • hRecipe – para receitas

Vale citar também que fazem parte das especificações os já conhecidos rel-license e rel-nofollow.

Foi bem difícil achar exemplos decentes no Brasil para mostrar aqui no post, por isso tive que recorrer a buscas no Google US. Basicamente, os poucos sites nacionais que se utilizam de microformats, usam o hReview.

Como já é sabido, o Google Products e o Google Recipe ainda não chegaram no Brasil, porém os microformats para receitas, com ingredientes e tempo de preparo, por exemplo, podem ser visualizados nas SERP do Google Brasil.

Google Brasil vs Google US

Exemplo: Trabalhando reviews

O Google reconhece propriedades de resenhas como rating, nome do autor, data, descrição, resumo e foto, todos derivados da especificação hReview.

Exemplo Microformats hReview

Para adaptar um site com reviews, que teria o código inicial do tipo:

<div>
<strong>Pongsri Thai Restaurant</strong><br />
by Renata Reis<br />
06 de Abril de 2011 <br />
We stumbled upon this place while visiting NYC. It took a while for service, but it was well worth the wait. <br />
Nota: 7
</div>

Ficaria desta forma marcado com Microformats:

<div class="hreview">
<span class="item">
<span class="fn">Pongsri Thai Restaurant</span>
<img src="thai-food.jpg" class="photo" alt="Thai Food" />
</span>
by <span class="reviewer">Renata Reis</span>
<span class="dtreviewed">
06 de Abril de 2011<span class="value-title" title="2011-06-04" ></span>
</span>.
<span class="summary">We stumbled upon this place while visiting NYC. It took a while for service, but it was well worth the wait.</span>
<span class="description">This place is great. I love Thai food and I have been to Thai restaurants everywhere and this is the best.</span>
Nota:
<span class="rating">7</span>
</div>

Exemplo 2: Trabalhando com informações de pessoas e organizações, produtos, receitas e eventos

O uso de microformats para os rich snippets de pessoas e organizações, produtos, receitas e eventos seguem o mesmo padrão do hReview, com suas devidas marcações particulares. Exemplos:

hCard para marcação de pessoas e organizações:
Exemplo Microformats hCard
Propriedades como nome, apelido, foto, cargo, função, link, contato, endereço, etc. pode ser usadas.

hProduct para produtos em um e-commerce:
Exemplo Microformats hProduct
Propriedades como nome, imagem, descrição, marca, categoria, review, e oferta podem ser usadas. Dentro de oferta, propriedades como preço, moeda, validade da oferta, vendedor, condição (novo/usado), disponibilidade, url e item (oferta agregada) podem ser usados. Dentro de oferta agregada, propriedades como preço mais baixo, preço mais alto, moeda, número de ofertas, condição e url podem ser usadas.

hRecipe para receitas:
Exemplo Microformats hRecipe
Propriedades como nome, tipo de prato, foto, data, resumo, review, tempo de preparo, informações nutricionais, instruções, ingredientes, rendimento e autor podem ser usadas.

hCalendar para eventos:
Exemplo Microformats hCalendar
Propriedades como nome do evento, url, local, descrição, data de início, data de término, duração, tipo de evento, coordenadas geográficas e foto podem ser usadas.

Testando

Depois de arrumar seu site bonitinho, você pode testar como ele aparecerá na SERP na Rich Snippet Tool que o Google Webmaster Tools disponibiliza.

Concluindo

Apesar dos microformats não influenciarem diretamente seu rankeamento e o uso deles não garantir que seu site irá aparecer nas SERP, a utilização deles é uma estratégia primordial de SEO. Principalmente no caso do Brasil, onde pouco é encontrado/trabalhado sobre o assunto, sair na frente utilizando o recurso é uma grande vantagem, especialmente em casos de e-commerces, com a possível chegada do Google Products. Além disso, pensando pelo lado do usuário, um resultado com Rich Snippets agregaria muito mais valor à busca e, consequentemente, aumentaria a atenção do usuário para o seu link, melhorando sua experiência.

Mais informações você pode encontrar na Ajuda do Google para Webmasters.

E você? Quais impressões tem sobre essa história? Deixe sua opinião nos comentários, eu adoraria ouvir, pois também estou aprendendo! 😉



34 Comentários to “Rich Snippets, Microformats e como deixar seu site bonito no Google”

  1. Kauê Krischnegg April 7, 2011 at 1:15 pm #

    Muito bom isso,
    Alguém sabe como está funcionando o hProduct no Brasil?
    Ainda não tem funcionalidade?

    Parabéns pelo blog.

    • Renata Tibiriçá April 7, 2011 at 1:38 pm #

      Oi Kauê,

      Que bom que gostou! Nós agradecemos!

      Pelas pesquisas que fiz, o hProduct não funciona no Brasil. Vc pode ver alguns exemplo nesse site > http://microformats.org/wiki/hproduct-examples

      Se testá-los no Rich Snippet Testing Tool ou fizer a busca no Google US vai poder visualizar o hProduct em ação e, fazendo a mesma busca no Google BR, verá que o hProduct não é lido.

      Mas como eu disse, mesmo ainda não funcionando por aqui, é bom a gente já ir se preparando! =)

  2. Alessandro April 7, 2011 at 1:36 pm #

    Não me lembro de ter visto Rich Snippets em resultado de pesquisa aqui no Brasil. Acredito que o mercado é prematuro no assunto SEO e talvez esse seja o motivo.

    Enfim, enquanto isso seguimos tentando influenciar nossos clientes, pois o Brasil tem um espaço gigante pra crescer em SEO.

    Parabéns pelo blog.

    • Renata Tibiriçá April 7, 2011 at 6:06 pm #

      Oi Alessandro,

      Então, todos os exemplos do post podem ser visualizados no Google Br, exceto o do hProducts, mas, como vc disse, é algo muito pouco usado por aqui.

      Obrigada pela visita! =)

  3. Alex Pelati April 7, 2011 at 1:53 pm #

    Bem legal esse artigo, parabéns Renata!

    Vale acrescentar que também há um padrão de microdados para breadcrumbs, o qual funciona muito bem na SERP do Google Brasil.

    Fora isso, acredito que os microformats hCard podem se tornar importantes instrumentos para sites com atuação local, pois, com eles, é possível fornecer dados de geolocalização aos mecanismos de pesquisa.

    Abs!

    • Renata Tibiriçá April 7, 2011 at 6:07 pm #

      Oi Pelati!

      Ótimas dicas complementares! Que bom que gostou do post! =)

  4. Marcelo_Thomaz April 7, 2011 at 1:55 pm #

    Finalmente entendi!!!!!!

    Vou aplicar hoje a noite.

    #gosteidopost

    • Renata Tibiriçá April 7, 2011 at 6:07 pm #

      Que legal que entendeu, Marcelo! Fico feliz em ter ajudado! 😉

  5. Ricardo April 7, 2011 at 2:09 pm #

    E ai galera, tudo bem!?

    primeiro meninas parabens pelo blog. Conteúdo objetivo e de otima qualidade.

    Alessandro sobre rich snippets existem vários sites aplicando, mas como a Renata disse no comentario anterior o google.br ainda nao visualiza todos os tipos de rich snippets.
    Hproducts ainda nao são visiveis mais vc encontra varios Hreviews no google.br

    qnto ao mercado de SEO, 2011 será um ano de crescimento ainda maior que 2010. Agora o que nos resta é manter o foco, estudar sempre e tentar manter essa crescente…

    Abs
    Ricardo

  6. Rafael Furquim April 7, 2011 at 2:37 pm #

    Parabéns pelo post, muito bom mesmo. venho acompanhando o SEO de Saia a algum tempo e não teve nenhuma vez que eu tenha perdido tempo aqui dentro!

  7. Sávio April 7, 2011 at 8:28 pm #

    Parabéns pelo post.

    Acho que é só o segundo texto sobre Microformats bem elaborado que eu já vi.

    Quanto ao hProduct, ele está em fase de teste e como todas as alterações que o Google faz, deve demorar ainda alguns meses pra chegar aqui.

  8. Paula Albocino April 8, 2011 at 1:29 am #

    Oi Re,

    Mais um post complexo e super interessante.
    Parabéns!

    Paula

  9. Eduardo Gasparetto April 14, 2011 at 5:21 pm #

    Eu não havia lido sobre microformats ainda e fiquei impressionado como eles agregam valor e organizam a informação na busca.
    Realmente acho que vai fazer uma grande diferença para quem sair na frente usando microformats.
    Parabens pelo post

  10. André Luís September 21, 2011 at 7:09 pm #

    Bem, amei o nome do site… :-) Apesar do artigo já ser de abril, tinha que deixar qualquer coisa escrita. Muito bom. Parabéns.

  11. Carlos October 22, 2011 at 8:57 am #

    Parabens Renata.

    Sua informações foram muito didáticas,estou começando a conhecer o Rich snippets.
    Mas como você disse,mesmo podendo não influencia nos resultados de busca é sempre bom sair na frente né? rs…

    Em minha loja acabei de instalar um módulo que permite adequar meu site para o Rich Snippts e depois cadastrei as informações necessárias junto ao google,agora é só aguardar.
    Usarei o maior numero de ferramentas possíveis para ficar bem posicionado no Google.
    Em pouco tempo de vida meu site,conseguiu rapidamente aparecer e bem posicionado varios links de produtos.
    Utiliso url amigaveis,google analytics,sitemaps.

    Pra mim o Rich Snippts é muito bem vindo.

    Abraço

  12. Leo MarCos December 16, 2011 at 6:26 pm #

    Vale a pena colocar na página inicial?
    Pergunto isso porque parece que não será ativado em conteúdo principal.

    • Renata Tibiriçá December 16, 2011 at 7:23 pm #

      Oi Leo, acho que nada impede vc de colocar os microformats na sua home, desde que da forma correta, até onde tenho conhecimento…
      Mas vale o teste para ver se funciona ou não, ok?

      Abraços!

      • Carlos December 18, 2011 at 4:42 pm #

        Olá Renata,

        Retorno para dizer que o módulo que coloquei em minha loja virtual,para adequar ao Rich snippets funcionou.

        Se você fizer um teste jogando no google nos termos de buscas relacionados aos meus proodutos,grande parte já estão aparecendo e com certo destaque

        Busque por ex: por “life extension dhea”

        E aliado a outra ferramenta que tenho quue é o Google Shopping,o resultado tem se convertido em vendas.

        • Renata Tibiriçá December 19, 2011 at 11:01 am #

          Oi Carlos! Muito bom saber que de alguma forma pudemos te ajudar com seu trabalho! Fico muito feliz em saber que deu certo! =D

  13. Renato Alexandro February 27, 2012 at 4:24 pm #

    Olá Renata, Parabéns pelo ótimo post.

    Estes microformats já existem há um bom tempo, só não colocaram em prática pra valer, e só agora que o google está associando à sua busca.

    Realmente quem utilizar vai ganhar mais destaque nos resultados orgânicos, e consequentemente mais visitas.

    Abraço

  14. Charles David SEO / WEB April 20, 2012 at 11:46 am #

    Oi Renata muito bom o post.

    Você sabe me dizer de plugin p/ wordpress de rich snippets?

    Como aplico em meu site é através de xml?

  15. diogo July 9, 2012 at 5:00 pm #

    excelente informaçao
    eu ja tenho aprovado a foto a cerca de 2 meses mas não ha meio de aparecer
    nao sei que esta acontecendo

  16. Gustavo August 15, 2012 at 2:56 pm #

    Boa tarde,

    Sou novo no assunto e gostaria de saber em qual local da página que eu devo inserir este código, ou devo criar um html só para isso.

    Obrigado

    • Maurício de Menezes August 28, 2012 at 10:53 am #

      Parabéns pelo artigo! Excelente, e objetivo.

  17. Marco da hospedagem September 19, 2012 at 7:35 pm #

    Olá Renata, voce não comentou nada sobre o schema.org que o Google atualmente está considerando nas indexações dos Microdados?

  18. jorge salvador September 30, 2012 at 6:23 pm #

    Gostei do artigo,mais gostaria de saber se esses codigos funcionam em wordpress e a onde inserir esses codigos
    e parabéns otimo blog !!!!

  19. Francieli January 23, 2013 at 7:18 pm #

    Olá eu consigo inserir Rich Snippets nos meus produtos e nas categorias mas como colocar na pagina inicial?

    Obrigada.

  20. Alonsio Martins May 24, 2014 at 7:43 pm #

    boas dicas!

  21. Henrique Gil July 6, 2014 at 6:00 pm #

    ainda não entendi como posso configurar o PHP do wordpress sem plugins… por mais que leio não acho a informação correta em português

  22. Fernando September 23, 2014 at 2:58 am #

    Olá Renata estou a procura de ajuda para adicionar os rich snippets ao blog de receitas da minha esposa já pedi ajuda no fórum do webmasters mas ninguém soube me ajudar.

    Queria saber se você poderia me instruir em como fazer isto pois já tentei de várias formas e não funcionou.

    Obrigado!

    • Renata April 22, 2015 at 7:28 pm #

      Fernando, Renata…

      …Estou com o mesmo problema. Já vi esse código em vários sites (já que estamos em 2015 e os rich já são largamente utilizados no Brasil, diferentemente da data do post), mas sEMpre que pergunto a pergunta mais simples do mundo:

      “ONDE COLOCAR OS rich snippets NO BLOGGER”, ninguém responde :-(

      Já tentei na página o post, mas aí o código fica aparecendo, no código HTML não tenho ideia de como fazer isso já que é para posts específicos. Seria no começo/fim da head?

      Sinceramente, não entendo o porquê de ao ensinar um novo código tb não dizer ONDE O colocar, senão fica meio sem sentido todo o trabalho de fazer o tutorial. :’-(

      Por favor XARÁ RENATA, me elucide, please.

      abç
      Renata

Trackbacks and Pingbacks

  1. Google » Rich Snippets, Microformats e como deixar seu site bonito no … | Rede SEO - April 12, 2011

    […] bonito no … Este artigo foi publicado automaticamente via feed Rss, Avalie, vote ou comente Fonte As especificações de Microformats, o Google e SEO […]

  2. Google Rich Snippets para Blogs | O Que Da Dinheiro - March 1, 2012

    […] O mais popular dos formatos é sem dúvida o Microformats que as colegas do SEO de Saia explicaram no seu artigo sobre Microformats. Ao nível dos Microformats, os mais populares […]

  3. Compartilhe esta notícia com seus amigos! Agora não dá para perder! - March 5, 2012

    […] O mais popular dos formatos é sem dúvida o Microformats que as colegas do SEO de Saia explicaram no seu artigo sobre Microformats. Ao nível dos Microformats, os mais populares […]

Deixe um comentário