Rich Snippets (customização de resultados no Google)

Artigo que explica o que são rich snippets do Google e como utilizá-los para customizar um resultado de busca neste buscador.

Introdução

Rich Snippets (literalmente traduzido como "fragmentos ricos") é o nome das marcações que podem ser feitas em páginas HTML para agregar mais semântica a elas. O Google utiliza estas marcações tanto para renderizar as páginas de seus resultados de busca de forma diferenciada quanto para auxiliar algumas de suas buscas, como a de notícias, blogs, vídeos, etc. Ou seja, os rich snippets são uma importante ferramenta para transformação da web em uma estrutura mais semântica e compreensível não apenas para humanos, mas também para as máquinas (bots).

Neste artigo, vamos ver quais são os tipos de marcações de rich snippets, como elas podem ser feitas e como podem ser testadas.

Quais os tipos de rich snippets?

Existem vários padrões para marcação de dados. Os mais conhecidos são:

  • microdados (ou microdata provido pelo schema.org)
  • microformatos (ou microformats provido pelo microformats.org)
  • RDFa (especificado pela W3C, mas independente de editor de entidades)

Cada um destes padrões para marcação provê uma sintaxe própria para marcar os dados e também provê uma grande variedade de "entidades" que podem ser marcadas. Veja abaixo onde encontrar as entidades providas por cada um:

Também é útil conhecer a Especificação do RDFa

Embora a lista de entidades seja relativamente grande, nem todas são reconhecidas pelos robôs. O Google, por exemplo, reconhece até o momento apenas marcações para:

  • Pessoas
  • Produtos
  • Eventos
  • Negócios e organizações
  • Músicas
  • Vídeos
  • Receitas culinárias
  • Resenhas

Embora nem tudo ainda seja reconhecido, ter dados marcados semanticamente pode ser útil no futuro.

Como realizar marcações no HTML?

Como dito anteriormente, existem diferentes formas de marcar os dados no seu documento. Usar uma não impede que você utilize outra. Então, quanto mais tipos de marcação usar, mais chances tem de ser reconhecido por diferentes robôs. Porém, é preciso equilibrar o custo/benefício de se aplicar vários tipos de marcação, afinal, você poderá ter um custo adicional nas manutenções.

Aqui no artigo, vamos apenas ver alguns exemplos básicos de cada um dos tipos citados.

Microdados

O primeiro passo para aplicar marcações de microdados é encontrar a entidade mais adequada para o bloco HTML que você deseja marcar. Supondo que você tenha um "artigo" e queira marcá-lo, você pode escolher a entidade Article ou a entidade BlogPosting (artigo de Blog), que é uma extensão de Article.

O segundo passo é incluir o atributo itemscope na tag mais global (para especificar que ela é o escopo de um conjunto de dados da entidade) e o artributo itemtype para apontar para o URI do tipo que você escolheu.

O terceiro passo é incluir o atributo itemprop nos elementos que estão dentro do escopo, para especificar que aquele elemento é uma propriedade (atributo) da entidade.

As propriedades podem requerer que sejam de determinado tipo. Algumas precisam ser numéricas, outras texto, outras URLs, e algumas são uma outra entidade completa (por exemplo, em "Article", a propriedade "author" é do tipo "Person"). Quando um elemento é propriedade de alguma entidade e também é de tipo composto, ele terá os três atributos: itemprop, itemscope e itemtype.

As entidades se assemelham à programação Orientada a Objetos em que existe herança simples. Então quando uma propriedade "X" exige que seu conteúdo seja do tipo "A", significa que ela pode ser do tipo "A" ou qualquer tipo derivado de "A".

Vejamos um exemplo de como ficaria um artigo marcado com microdados:

<article itemscope itemtype="http://schema.org/Article">
    <header>
        <h1 itemprop="name">Título do artigo</h1>
        <meta itemprop="articleSection" content="Dicas" />
        <meta itemprop="interactionCount" content="UserComments:78" />
    </header>
    <div itemprop="articleBody">
        <p>Texto do artigo.</p>
    </div>
    <footer>
        Postado por
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">Rubens Takiguti Ribeiro</span>
        </span>
        em
        <time itemprop="datePublished" datetime="2013-12-01T16:44:00-03:00">
            01/12/2013 às 13:44
        </time>
    </footer>
</article>

Note que algumas informações são "marcadas", mas não são visíveis para o usuário. Elas foram marcadas com auxílio da tag meta do HTML, que não é visível por padrão. Note, ainda, que embora existem duas propriedades "name" ao longo do documento, uma se refere ao nome do autor (pois está dentro do escopo de Person) e a outra se refere ao título do artigo (pois está dentro do escopo de Article). Outra observação é que, para marcar o nome do author, foi preciso introduzir dois níveis de tag span. Isso é comum e normalmente é feito com tags div e span, que são elementos genéricos para delimitar conteúdo.

Microformats

Marcações de microformats utilizam-se principalmente dos atributos class e rel para atribuir semântica aos elementos, além de especificar alguns padrões para representação de valores (como datas). Cada entidade também possui um conjunto de atributos, como nos microdados, mas uma diferença notável é que podemos dizer que um elemento tem o mesmo valor para duas ou mais propriedades de uma entidade. Veja o exemplo abaixo:

<article class="hentry">
    <header>
        <h1 class="entry-title">Título do artigo</h1>
    </header>
    <div class="entry-content">
        <p>Texto do artigo.</p>
    </div>
    <footer>
        Postado por
        <span class="author vcard">
            <span class="fn">Rubens Takiguti Ribeiro</span>
        </span>
        em
        <time class="published" datetime="2013-12-01T16:44:00-03:00">01/12/2013 às 13:44</time>
    </footer>
</article>

A vantagem deste tipo de marcação é a facilidade. Além disso, é possível aproveitar as classes para aplicar estilos com CSS ou comportamentos com JavaScript.

RDFa

As marcações RDFa são relativamente parecidas com os microdados. As diferenças são que elas utilizam outros atributos e também possuem um conjunto diferente de entidades, que são especificadas por diferentes organizações.

O atributo HTML utilizado para demarcar um tipo de entidade é o typeof, que também demarca o escopo da entidade. As propriedades da entidade são marcadas com o atributo HTML property (ou rel em casos de links). Além destes atributos, é possível utilizar HTML Namespaces para não precisar repetir a URL absoluta dos tipos ou o atributo vocab para especificar um escopo de "vocabulário" usado para os tipos de entidades e propriedades.

Veja um exemplo que usa RDFa, mas aproveitando o vocabulário especificado pelo schema.org:

<article vocab="http://schema.org/" typeof="Article">
    <header>
        <h1 property="name">Título do artigo</h1>
        <meta property="articleSection" content="Dicas" />
        <meta property="interactionCount" content="UserComments:78" />
    </header>
    <div property="articleBody">
        <p>Texto do artigo.</p>
    </div>
    <footer>
        Postado por
        <span property="author" typeof="Person">
            <span property="name">Rubens Takiguti Ribeiro</span>
        </span>
        em
        <time property="datePublished" datetime="2013-12-01T16:44:00-03:00">
            01/12/2013 às 13:44
        </time>
    </footer>
</article>

Como testar os rich snippets?

O Google oferece uma ferramenta para testar os rich snippets, mostrando os elementos que foram identificados, as propriedades que estão com problemas e, também, uma prévia de como a página será exibida nos resultados de busca. Você pode usá-la a vontade passando a URL da página a ser testada ou o próprio código HTML a ser testado (útil para fazer testes antes de aplicar as marcações no sistema de produção).

Segue o link para: Ferramenta de testes de Rich Snippets.

Use as marcações com prudência, pois se você utilizar entidades que não representam o conteúdo da página, ela pode ser mal vista pelo Google e, inclusive, penalizada por isso.

3 comentários

Rubens Takiguti Ribeiro (autor do blog) disse...

Olá, Emerson

Você estava procurando alguma informação específica ou apenas leu o artigo aleatoriamente? Reli o artigo e, infelizmente, não percebi nenhuma forma de escrever sobre o assunto de forma mais clara. Se me apontar mais exatamente o que não entendeu, talvez eu possa ajudá-lo.