Rich snippets: pessoas

Novidade: o novo schema.org permite que você marque uma variedade muito maior de tipos de itens em suas páginas, usando um vocabulário que o Google, a Microsoft e o Yahoo! entendem. Saiba mais. O Google ainda oferece suporte a sua marcação de rich snippets existente.

Sobre dados de contato

Marcar dados de contato e de rede social no corpo de uma página da Web ajuda o Google a reconhecer e exibir melhor suas informações nos resultados de pesquisa.

imagem de um rich snippet de pesquisa do Google representando uma pessoa

Propriedades

Cada contato (pessoa) pode ter várias propriedades diferentes, como nome, cargo e endereço. Você pode usar a marcação de microdados, microformatos ou RDFa para marcar essas propriedades.

O Google reconhece as seguintes propriedades de contato, derivadas do microformato hCard. Quando os nomes de propriedade de microformatos e microdados/RDFa são diferentes, o nome de propriedade de microformatos aparece entre parênteses. O Google também reconhece as propriedades XFNfriend, contact e acquaintance, que são usadas para identificar relações sociais. As propriedades em negrito são obrigatórias. Além disso, pelo menos dois dos seguintes itens devem estar presentes:

  • title ou role
  • affiliation (org)
  • address
Propriedade Descrição
name (fn) Nome
nickname Apelido
photo Um link de imagem
title O cargo da pessoa (por exemplo, gerente financeiro)
role A função da pessoa (por exemplo, contador)
url Link para uma página da Web, como a página inicial da pessoa
affiliation (org) O nome de uma organização com a qual a pessoa está associada (por exemplo, um empregador). Se fn e org tiverem exatamente o mesmo valor, o Google interpretará as informações como referentes a uma empresa ou organização e não a uma pessoa.
friend Identifica uma relação social entre a pessoa descrita e outra pessoa.
contact Identifica uma relação social entre a pessoa descrita e outra pessoa.
acquaintance Identifica uma relação social entre a pessoa descrita e outra pessoa.
address (adr) A localização da pessoa. Pode ter as subpropriedades street-address, locality, region, postal-code e country-name.

Como marcar o conteúdo

O seguinte código HTML descreve Bob "Smithy" Smith.

<div>
Meu nome é Bob Smith, mas todos me chamam de Smithy. Esta é minha página inicial:
<a href="http://www.example.com">www.example.com</a>.
Moro em Albuquerque, Novo México, e trabalho como engenheiro na ACME Corp.
Meus amigos:
<a href="http://darryl-blog.example.com">Darryl</a>,
<a href="http://edna-blog.example.com">Edna</a>
</div>

As seções, a seguir descrevem como marcar este conteúdo usando microdados, microformatos ou RDFa.

Microdados

Este é o mesmo HTML marcado com microdados:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  Meu nome é <span itemprop="name">Bob Smith</span>, 
  mas todos me chamam de <span itemprop="nickname">Smithy</span>.
  Esta é minha página inicial: 
  <a href="http://www.example.com" itemprop="url">www.example.com</a>.
  Moro em 
  <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">Albuquerque</span>, 
    <span itemprop="region">Novo México</span> 
  </span>
  e trabalho como <span itemprop="title">engenheiro</span>
  na <span itemprop="affiliation">ACME Corp</span>.
  Meus amigos:
  <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>, 
  <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Veja como este exemplo funciona:

  • Na primeira linha, <itemscope itemtype="http://www.data-vocabulary.org/Person"> indica que o HTML circunscrito em <div> representa uma pessoa. itemscope indica que o conteúdo de <div> descreve um item e itemtype="http://www.data-vocabulary.org/Person" indica que o item é uma pessoa. person pode ser usado para representar microformatos vcard.
  • O exemplo descreve propriedades da pessoa, como nome, apelido e cargo. Para marcar as propriedades da pessoa, cada elemento com uma dessas propriedades (como <div> ou <span>) recebe um atributo itemprop indicando uma propriedade. Por exemplo, <span itemprop="nickname">.
  • Uma propriedade pode consistir em outro item (em outras palavras, um item pode incluir outros itens). Por exemplo, as informações da pessoa acima incluem um endereço (itemtype="http://www.data-vocabulary.org/Address") com as propriedades locality e region.
  • A propriedade XFN rel="friend" identifica a relação de Bob com Darryl e Edna.
Microformatos

Este é o mesmo conteúdo HTML marcado com o microformato hCard.

<div class="vcard">
   Meu nome é
   <span class="fn">Bob Smith</span>,
   mas todos me chamam de
   <span class="nickname">Smithy</span>.
   Esta é minha página inicial:
   <a href="http://www.example.com" class="url">www.example.com</a>.
   Moro em
   <span class="adr">
      <span class="locality">Albuquerque</span>,
      <span class="region">Novo México</span>
   </span>
   e trabalho como
   <span class="title">engenheiro</span> na
   <span class="org">ACME Corp</span>.
   Meus amigos:
   <a href="http://darryl-blog.example.com" rel="friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="friend">Edna</a>
</div>

Veja como o exemplo funciona.

  • Na primeira linha, class="vcard" indica que o HTML circunscrito em <div> descreve os dados de contato, neste caso, os dados de uma pessoa.

    O microformato usado para descrever informações de contato é chamado hCard e em HTML é chamado vcard. Não é um erro de digitação.

  • O exemplo descreve propriedades do item pessoa, como foto, nome, cargo, organização e endereço. Para marcar as propriedades sobre a pessoa descrita pelo vcard, cada elemento com uma dessas propriedades (como <span> ou <div>) recebe um atributo class indicando uma propriedade. O vcard descreve o nome de Bob (fn), seu cargo (title) e a organização para qual trabalha (org).
  • As propriedades podem conter outras propriedades. No exemplo acima, a propriedade adr descreve o endereço da pessoa e inclui as subpropriedades locality e region).
  • A propriedade XFN rel="friend" identifica a relação de Bob com Darryl e Edna.
RDFa

Veja o mesmo conteúdo HTML marcado com RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
   Meu nome é <span property="v:name">Bob Smith</span>,
   mas todos me chamam de <span property="v:nickname">Smithy</span>.
   Esta é minha página inicial:
   <a href="http://www.example.com" rel="v:url">www.example.com</a>.
   Moro em
   <span rel="v:address">
      <span typeof="v:Address">
         <span property="v:locality">Albuquerque</span>,
         <span property="v:region">Novo México</span>
      </span>
   </span>
   e trabalho como <span property="v:title">engenheiro</span>
   na <span property="v:affiliation">ACME Corp</span>.
   Meus amigos:
   <a href="http://darryl-blog.example.com" rel="v:friend">Darryl</a>,
   <a href="http://edna-blog.example.com" rel="v:friend">Edna</a>
</div>

Veja como o exemplo funciona.

  • O exemplo começa com uma declaração de namespace usando xmlns. Isso indica o namespace em que o vocabulário (uma lista de entidades e seus componentes) é especificado. Você pode usar a declaração xmlns:v="http://rdf.data-vocabulary.org/#" namespace sempre que estiver marcando páginas para definir pessoas, resenhas ou dados de locais. Use uma barra à direita e # (xmlns:v="http://rdf.data-vocabulary.org/#").
  • Além disso, na primeira linha, typeof="v:Person" indica que o conteúdo marcado representa uma pessoa.
  • Cada propriedade da pessoa (como nome ou apelido) é nomeada usando property. O nome da propriedade é prefixado com v: (<span property="v:nickname">).
  • Queremos incluir as informações de endereço de Bob (typeof="v:Address") na entidade typeof="v:Person". Aqui, usamos rel em vez de property para indicar uma relação entre Bob (a entidade v:Person) e este endereço (a entidade v:Address). Em seguida, incluímos <span typeof="v:Address"> para inserir a entidade de endereço real.
  • A propriedade XFN rel="friend" identifica a relação de Bob com Darryl e Edna.