{"id":423,"date":"2019-08-29T08:00:35","date_gmt":"2019-08-29T08:00:35","guid":{"rendered":"http:\/\/drcode.com.br\/blog\/?p=423"},"modified":"2019-08-30T01:52:26","modified_gmt":"2019-08-30T01:52:26","slug":"microdata-e-microdados-o-que-sao","status":"publish","type":"post","link":"https:\/\/drcode.com.br\/blog\/html\/microdata-e-microdados-o-que-sao\/","title":{"rendered":"Microdata e Microdados, o que s\u00e3o"},"content":{"rendered":"\r\n

Se voc\u00ea \u00e9 um desenvolvedor web antenado nas novidades, j\u00e1 deve ter ouvido falar sobre microdata<\/strong>, ou dados estruturados. Hoje irei falar um pouco mais sobre o que s\u00e3o microdados<\/strong>, como eles funcionam e como usar na pr\u00e1tica!<\/span><\/p>\r\n

Afinal o que s\u00e3o microdados e dados estruturados?<\/span><\/h2>\r\n

Segundo a wikip\u00e9dia<\/a>, microdata<\/strong> nada mais s\u00e3o que tags ou atributos nas tags do HTML5<\/a> que ajudam os buscadores a entender mais sobre o assunto que se trata, ou seja, microdata<\/strong> tr\u00e1s mais sem\u00e2ntica aos olhos dos buscadores. A grande vantagem de utilizar microdata no html5<\/strong> \u00e9 que podemos adiciona-las em qualquer tags do nosso documento, j\u00e1 que os navegadores n\u00e3o iram renderizar elas como elementos leg\u00edveis ao usu\u00e1rio.<\/span><\/p>\r\n

Por que usar microdata?<\/h2>\r\n

Voc\u00ea agora talvez esteja se perguntando, por que usar\u00a0 <\/span>microdados<\/strong> ou quais as vantagens de usar microdata em suas p\u00e1ginas e aplica\u00e7\u00f5es?<\/strong> Microdados trar\u00e1 uma infinidade de benef\u00edcios a sem\u00e2ntica<\/strong> do seu conte\u00fado perante aos buscadores, como por exemplo, ao estruturar os dados<\/strong> e informar que aquele conte\u00fado se trata de um evento que acontecer\u00e1, alguns navegadores e dispositivos mais modernos poderiam sugerir adicionar aquela data e aquele evento em seu calend\u00e1rio. Podemos definir os dados estruturados<\/strong> como sendo um contato, quando algu\u00e9m acessar aquele dado, o navegador poder\u00e1 sugerir adicionar o contato em quest\u00e3o a lista de contatos do usu\u00e1rio.<\/span><\/p>\r\n

\"Print
Print do google shopping<\/figcaption><\/figure>\r\n

 <\/p>\r\n

O shopping do google por exemplo, s\u00f3 funciona se houver a presen\u00e7a de microdados no c\u00f3digo da p\u00e1gina do produto.<\/strong><\/span><\/p>\r\n

Como usar microdata<\/span><\/h2>\r\n

Beleza, entendi o que s\u00e3o microdata<\/strong> e para que servem esses dados estruturados<\/strong>, como eu posso utilizar?<\/span><\/p>\r\n

Para utilizar microdata<\/strong> ou microdados<\/strong> \u00e9 bem simples. N\u00e3o precisamos reescrever todo o c\u00f3digo nem repensar a sem\u00e2ntica, mudar posi\u00e7\u00f5es, e depois termos que estilizar tudo de novo. O m\u00e1ximo que talvez tenhamos que fazer \u00e9 adicionar alguns <span><\/code> para definirmos alguns dados mais detalhadamente.<\/span><\/p>\r\n

Os microdados<\/strong> funcionam a partir de atributos nas tags do HTML, com isso os buscadores conseguem identificar o conte\u00fado dentro daquela tag.<\/span><\/p>\r\n

Atributos<\/h2>\r\n

itenscope<\/strong>: \u00c9 um atributo bin\u00e1rio, n\u00e3o necessita de um valor. Basta apenas colocarmos no elemento e automaticamente todas as informa\u00e7\u00f5es filhas do elemento s\u00e3o relacionadas.<\/span><\/p>\r\n

itemtype<\/strong>: Atributo que necessita de um valor, este valor deve ser uma biblioteca, ou vocabul\u00e1rio, informando sobre o que \u00e9 o conte\u00fado dentro do bloco. (Irei explicar mais abaixo nos exemplos pr\u00e1ticos)<\/span><\/p>\r\n

itemprop<\/strong>: Se o itemscope \u00e9 o que cria a caixa, o itemtype diz sobre o que se trata, o itemprop recebe o valor de uma propriedade. (Mais abaixo iremos entender)<\/span><\/p>\r\n

M\u00e3o na massa<\/h2>\r\n

Vamos supor que voc\u00ea tenha um blog de filmes, e ele possua esta estrutura:<\/span><\/p>\r\n