Talvez você não tenha se dado conta, mas já estamos vivendo uma fase em que nossos clientes não estão querendo aparecer “apenas” na frente no Google, mas sim aparecer melhor nele. Não deixe seu cliente saber disso antes de você.
Mas o que seria aparecer melhor? Para ilustrar, fiz uma busca no Google pelo termo receita de bolo. Não garanto que seu resultado seja o mesmo que o meu, mas, no momento em que fiz a busca, olha só o que veio:
Resultado de Pesquisa Google – termo: receita de bolo
Os dois primeiros resultados apontaram para o canal Tudo Gostoso do UOL. Foram duas receitas diferentes. O terceiro veio do canal Cybercook do Terra. Até aí tudo bem, são canais de dois dos maiores e mais tradicionais portais de conteúdo do Brasil. Nada mais previsível. O curioso é que o quarto resultado, do canal Almanaque Culinário da GNT veio com foto, enquanto o terceiro e o quinto resultados (este último do site M de Mulher, da editora Abril) não trouxeram nada.
Curiosidade
Outro dado interessante, embora até fuja um pouquinho do nosso foco e não esteja presente nesta imagem é que existe um site chamado ReceitasdeBolo.com.br. Embora o Google sempre dê bastante relevância a sites cujo domínio seja o termo pesquisado, mesmo que este tenha sido feito por alguém que nunca ouviu falar em SEO (search engine optimization), neste caso o site que me refiro só apareceu em 10º lugar (o último da primeira página).
Por favor, não estou querendo afirmar que o pessoal que criou esse site não conhece de SEO, na verdade quem sou eu para falar em SEO, mas o fato é que mesmo quando o termo pesquisado é receitas de bolo (no plural) ele sobe apenas para o 8º lugar, o que induz a gente a pensar que se deve justamente ao fato de ter o domínio exato pesquisado pelo usuário. Mas essa conversa é para especialistas em marketing digital debaterem.
Rich Snippets
O foco deste artigo é falar sobre como 3 dos 5 primeiros resultados tiveram destaque e os outros 2 não (pesquisas revelam que a grande maioria das pessoas não passa dessa lista de resultados). Vamos discutir porque o 3º, mesmo sendo o Terra, e apresentando um conteúdo interno muito bom, não obteve o mesmo destaque do que veio logo após. Aliás, a foto do bolo deles no momento em que entrei ganhava para qualquer um dos concorrentes fácil.
É exatamente isso que eu estou chamando de “aparecer melhor”. Será que ninguém iria passar batido no seu resultado para clicar no 4º colocado que apresenta uma foto e uma área de review onde ele fica muito bem conceituado por outras pessoas?
Antes de mais nada, preciso que você conheça a ferramenta Rich Snippets do Google. Entre lá e teste cada uma das URLs dos sites pesquisados e você vai comprovar quem está usando os tais Rich Snippets e quem não está.
Então tá, vamos ao conceito, rich snippets, ou trechos ricos, são trechos de conteúdo HTML que você escreve de uma maneira que informe melhor a uma máquina o assunto sendo tratado. Claro que quando nós colocamos uma foto de um bolo e começamos a falar sobre lista de ingredientes, modo de preparo e etc. nossa tendência natural é achar que se trata de uma receita de bolo, mas uma máquina não pensa (assim).
O que existe nos sites em geral é semântica básica: aqui vem um título, aqui um parágrafo, agora temos uma lista com links, essa lista é a navegação principal, etc, etc, etc. Lendo apenas o que postei neste parágrafo você também não saberia o assunto desse site. Claro que essa semântica é fundamental, mas estamos falando de algo além. É aí onde entram os padrões de vocabulário de conteúdo RDFa, Microformats e Microdata.
Documentos RDF
O Resource Description Framework é um padrão antigo de formatação de conteúdo baseado em vocabulários de dados modelados em sites externos. Em outras palavras, alguns sites catalogam modelos de domínio padrão como pessoas, produtos, ofertas, receitas, filmes, eventos e muito mais, produtores de conteúdo escrevem documentos apontando para algum catálogo de padrões e leitores podem saber do que se trata apenas pela escolha dos modelos de domínio.
Segue um exemplo:
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cd="http://www.recshop.fake/cd#"> <rdf:Description rdf:about="http://www.recshop.fake/cd/Empire Burlesque"> <cd:artist>Bob Dylan</cd:artist> <cd:country>USA</cd:country> <cd:company>Columbia</cd:company> <cd:price>10.90</cd:price> <cd:year>1985</cd:year> </rdf:Description> </rdf:RDF>
Quem já conhece documentos XML e já utilizou namespaces não vai ter dificuldade em entender. XML é uma metalinguagem de marcação de conteúdo. Com ela, é possível criar qualquer dialeto e até mesmo utilizar mais de um no mesmo documento.
Para exemplificar dialetos XML comuns, podemos citar o próprio HTML (sobre tudo na finada versão XHTML, que sugeria a aplicação das regras XML com mais rigor), SVG, RSS, SOAP e muito mais.
O exemplo anterior é sobre um documento que usa dois dialetos. Um é público e conhecido, o próprio RDF, e o outro foi inventando na hora. Na segunda linha, o atributo da tag raiz xmlns:rdf=“URL” informou que qualquer nó (tag, atributo, etc) escrito no documento com o prefixo rdf vai ser encarado como pertencente ao domínio descrito na URL. Já a terceira linha informou a mesma coisa com relação ao prefixo cd.
Afinal o que tem nessas URLs? Necessariamente, nada. Isso vai depender do leitor. Quem ler este documento pode já conhecer as regras desses dois domínios e simplesmente desprezar marcações não condizentes com elas.
Isso é válido para qualquer documento XML, mas o que diz respeito ao RDF é que sugeriu catálogos de tipos de dados comuns em nosso dia-a-dia.
RDFa, o RDF no HTML nosso de cada dia
O RDFa (a de attribute) foi a tecnologia que trouxe essa idéia do RDF para o HTML, criando alguns novos atributos em tags HTML para que possam carregar algum vocabulário de domínios de negócio externos. Veja:
<p vocab="http://schema.org/" typeof="Person"> Meu nome é <span property="name">Jose Berardo</span> e você pode me ligar no número <span property="telephone">81-3465.0032</span> ou visitar meu <a property="url" href="http://www.especializa.com.br/">site</a> </p>
O atributo vocab foi utilizado para apontar para uma URL que cria vocabulário de domínios conhecidos. O atributo typeof definiu qual o vocabulário está sendo utilizado neste parágrafo. As tags span e a tag a internas englobaram valores das propriedades name e telephone. Note o atributo property e a necessidade de criação de marcações. É muito comum usar spans apenas para aplicações de significados RDFa.
Quer ver um documento RDFa 10 centavos mais complexo? Lá vai:
<p vocab="http://schema.org/" typeof="Person" prefix="ov:http://open.vocab.org/terms"> Meu nome é <span property="name">Jose Berardo</span> e você pode me ligar no número <span property="telephone">81-3465.0032</span> ou visitar meu <a property="url" href="http://www.especializa.com.br/">site</a>. Estudei na <span property="ov:UnivSchool">Universidade de Pernambuco</span> </p>
Aqui, utilizamos o prefixo ov para podermos misturar trechos de outro catálogo ao que fala sobre pessoa. Veja que conceitualmente eles estão inter relacionados, mas vêem de endereços distintos.
Microformats
Contemporâneo do RDF-a (meados de 2004), o padrão microformats pregou muito mais simplicidade e ainda por cima centralizou os catálogos em um único site (www.microformats.org).
Por ter sido criado na intenção de seguir o XHTML, os microformats devem ser inseridos em tags através de atributos pré-existentes. Foi aí que as pessoas passaram a adotar o atributo class para aplicações desses micro formatos semânticos.
<p class="vcard"> Meu nome é <span class="fn">Jose Berardo</span>. Pode me chamar de <span class="nickname">Berardo</span>, me ligar no número <span class="telephone">81-3465.0032</span> ou visitar meu <a class="url" href="http://www.especializa.com.br/">site</a>. </p>
Acima, usamos o profile hCard. Ele é a implementação das microformats para o padrão vcard utilizado em arquivos .vcf e .vcard.
Devido à sua simplicidade, as microformats alcançaram uma popularidade maior do que a do RDFa, no entanto não possuem a mesma flexibilidade de sua concorrente.
Microdata
Antes de entrar no assunto, gostaria de recomendar o texto de Almir Filho sobre Microdata. Está excelente e tem a vantagem do bom português.
Em maio de 2009, o engenheiro do Google Ian Hickson, uma das pessoas mais envolvidas com as novas especificações da HTML5, anunciou a criação de mais um padrão de microformatos. A chamada microdata chegou para preencher a lacuna entre a flexibilidade da RDFa e a simplicidade da Microformats e vem sendo considerada como o padrão ser seguido pela HTML5.
Por isso mesmo, merece um pouco mais de nossa atenção, vejamos seus atributos:
- itemscope – Segundo Manu Sporny, um dos principais nomes por trás da RDFa, esta propriedade da Microdata foi quem inspirou a criação posterior do atributo vocab da RDFa que vimos anteriormente. Trata-se de um atributo autocontido (não precisa de valor) que apenas informa que a tag servirá de container (ou escopo) para um determinado conjunto de informações.
- itemtype – Em geral vem na mesma tag marcada com itemscope. Aponta para um endereço público e identifica qual vocabulário o escopo da tag está se referindo.
- itemprop – Junto com as anteriores, forma o trio mais usual de atributos microdata. Representa justamente a propriedade dentro escopo da tag que o valor está se referindo. Em resumo, uma tag vai ter itemscope para delimitar o container, o itemtype determina qual a semântica desse escopo e as tags internas possuem itemprops para informar a propriedade que referenciam.
- itemid – Útil para se identificar uma determinada informação para que possa representar um valor único geral da informação. Toda documentação a respeito repete o exemplo do ISBN do livro.
- itemref – Usada para referenciar uma propriedade definida fora do itemscope atual. Deve conter o valor (ou uma lista de valores separada por espaço) do id da tag que referencia
Vamos a um exemplo:
<div itemscope itemtype="http://schema.org/Organization"> <h1 itemprop="name">Especializa Treinamentos</h1> <h2>Dados para contato</h2> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <h3>Endereço:</h3> <span itemprop="streetAddress">Av. Domingos Ferreira 2391, 12º andar</span>, <span itemprop="postalCode">51020-031</span>, <span itemprop="addressLocality">Recife, Pernambuco</span> </div> Telefone:<span itemprop="telephone">( 81) 3465.0032 </span>, E-mail: <span itemprop="email">contato(arrôba)especializa(ponto)com(ponto)br</span> </div>
Note que algumas marcações, além de serem propriedades, têm seu próprio escopo.
Microdata Javascript (DOM) API
Com marcações microdata, é possível navegar nos nós DOM nos baseando pelas marcações semânticas. Ou seja, o próprio Javascript já está nativamente suportando busca por elementos semânticos, o que facilita bastante o trabalho de muita gente ao construir ferramentas.
Através da chamada ao método document.getItems(url), você poderá obter todos os escopos do vocabulário informado na URL presentes no documento. A partir de cada elemento deste array de objetos retornados é possível navegar por suas propriedades.
Confira o código abaixo:
<script type="text/javascript">
var empresas = document.getItems("http://data-vocabulary.org/Organization");
for (var x in empresas) {
console.log("O nome da empresa é: " + empresas[x].properties['name'].textContent);
}
</script>
O objeto retornado por getItems() foi além de uma simples coleção de nós DOM. Em cada item da coleção ele trouxe no objeto um atributo properties que já aponta para cada tag dentro do escopo que possua itemprop, neste caso, a itemprop name. Para ler seu conteúdo, utilizamos seu atributo textContent. Simples assim, não importa a densidade do seu arquivo HTML.
Infelizmente, este código ainda não é plenamente suportado pelos navegadores. No meu caso só rodou no Opera (nada de Chrome, Firefox ou Safari – ps: não testei no IE).
Vocabulários
Como já disse os vocabulários das Microformats é centralizado e você pode conferir o que ele traz aqui.
Já a RDFa e a Microdata possuem a capacidade de serem escritas apontando para URLs diferentes.
No entanto, o que à primeira vista é uma vantagem, pode se tornar completamente nula se você trabalhar com catálogos pouco conhecidos. Lembre sempre de que você escreve para alguém entender, não adianta formatar seu conteúdo cheio de marcações semânticas desse tipo se ninguém é capaz de reconhecer seu vocabulário.
O site que vem despontando com o grande catálogo de vocabulários reconhecido inicialmente pelo Bing e Yahoo, hoje também reconhecido pelo Google é o Schema.org. Aqui você encontra a lista completa e atualizada de vocabulários dele.
Outros catálogos de vocabulários que você pode se valer:
- Open Vocab.
- Data-Vocabulary. Reconhecido pelo Google em seus Rich Snippets.
No HTML5 Doctor, você pode conferir ao final deste artigo uma série de bons vocabulários em seus respectivos sites catálogos.
Conclusão
Se você estiver se perguntando qual padrão deve utilizar, que sirva de consolo, você não é o único.
O próprio Facebook ao criar o protocolo OpenGraph utilizou o RDF como fonte de inspiração e formatação das meta tags. O RDF também está presente em outras meta tags úteis para SEO como as do projeto Dublin Core.
Por outro lado, o Google vem indicando que a Microdata é a sua opção recomendada. Apesar de ser uma indicação de bastante peso, isso não nos dá toda a certeza de que a Microdata irá prevalecer amanhã. As Microformats conquistaram popularidade pela sua simplicidade e muita ferramenta já as suportam. Sua versão 2.o, ainda em desenvolvimento já promete uma série de melhorias.
Enfim, a briga é boa e se você não pegar a receita vai perder a melhor fatia do bolo.