Microdados e Rich Snippets

A utilização de dados estruturados melhora a forma como os mecanismos de busca interpretam o seu conteúdo e ajuda os usuários a encontrarem o que estão procurando. Além disso, o Google pode utilizar esses dados para uma demonstração mais rica (rich snippets) dos resultados em sua SERP.

Geralmente, ao desenvolver um site, o programador guarda as informações em um banco de dados de forma estruturada. Por exemplo, no seu site, você mantém em um banco de dados os cadastros dos seus clientes (nome, e-mail, sexo e endereço). Porém, ao recuperar esses dados e exibí-los utilizando HTML, pode sair algo assim:

<div>
  <img src="www.seusite.com.br/abece-nogueira.jpg" />
  <h1>Abecê Nogueira</h1>
  E-mail: [email protected]
  Sexo: Sim, por favor =D
  Endereço: Rua dos Bobos, nº 0
</div>

Pronto. Toda aquela estrutura de dados se perdeu. Agora ficou mais difícil para os buscadores entenderem o que realmente significa cada informação.

Schema

O schema.org é um site que fornece vários esquemas (ou padrões) que os desenvolvedores podem utilizar para estruturar os dados. Esses esquemas, por convenção, são reconhecidos pelos principais buscadores, como Google, Bing, Yahoo! e Yandex.

A utilização de dados estruturados no HTML da página beneficia significativamente o “acesso” dos buscadores a essa estrutura dos dados, facilita seu entendimento e possibilita a exibição de resultados de busca mais ricos aos usuários. Vou melhorar esse código:

<div itemscope>
  <img src="www.seusite.com.br/abece-nogueira.jpg" />
  <h1>Abecê Nogueira</h1>
  E-mail: [email protected]
  Sexo: Masculino
  Endereço: Rua dos Bobos, nº 0
</div>

Vamos analisar:

Na primeira linha, eu adicionei um “itemscope”. Isso mostra o que é assunto. Preste atenção: “o que” é o assunto e não “qual” é o assunto. Até agora, só indiquei aonde está o “escopo”. Dessa forma, a marcação ainda não está muito útil, pois não está explícito qual é o tipo do assunto (se é uma pessoa, filme, lugar, etc).

Vamos especificar então:

<div itemscope itemtype=”http://www.schema.org/Person”>
  <img src="www.seusite.com.br/abece-nogueira.jpg" />
  <h1>Abecê Nogueira</h1>
  E-mail: [email protected]
  Sexo: Masculino
  Endereço: Rua dos Bobos, nº 0
</div>

Esse código diz: “Ei Google, essas informações são referentes a uma pessoa, beleza?”. Especifiquei isso utilizando itemtype=”URL-DO-TIPO” (no caso, Person, ou “Pessoa”). Existe uma lista com os tipos que o Schema fornece para usarmos como referência.

Já ficou mais legal, né? Mas com certeza ainda pode ficar melhor. Nesse mesmo endereço que utilizei no “itemtype” (http://www.schema.org/Person), tem uma lista com todas as propriedades que um dado do tipo “Person” pode ter, como nome, descrição, foto, data de nascimento e e-mail. Vamos adicionar essas propriedades então:

<div itemscope itemtype=”http://www.schema.org/Person”>
  <img itemprop="image" src="www.seusite.com.br/abece-nogueira.jpg" />
  <h1 itemprop="name">Abecê Nogueira</h1>
  E-mail: <span itemprop="email">[email protected]</span>
  Sexo: <span itemprop=”gender”>Masculino</span>
  Endereço: <span itemprop=”address”>Rua dos Bobos, nº 0</span>
</div>

Lindo! Agora os mecanismos de busca conseguem “mapear” corretamente o que estamos falando (itemtype Person) e suas propriedades (itemprop=”name”, itemprop=”email”, e por aí vai).

Só uma observação: eu escolhi utilizar a tag <span> para a maioria das marcações dos “itemprops”, pois esse elemento não altera a forma como o navegador apresentará as informações. As marcações podem ser utilizadas em outras tags, como por exemplo <img> e <h1> (como eu já utilizei no exemplo).

Para um entendimento mais amplo do assunto, veja a documentação oficial do schema.org.

Rich Snippets

Como você é o dono do seu site, é claro que conhece todo o conteúdo e o que cada página representa (dããããã). Porém, seu usuário pode não saber. Para não termos problema, o Google (e a maioria dos buscadores) tenta passar uma pequena demostração do que o usuário encontrará naquele link – os famosos snippets:

Exemplo de Snippet na SERP do Google

Agora vamos ver um exemplo de um rich snippet:

Exemplo de Rich Snippet na SERP do Google

Utilizando dados estruturados, o Google consegue entender melhor o seu conteúdo e usará para melhorar o “preview” dos resultados de busca. Nesse caso, podemos ver os comentários que os usuários fizeram sobre o produto (26 resenhas). Sem dúvida, esse tipo de snippet chama muito mais atenção.

O Google sugere a utilização de microdados para essa marcação. Além do schema.org, que já demostrei nesse post, também podemos utilizar o Data-Vocabulary como referência. Porém, o Google também aceita microformatos e RDFa. Para mais detalhes, veja a nota oficial do Google sobre rich snippets.

Existe uma ferramenta para testar como o Google está “traduzindo” a sua marcação de dados estruturados, a Rich Snippets Testing Tool.

Outras possibilidades com snippets do Google

Além da exibição de rich snippets, podemos configurar para que o Google mostre uma foto do autor de determinado artigo, por exemplo.

Exemplo de Snippet mostrando a foto do autor

Para saber como implementar, veja o post que escrevi sobre Author Rank. Além da utilização de dados estruturados, também podemos facilitar a vida dos mecanismos de busca utilizando boas práticas de desenvolvimento.

10 Comentários

  1. Pingback: A importância do texto âncora para o SEO :: Mochila Binária

  2. Buscando um guia onde eu pudesse entender melhores esses conceitos, acabei encontrando este blog que esclareceram todas as minhas dúvidas sobre o assunto em um único artigo. Adorei o site, super objetivo e explicado o tema abordado.
    Parabéns.



  3. Fabio Lima

    André: SENSACIONAL o post cara! muito obrigado mesmo! ;)
    (me indicou lá no entusiastas…) Abraço



    • André Mazzitelli

      ahahaha grande Fábio Lima! Como estava dizendo no grupo, é sempre legal visitar a documentação do schema.org e ver os diferentes “schemas” que ele oferece. Por exemplo, para exibir rich snippets com informações de reviews sobre um produto, informações e preços, você pode usar os schemas “Review”, “Product” e “Offer”. E assim vai… =D



  4. Cara, muuito legal esse artigo.
    Parabéns pelo blog.
    Abraço



  5. Ótimo post André!
    Fui muito útil, obrigado.
    Abs.



  6. André

    Obrigado pela explanação.
    Rica e de fácil entendimento.



  7. Leando

    Leandro,
    Bom dia.

    Li seu artigo (que por sinal é muito interessante, parabéns), e tenho uma pequena dúvida:

    As propriedades de um ItemScope, devem estar necessariamente dentro de um ?

    Pergunto pelo seguinte… trabalho com um site de anúncios e o mesmo traz a informação do banco de dados, sendo estruturado da seguinte forma:

    Nome:
    Idade:
    Telefone:

    [...]

    Gostaria de saber se posso incluir a propriedade do Scope dentro de um DIV?

    Nome:
    Idade:
    Telefone:

    [...]

    Grato,
    Leandro.



    • André Mazzitelli

      Olá Leandro! Não sei se entendi muito bem a sua pergunta, pois uma frase importante saiu assim ó:

      “As propriedades de um ItemScope, devem estar necessariamente dentro de um ?”

      Você quis dizer dentro de algum elemento específico? “Dentro de um” o que?

      Quanto a sua outra pergunta: “Gostaria de saber se posso incluir a propriedade do Scope dentro de um DIV?”, pode sim! Pode usar em qualquer elemento =)



  8. Muito bom seu artigo! Instrutivo, com um toque de humor, bem redigido e tratando de um tema que para muitos ainda é desconhecido. Parabéns!
    A propósito… Fiz um post com uma compilação das 100 melhores ferramentas de SEO. Ficaria muito grato com a sua avaliação! http://cursodeformacaoseo.griff.art.br/seo-ferramentas-de-analise/

    Abraço!



Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Voltar

Recent Activity