Microdata ou em português microdados, nos fornece uma sintaxe otimizada de marcação semântica adicional para nossas aplicações web, pra melhorar sua visualização, tendo como principal objetivo ajudar programas automatizados como o Google a compreender e lidar melhor com o conteúdo existente em nossas páginas.
O Microdata possui a mesma função básica do RDFa e Microformats, porém com uma ligeira diferença em sua implementação e uso, já que no HTML5 microdados nos possibilitam adicionar marcações estruturadas em qualquer elemento HTML, sendo não legível e padronizado. Dessa forma, não causam quaisquer problemas com aqueles navegadores que não tenham suporte. Quando os navegadores possuírem suporte total aos novos elementos dos HTML5, incluindo microdados, veremos uma grande quantidade de novas ferramentas que permitiram a coleta e entrada de dados mais rápida, e também a grande evolução de acessibilidade para as pessoas com deficiência.
RDFa é um namespace XML que possibilita adicionarmos uma marcação semântica para páginas XHTML. Ultrapassado, devido ao fato de que utilizando RDFa era necessário fazer uso da sintaxe XHTML que ficou ultrapassada com a evolução da comunidade de desenvolvedores web.
Microformats é uma forma simples de fazer marcação, que utiliza classes CSS para fazer estas marcações semânticas de um documento HTML, sem perder qualquer compatibilidade entre os navegadores. Este método é aceitável, porém exige uma certo quantidade de estrutura e de apresentação.
Utilidades
Vejamos algumas das funcionalidades que podemos obter ao utilizarmos o microdata nos nossos projetos web.
- Podemos marcar a data de um evento, e quando um visitante acessar nossa página o navegador pode oferecer a este visitante colocar aquele evento em seu calendário.
- Podemos adicionar nosso contato e assim que um visitante acessar nosso site, seu navegador o perguntara se ele desejar adicionar nosso contato em sua lista de contatos.
- No caso de termos um blog, podemos fazer um comentário sobre uma loja, restaurante ou qualquer outro local e os mecanismos de busca poderem localizá-los e acessá-los corretamente e trazer a informação de quantos usuários procuraram por esse local.
- Podemos elaborar um currículo em nosso blog e marcá-lo, dessa forma, quando acessarmos um site de cadastro de currículo, poderemos apontar para essa nossa página e assim extrair todos os dados necessários.
Mesmo que em primeiro plano esses usos não sejam tão óbvios, ao decorrer do surgimento de mais dados em nossas páginas para serem pesquisados isso se mostra mais útil, já que microdata possibilita facilmente indicar em que local de nossas páginas estão os dados.
Não precisamos ter o trabalho de reconstruir toda nossa página para poderemos adicionar microdados a ela, no máximo teremos que adicionar alguns <span> em partes de informações necessárias, ou então apenas mantermos a informações na página e em seguida apenas indicarmos como serão extraídas. Microdados garantem que os dados estejam tão fáceis de localizar quanto possível. Levando em conta que não temos como atualizar algumas informações sobre a página e inesperadamente esquecermos de atualizar a entrada correspondente de alguns dados estruturados em outro lugar.
Atributos
O microdata possui cinco atributos HTML que podem ser utilizados em qualquer tag HTML5. Entretanto, desses cincos atributos disponíveis, os mais utilizados pelos desenvolvedores são: itemscope, itemtype e itemprop. Os atributos RefElem e itemid são dificilmente utilizados e desnecessários para os casos de uso de microdados mais comuns.
Itemscope: É um atributo binário, ele não necessita de um sinal de igual ou um valor ligado a ele. Para utilizá-lo basta atribuirmos ele a qualquer elemento HTML e então todas as informações que forem colocadas dentro desse elemento serão relacionadas com esse atributo.
Itemprop: Como vimos, o Itemscope cria um container, onde dentro desse container podemos adicionar muitos dados e queremos expressar esses dados de uma forma que seja compreensiva pelas máquinas, ou seja, programas automatizados. Para isso utilizamos o atributo Itemprop, para indicarmos partes desses dados. O Itemprop recebe como valor o nome da propriedade a qual ele se trata.
Mesmo que já tenhamos criado nosso container e especificado em uma parte dos dados a que tipo de dados se referia, como é que podem os programas automatizados compreenderem isto? Para isso o microdata nos disponibiliza várias maneiras fáceis de indicarmos exatamente que tipo de dados estamos especificando, tomando como base o elemento ao qual atribuirmos o itemprop.
Suponhamos que o itemprop seja atribuído ao elemento <meta>, os dados serão os que estão dentro do elemento . Podemos fazer uso disso quando tivermos a necessidade de incluir alguns dados que não sejam verdadeiros no texto da nossa página.
E os elementos <a>, <area>, <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> e <vídeo>. Os dados são os contidos na URL contida no complemento desses elementos dentro do href ou src. Com isso podemos inserir uma imagem a um currículo nosso e assim os programas automatizados saberão do que aquele link se trata, sem a necessidade de termos que escrever o link em nossa página.
Outra coisa que devemos ressaltar é que os dados são sempre aquilo que está dentro do texto do elemento.
Itemtype: Utilizamos para definirmos um nome de uma certa parte do nossos dados. Mas como vamos especificar aos programas automatizados qual o tipo de dados que aquela parte se refere. Supondo que digitamos um comentário, como que o computador iria identificar que você digitou esse comentário? Ele tentaria identificar o que fizemos com base no tipo de itemprop que especificamos ou pelo texto em nossa página. Mas para facilitarmos essa compreensão pelo computador podemos especificar manualmente usando o atributo itemtype.
Já que podemos atribuir o itemtype em qualquer elemento que já contenha o itemscope, o valor que vamos utilizar no atributo itemtype pode ser qualquer coisa, um nome, uma URL ou um número único.
Itemid: Em alguns tipos de dados queremos que realmente fique claro sobre o que estamos nos referindo. Suponhamos que escrevemos um artigo em nosso site ou blog e fizemos marcações microdata, e desejamos que seja de fácil localização aos mecanismos de busca para localizar exatamente o que escrevermos quando um usuário realizar uma buscar por aquele assunto. O atributo itemid tem exatamente essa função de agilizar a busca, pois se formos contar com a busca em nosso vocabulário que definimos no itemtype, ele pode percorrer um grande caminho até chegar ao assunto pesquisado.
RefElem: Podemos utilizar esse atributo para fazermos referência a elementos que não estão dentro do nosso container, porém esses elementos contém no itemprop dados que podem ser incluídos. Colocamos o refelem dentro do elemento que contém o atributo itemscope e definimos uma lista com os ids, separados por espaços, dos elementos que desejamos incluir.
Conclusão
Com este artigo conseguimos conhecer os atributos para utilização do microdata. Podemos perceber que sua sintaxe é simples, porém pode nos proporcionar funcionalidades bastante úteis.
Assim finalizamos mais este artigo, espero que tenha sido de fácil compreensão a todos. Fiquem à vontade para deixarem seus comentários, criticas e sugestões.
Um abraço a todos, e até ao próximo artigo.
