A HTML fornece diversos elementos para que possamos dar algum significado ao conteúdo. Como sabemos, cada tag serve a um propósito e, usá-las de maneira adequada, pensando na semântica web, faz parte do trabalho do desenvolvedor web.
Então, se é preciso exibir uma lista de produtos num site, por exemplo, é possível usar o elemento de listas não ordenadas, ul, para marcar esse conteúdo e dar algum significado à informação. Dizemos ao “interpretadores” do código (sejam browsers, leitores de tela, bots de sistemas de busca, etc): “Isto é uma lista com alguns itens”. Mas, somente com essa marcação, não é possível informar que esta é uma lista de produtos.
Para dar esse passo além na semântica de documentos web é que foi criada a Microdata API.
O problema do significado
Quando uma pessoa faz uma busca por “melhores bancos do brasil”, ela está procurando as melhores instituições financeiras do país ou os melhores móveis para se sentar? Certamente, a pessoa que está fazendo a busca, sabe, mas, será que o buscador a que a busca foi submetida interpretará isso de maneira adequada?
A pessoa que fez essa busca, ao entrar em um dos links da SERP, verá se a página que entrou é sobre instituições financeiras ou móveis. Se ela estiver procurando pelas primeiras e acessar uma página sobre os segundos, entrou em um link que não era de seu interesse devido ao fato de o buscador ter mostrado uma informação errônea no momento de exibir os resultados. Afinal, mesmo com os relativamente inteligentes algoritmos que os melhores buscadores possuem, este tipo de situação ocorre com frequência.
Usando a API de microdata (ou microdados), é possível auxiliar as máquinas (não somente buscadores) a descobrir o significado dos conteúdos nos web sites; é possível informar que uma lista no site é uma lista de produtos; é possível informar que seu site é sobre instituições financeiras, ao invés de móveis. Em suma, através da Microdata API, é possível dar mais significado ao conteúdo.
Conhecendo a Microdata API
A Microdata API tem como objetivo dar mais significado aos documentos web que fazemos. Usando Microdata, é possível informar aos robôs significados além do que uma marcação “tradicional” poderia/conseguiria, agregando maior valor semântico ao conteúdo dos sites, o que, por consequência, traz inúmeros benefícios. E isso é feito através de marcações específicas nos códigos.
Sintaxe da microdata
Basicamente, o modelo de microdata consiste em grupos de pares nome-valor, conhecidos como itens e cada item pode ter 1 ou mais tipos de item; cada item, pode ter 1 ou mais propriedades, que podem ter 1 ou mais valores. Para criar um item, o atributo itemscope é usado e, para adicionar uma propriedade a um item, o atributo itemprop é usado.
É possível usar microdata sem a intenção de reutilização, mas, concordemos, isso não faz sentido. O interessante é termos “especificações” de microdados que podem ser usadas amplamente, por quem quer que seja. Por isso, geralmente se identifica o tipo de item através da indicação de um URI que contenha essa especificação. Usar microdata é usar vocabulários.
Por exemplo, vamos ver a “marcação padrão” de uma ração de gatos num site qualquer:
|
1 2 3 4 5 |
<section> <h1>Siamês</h1> <p>Gato-siamês é uma raça de gato oriental, caracterizada por um corpo elegante e longilíneo e uma cabeça marcadamente triangular.</p> <img src="siames.jpg" alt="Gato siamês"> </section> |
Agora, este mesmo código sendo marcado com microdata:
|
1 2 3 4 5 |
<section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name">Siamês</h1> <p itemprop="desc">Gato-siamês é uma raça de gato oriental, caracterizada por um corpo elegante e longilíneo e uma cabeça marcadamente triangular.</p> <img itemprop="img" src="siames.jpg" alt="Gato siamês filhote"> </section> |
No exemplo, o item “http://example.org/animals#cat” possui 3 propriedades, um “name” (“Siamês”), uma “desc” (“Gato-siamês é uma raça…”) e “img” (“siames.jpg”) e, como vimos, é possível haver mais de um valor por propriedade (inclusive, que seja a indicação de outro “vocabulário”):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">Siamês</h1> <p itemprop="desc">Gato-siamês é uma raça de gato oriental, caracterizada por um corpo elegante e longilíneo e uma cabeça marcadamente triangular. Suas cores, normalmente, são <span itemprop="http://example.com/color">branco</span> (enquanto crias), <span itemprop="http://example.com/color">branco sujo</span> ou <span itemprop="http://example.com/color">creme</span>, com extremidades <span itemprop="http://example.com/color">castanho</span> muito escuro (quase <span itemprop="http://example.com/color">preto</span>), <span itemprop="http://example.com/color">cor de chocolate</span>, e, raramente, <span itemprop="http://example.com/color">azul acinzentado</span> ou <span itemprop="http://example.com/color">lilás acinzentado</span>.</p> <img itemprop="img" src="siames.jpg" alt="Gato siamês filhote"> </section> |
Sem sombra de dúvidas, esta marcação é mais trabalhosa de se fazer e, não raramente, pode haver erros de sintaxe na marcação, devido a relativa complexidade e volume. Existe uma maneira de testar se tudo está nos conformes, a ferramenta Rich Snippets Testing Tool.
Ao inserir uma URL (ou trecho de código HTML, diretamente), é possível ter um preview de rich snippet no Google e, caso o código tenha microdados, ele exibe, de forma organizada, esta estrutura. Como consta na própria página de explicação de Rich Snippets,
Se o Google compreender o conteúdo de suas páginas, podemos criar rich snippets — e informações detalhadas para ajudar os usuários com consultas específicas. Por exemplo, o snippet para uma página de receitas pode mostrar o tempo total de preparo, uma foto e a avaliação dos comentários da receita. O snippet para um restaurante pode exibir a avaliação média e a faixa de preços. Já o snippet para um álbum de músicas pode listar as músicas junto com um link para reproduzir cada uma delas. Esses rich snippets ajudam os usuários a identificar se o site é relevante para a pesquisa e podem resultar em mais cliques em sua página.
Você pode ajudar o Google a revelar essas informações relevantes adicionando uma marcação HTML extra em suas páginas. Essa marcação ajuda o Google a reconhecer certos tipos de dados e a exibi-los de maneira útil nos rich snippets.
Estão entendendo, agora, a diferença que o uso de microdata pode fazer? “O snippet para um restaurante pode exibir a avaliação média e a faixa de preços”?! Isso é muito incrível! Com toda a certeza, a exibição de um snippet dessa qualidade é a diferença entre receber, ou não, mais uma visita em seu site!
Concorda que um snippet de receita como este é muito mais atrativo e informativo que o snippet padrão da SERP do Google? Ele é muito mais útil à pessoa que está buscando, por exemplo, um “Pão de Banana”, apresenta informações que são muito mais relevantes e, no momento, caso você consiga que seu site seja um dos poucos a conseguir um rich snippet desta qualidade, ele é totalmente diferenciado dos demais!
Microdata DOM API
A Microdata API também conta com uma série de métodos JavaScript: Microdata DOM API. Por exemplo, temos o método getItems(), que provê acesso ao itens marcados com microdata. Ele retorna uma NodeList contendo os itens dos tipos especificados (ou todos os itens, se nenhum argumento for passado).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var cat = document.getItems('http://example.org/animals#cat')[0]; var colors = cat.properties['http://example.com/color'].getValues(); var colors_total = colors.length; var result; if (colors_total == 0) { result = 'Cor desconhecida.'; } else if (colors_total == 1) { result = 'Cor: ' + colors[0]; } else { result = 'Cores:'; for (var i = 0; i < colors_total; i += 1) { result += ' ' + colors[i]; } } |
Na verdade, estes são somente alguns exemplos de uso e apresentação da Microdata API. Caso se queira aprofundar no assunto, o que é altamente recomendado, é preciso estudar a documentação oficial da Microdata API.
Schema.org
Como vimos, é mais interessante haver conjuntos de vocabulários comuns, acessíveis e centralizados e prontos para serem usados por qualquer pessoa. Felizmente, isso já existe! Trata-se do Schema.org. O Schema.org é um vocabulário de marcação de microdata compartilhado, que torna mais fácil para nós, pessoal do desenvolvimento web, decidir sobre um esquema de marcação.
Mas, realmente, adianta usar o vocabulário de microdata do Schema.org? Sim, adianta, e muito, já que os melhores buscadores do mundo, tais como Google, Bing, Yahoo! e Yandex, ratificaram o projeto e seus respectivos spiders e SERPs já fazem uso dessa tecnologia! Já foi mostrado que, por exemplo, o Google já faz uso deste tipo de marcação para aprimorar seus snippets e, também, contribui para a melhora do posicionamento nos resultados de busca.
Exemplo de uso do Schema.org
No próprio site do Schema, eles apresentam um exemplo bastante didática para mostrar o conceito por trás dos microdados. Imagine que alguém marca como título principal (h1) “Avatar”. Mas essa página diz respeito àquela imagem que as pessoas utilizam em seus perfis de redes sociais ou ao filme Avatar, de James Cameron? Usando o schema correto, é possível auxiliar aos buscadores a entender melhor do que trata aquele documento.
|
1 2 3 4 5 6 |
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div> |
E, como já vimos anteriormente, é possível, inclusive, fazer “embedded” de outros itens:
|
1 2 3 4 5 6 7 8 |
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>) </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div> |
Usando o vocabulário do Schema.org
O Schema.org possui uma série de “tipos” (itens), cada um com suas respectivas propriedades. Cada um desses tipos é chamado de schema (faz sentido…). Então, para darmos mais significado e complementarmos a semântica de nossos documentos HTML, é preciso percorrer a lista dos diferentes schemas disponíveis e saber o que se pode usar no momento.
Perceba que cada tipo pode ter, também, subtipos, que herdam as características de seus ancestrais e possuem suas próprias. Por exemplo, o schema Movie possui suas propriedades distintas e, também, as propriedades de seus ancestrais CreativeWork e Thing.
Lembrando que, não necessariamente, todas as propriedades, próprias ou herdadas, precisam ser usadas ao mesmo tempo.
Dicas para trabalhar com schemas
Mais é melhor, com exceção de conteúdo oculto
Em geral, quanto mais conteúdo você marcar, melhor. No entanto, como regra geral, você deve marcar apenas o conteúdo que é visível para as pessoas que visitam a página, não o conteúdo oculto.
Tipos esperados versus texto.
Ao navegar entre os vários schemas, você vai notar que muitas propriedades têm “tipos esperados”. Isto significa que o valor da propriedade, por si só, pode ser um item incorporado (embedded). Mas este não é um requisito – não há problema em incluir somente texto ou uma URL. Além disso, sempre que um tipo esperado é especificado, também não há problemas em incorporar um item descendente. Por exemplo, se o tipo esperado é Place, também é permitido incorporar um LocalBusiness.
Usando a propriedade “url”
Algumas páginas da web são sobre um item específico. Por exemplo, você pode ter uma página web sobre uma única pessoa, que você pode marcar com Person.
Já outras páginas podem ter uma coleção de itens descritos nelas. Por exemplo, o site de uma empresa pode ter uma página com a lista de funcionários com um link para uma página de perfil de cada um. Para páginas como esta, com uma coleção de itens, você deve marcar cada item separadamente (neste caso como uma série de Person) e adicionar a propriedade url no link correspondente a cada item, assim:
|
1 2 3 4 5 6 7 8 9 |
<ul> <li itemscope itemtype="http://schema.org/Person"> <a href="jose-das-coves.html" itemprop="url">José das Coves</a> </li> <li itemscope itemtype="http://schema.org/Person"> <a href="joao-da-silva.html" itemprop="url">João da Silva</a> </li> </ul> |
Teste a marcação
Como já comentamos, é interessante passar seu código pela Rich Snippets Testing Tool para testar se tudo está como deveria. Caso algum “esquecimento” tenha ocorrido no momento de marcar os schemas, a ferramenta vai ser de muita valia ao apontar quais equívocos foram esses.
Conclusão sobre Microdata API e schemas
Como os desenvolvedores web devem (ou deveriam) saber, muita coisa neste ramo está mudando (para melhor) com o advento do HTML5. Certamente, uma dessas melhorias é a Microdata API, que permite, a partir de então, darmos mais significado ao conteúdo do site, provendo uma maneira simples e eficiente de melhorar a significação de nossos conteúdos.
Para auxiliar neste propósito, os schemas estão, aí, para centralizar, organizar e prover um vocabulário unificado e acessível de microdata para ser usada e abusado. Não deixe de conferir a documentação completa do Schema.org. E, para clarear ainda mais as explicações, veja o excelente post do pessoal do Loop Infinito sobre microdata e os vocabulários do Schema.org, com direito a gráficos em SVG e tudo o mais! :-D
Tanto por indicações “vindas de cima” – como no caso de os grandes buscadores já darem suporte e incentivar o uso de microdados -, quanto por experiências próprias comprovadas, usar microdata em projetos web, a partir de agora, é praticamente uma obrigação!