HTML - Microdados

Introdução ao Microdata

Microdata é uma especificação que permite adicionar dados estruturados aos seus documentos HTML. Ela oferece uma maneira de rotular conteúdo com tipos específicos de informação, como produtos, eventos, avaliações ou receitas. Ao adicionar Microdata ao seu HTML, você torna seu conteúdo mais compreensível para mecanismos de busca, rastreadores da web e outros aplicativos que processam dados estruturados.

O uso de Microdata no seu HTML oferece diversos benefícios. Ajuda os mecanismos de busca a entender melhor o conteúdo das suas páginas web, o que pode levar a melhores classificações nas buscas e resultados mais relevantes. O Microdata também permite que os mecanismos de busca exibam rich snippets, que são listagens aprimoradas que incluem informações adicionais, como avaliações em estrelas, preços ou datas. Os rich snippets fazem suas páginas web se destacarem nos resultados de busca e podem aumentar as taxas de clique.

O Microdata funciona com HTML usando atributos para anotar elementos com tipos específicos de informação. Para adicionar Microdata ao seu HTML, você usa os atributos itemscope, itemtype e itemprop. O atributo itemscope indica que o conteúdo dentro de um elemento é sobre um item específico. O atributo itemtype especifica o tipo de item sendo descrito, usando uma URL que define o vocabulário. O atributo itemprop é usado para identificar as propriedades de um item, como seu nome, descrição ou preço.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nome do Produto</h1>
  <p itemprop="description">A descrição do produto vai aqui.</p>
  <span itemprop="price">R$99,99</span>
</div>

O elemento div é marcado com o atributo itemscope, indicando que contém informações sobre um item. O atributo itemtype especifica que o item é um produto, usando o vocabulário do schema.org. Os atributos itemprop são usados para identificar o nome, a descrição e o preço do produto.

Ao adicionar Microdata ao seu HTML, você permite que mecanismos de busca e outros aplicativos extraiam dados estruturados das suas páginas web, levando a uma melhor visibilidade nas buscas, rich snippets e uma experiência do usuário aprimorada.

Sintaxe de Microdados

A sintaxe de microdados tem três atributos principais: itemscope, itemtype e itemprop. Esses atributos definem a estrutura e o significado dos dados dentro dos elementos HTML.

O atributo itemscope indica que o conteúdo dentro de um elemento é sobre um item específico. É um atributo booleano, o que significa que não precisa de um valor. Ao adicionar o atributo itemscope a um elemento, você cria um novo item que pode ter suas próprias propriedades.

<div itemscope>
  <!-- O conteúdo do item vai aqui -->
</div>

O atributo itemtype é usado junto com o atributo itemscope para especificar o tipo de item sendo descrito. Ele recebe uma URL como valor, que aponta para um vocabulário que define o tipo do item. O vocabulário mais comumente usado é o Schema.org, que tem muitos tipos de itens, como Person, Product, Event e outros.

<div itemscope itemtype="https://schema.org/Product">
  <!-- O conteúdo do produto vai aqui -->
</div>

O atributo itemprop identifica as propriedades de um item. Ele é adicionado a elementos dentro de um itemscope para especificar o nome e o valor de cada propriedade. O valor do atributo itemprop corresponde a uma propriedade definida no vocabulário especificado pelo itemtype.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nome do Produto</h1>
  <p itemprop="description">A descrição do produto vai aqui.</p>
  <span itemprop="price">R$ 99,99</span>
</div>

Os microdados também permitem aninhar itens uns dentro dos outros. Isso é útil para estruturas de dados complexas que incluem vários itens com suas próprias propriedades. Para aninhar itens, você adiciona outro atributo itemscope dentro de um itemscope existente.

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">João Silva</h1>
  <p itemprop="jobTitle">Engenheiro de Software</p>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Rua Principal, 123</span>
    <span itemprop="addressLocality">Qualquer Cidade</span>,
    <span itemprop="addressRegion">SP</span>
    <span itemprop="postalCode">12345-678</span>
  </div>
</div>

Neste exemplo, o item Person inclui uma propriedade de endereço, que é um item do tipo PostalAddress com suas próprias propriedades, como streetAddress, addressLocality, addressRegion e postalCode.

Vocabulários Comuns de Microdados

Ao adicionar Microdados ao seu HTML, você precisa usar um vocabulário que defina os tipos de itens e suas propriedades. Um vocabulário é um conjunto de definições para tipos de itens e suas propriedades. Existem vários vocabulários comuns usados com Microdados, incluindo Schema.org, Dublin Core e Open Graph Protocol.

O Schema.org é o vocabulário mais amplamente usado para Microdados. Foi criado por uma colaboração de grandes mecanismos de busca, incluindo Google, Bing, Yahoo! e Yandex. O Schema.org fornece uma coleção de vocabulários compartilhados que os webmasters podem usar para marcar suas páginas de maneiras que podem ser compreendidas pelos principais mecanismos de busca.

O vocabulário do Schema.org inclui uma ampla gama de tipos de itens, como Pessoa, Organização, Lugar, Produto, Evento, Avaliação e muitos outros. Cada tipo de item tem um conjunto de propriedades que podem ser usadas para descrever o item em detalhes. Por exemplo, um item Produto pode ter propriedades como nome, descrição, preço, marca e avaliação.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Laptop Acme</h1>
  <p itemprop="description">Um laptop de alto desempenho para trabalho e lazer.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">$1.199,99</span>
    <span itemprop="priceCurrency">USD</span>
  </span>
</div>

Dublin Core é outro vocabulário usado com Microdados, particularmente no contexto de metadados para recursos digitais. O vocabulário Dublin Core inclui propriedades como título, criador, assunto, descrição, editor, data, tipo, formato e identificador. Este vocabulário é frequentemente usado por bibliotecas, museus e outras organizações que gerenciam ativos digitais.

<div itemscope itemtype="http://purl.org/dc/terms/">
  <h1 itemprop="title">O Grande Gatsby</h1>
  <span itemprop="creator">F. Scott Fitzgerald</span>
  <span itemprop="date">1925</span>
  <span itemprop="format">Impresso</span>
  <span itemprop="identifier">ISBN: 978-0-123-45678-9</span>
</div>

O Open Graph Protocol, criado pelo Facebook, é um vocabulário usado para descrever o conteúdo de páginas da web para compartilhamento em mídias sociais. Ele inclui propriedades como og:title, og:type, og:url, og:image e og:description. Quando você adiciona Microdados do Open Graph às suas páginas, as plataformas de mídia social podem usar essas informações para criar visualizações ricas quando seu conteúdo é compartilhado.

<head>
  <meta itemprop="og:title" content="Minha Página Web">
  <meta itemprop="og:type" content="website">
  <meta itemprop="og:url" content="https://www.meusite.com/">
  <meta itemprop="og:image" content="https://www.meusite.com/imagem.jpg">
  <meta itemprop="og:description" content="Uma descrição da minha página web.">
</head>

Ao escolher um vocabulário para seus Microdados, considere o tipo de conteúdo que você tem e o público que deseja alcançar. O Schema.org é um ótimo vocabulário para uso geral que os mecanismos de busca entendem bem, enquanto o Dublin Core é melhor para recursos digitais em contextos acadêmicos ou de patrimônio cultural, e o Open Graph Protocol é ideal para conteúdo compartilhado em plataformas de mídia social.

Implementando Microdados

Para implementar Microdados em seu HTML, adicione os atributos itemscope, itemtype e itemprop aos elementos corretos. Identifique o item ou itens principais em sua página, como um produto, evento ou pessoa. Em seguida, adicione o atributo itemscope ao elemento que contém todas as informações sobre esse item.

<div itemscope>
  <!-- Informações do produto aqui -->
</div>

Depois, adicione o atributo itemtype ao mesmo elemento, indicando o vocabulário e o tipo de item que você deseja usar. Por exemplo, se você estiver descrevendo um produto usando o vocabulário Schema.org, usaria o seguinte itemtype:

<div itemscope itemtype="https://schema.org/Product">
  <!-- Informações do produto aqui -->
</div>

Agora, adicione o atributo itemprop a cada elemento que representa uma propriedade do item. O valor do atributo itemprop deve corresponder a uma propriedade do vocabulário especificado no itemtype.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nome do Produto</h1>
  <img src="imagem-produto.jpg" itemprop="image" alt="Imagem do Produto">
  <p itemprop="description">A descrição do produto vai aqui.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">R$ 99,99</span>
    <span itemprop="priceCurrency">BRL</span>
  </span>
</div>

Além de usar Microdados diretamente em seu HTML, você também pode usá-los com JSON-LD (JavaScript Object Notation for Linked Data). JSON-LD é uma forma de codificar dados vinculados usando JSON, e pode ser usado para fornecer dados estruturados de uma maneira fácil para os mecanismos de busca analisarem.

Para usar Microdados com JSON-LD, inclua um elemento script com o atributo type definido como "application/ld+json". Dentro do elemento script, defina seus dados estruturados usando a sintaxe JSON-LD.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Nome do Produto",
  "image": "imagem-produto.jpg",
  "description": "A descrição do produto vai aqui.",
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "BRL"
  }
}
</script>

Ao implementar Microdados, siga estas melhores práticas para obter o máximo de benefícios:

Microdados e SEO

Microdados ajudam os mecanismos de busca a entender melhor o conteúdo das suas páginas da web. Mecanismos de busca como Google, Bing e Yandex usam microdados para extrair dados estruturados do seu HTML, o que pode melhorar suas classificações e visibilidade nas buscas.

Quando os mecanismos de busca rastreiam suas páginas da web, eles procuram por microdados para entender o significado e o contexto do seu conteúdo. Ao usar microdados para marcar informações importantes, como detalhes de produtos, informações de eventos ou avaliações, você facilita o processamento e a interpretação do seu conteúdo pelos mecanismos de busca. Isso pode levar a melhores classificações nas buscas para consultas relevantes, já que os mecanismos de busca podem associar seu conteúdo às pesquisas dos usuários com mais confiança.

Um dos principais benefícios dos microdados para SEO é o potencial de gerar rich snippets nos resultados de busca. Rich snippets são listagens de busca aprimoradas que incluem informações extras, como classificações por estrelas, preços ou datas, junto com o título padrão, URL e descrição. Quando você marca seu conteúdo com microdados, os mecanismos de busca podem usar essas informações para exibir rich snippets para suas páginas da web.

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Nome do Produto</h1>
  <p itemprop="description">A descrição do produto vai aqui.</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">R$99,99</span>
  </span>
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4,5</span> estrelas baseado em
    <span itemprop="reviewCount">100</span> avaliações
  </div>
</div>

Neste exemplo, a marcação de microdados inclui informações sobre o nome do produto, descrição, preço e classificação média. Os mecanismos de busca podem usar esses dados para exibir um rich snippet com a classificação por estrelas e o número de avaliações, tornando a listagem de busca mais atrativa e informativa para os usuários.

Rich snippets podem aumentar suas taxas de cliques nos resultados de busca, pois tornam suas listagens mais destacadas e fornecem mais informações sobre seu conteúdo aos usuários. Taxas de clique mais altas podem, por sua vez, levar a melhores classificações nas buscas, já que os mecanismos de busca consideram o engajamento dos usuários como um sinal de relevância e qualidade.

Para maximizar os benefícios de SEO dos microdados, é importante usá-los corretamente e de forma consistente em todo o seu site. Siga as melhores práticas para implementação de microdados, como usar tipos e propriedades de itens específicos, corresponder os microdados ao conteúdo visível e manter seus microdados atualizados. Teste seus microdados usando ferramentas como o Teste de Dados Estruturados do Google para garantir que estejam livres de erros e possam ser analisados corretamente pelos mecanismos de busca.

Ferramentas e Testes de Microdata

Ao trabalhar com Microdata, existem várias ferramentas disponíveis para ajudar você a gerar, validar e testar sua marcação. Essas ferramentas podem simplificar o processo de adicionar Microdata ao seu HTML e identificar erros ou problemas antes que suas páginas sejam publicadas.

Geradores de Microdata são ferramentas que ajudam você a criar marcação Microdata sem escrever o código manualmente. Essas ferramentas geralmente fornecem uma interface amigável onde você pode inserir seus dados e selecionar os tipos de itens e propriedades apropriados. Alguns geradores populares de Microdata incluem:

Esses geradores podem economizar seu tempo e esforço, especialmente se você é novo em Microdata ou tem muito conteúdo para marcar. No entanto, é importante revisar a marcação gerada para garantir que ela reflita com precisão seu conteúdo e siga as melhores práticas.

Validadores de Microdata são ferramentas que verificam sua marcação Microdata em busca de erros ou inconsistências. Eles podem ajudar você a identificar problemas como tags ausentes ou incorretamente aninhadas, tipos de itens ou propriedades inválidas, ou problemas de formatação. Alguns validadores populares de Microdata incluem:

Esses validadores podem ser valiosos para depurar seu Microdata e garantir que ele esteja corretamente implementado. É uma boa ideia executar suas páginas em um validador antes de publicá-las, para identificar quaisquer erros precocemente.

Testar seu Microdata com a Ferramenta de Teste de Dados Estruturados do Google é particularmente importante, já que o Google é o maior mecanismo de busca e usa Microdata extensivamente para rich snippets e outros recursos de pesquisa. A Ferramenta de Teste de Dados Estruturados permite que você insira uma URL ou cole seu código HTML, e então mostra todo o Microdata que encontra na página. Ela também destaca quaisquer erros ou avisos, com explicações sobre o que está errado e como corrigir.

Ao testar seu Microdata, preste atenção a quaisquer erros ou avisos e corrija-os antes de publicar suas páginas. Alguns problemas comuns de Microdata a serem observados incluem:

• Tags itemscope, itemtype ou itemprop ausentes ou incorretamente aninhadas
• Uso de tipos de itens ou propriedades inválidos ou com erros ortográficos
• Incompatibilidade entre o Microdata e o conteúdo visível na página
• Repetição das mesmas informações várias vezes em formatos diferentes
• Inclusão de marcação para informações que não são visíveis aos usuários

Se você encontrar problemas com seu Microdata, solucione-os sistematicamente. Verifique se sua marcação segue as regras de sintaxe, corresponde ao seu conteúdo e usa tipos de itens e propriedades válidos do vocabulário escolhido. Use as mensagens de erro e avisos dos validadores como guia e consulte a documentação do seu vocabulário, se necessário.

Ao usar ferramentas de Microdata e testar sua marcação regularmente, você pode garantir que seu Microdata esteja correto, consistente e otimizado para mecanismos de busca. Isso pode ajudar você a obter o máximo de valor do seu Microdata, em termos de melhor visibilidade nas buscas, rich snippets e engajamento do usuário.

Exemplos de Microdados

Você pode usar Microdados para marcar diferentes tipos de conteúdo, como produtos, eventos, pessoas e receitas. Aqui estão alguns exemplos de como usar Microdados para vários tipos de conteúdo:

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Laptop Acme</h1>
  <img src="laptop.jpg" itemprop="image" alt="Laptop Acme">
  <p itemprop="description">Um laptop de alto desempenho para trabalho e lazer.</p>
  <span itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Acme</span>
  </span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">R$ 5.999,99</span>
    <span itemprop="priceCurrency">BRL</span>
    <link itemprop="availability" href="https://schema.org/InStock">Em Estoque
  </div>
</div>

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Conferência de Tecnologia 2023</h1>
  <p itemprop="description">Participe do maior evento de tecnologia do ano!</p>
  <time itemprop="startDate" datetime="2023-09-01T09:00">1 de setembro de 2023, 09:00</time> -
  <time itemprop="endDate" datetime="2023-09-03T17:00">3 de setembro de 2023, 17:00</time>
  <div itemprop="location" itemscope itemtype="https://schema.org/Place">
    <span itemprop="name">Centro de Convenções</span>
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
      <span itemprop="streetAddress">Rua Principal, 123</span>
      <span itemprop="addressLocality">Cidade Qualquer</span>,
      <span itemprop="addressRegion">SP</span>
      <span itemprop="postalCode">12345-678</span>
    </div>
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">R$ 1.499,99</span>
    <span itemprop="priceCurrency">BRL</span>
    <a itemprop="url" href="https://www.exemplo.com/ingressos">Comprar Ingressos</a>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">João Silva</h1>
  <p itemprop="jobTitle">Engenheiro de Software</p>
  <div itemprop="affiliation" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Acme Ltda.</span>
  </div>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Rua dos Carvalhos, 456</span>
    <span itemprop="addressLocality">Cidade Qualquer</span>,
    <span itemprop="addressRegion">SP</span>
    <span itemprop="postalCode">12345-678</span>
  </div>
</div>

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Cookies Clássicos de Gotas de Chocolate</h1>
  <img itemprop="image" src="cookies.jpg" alt="Cookies de Gotas de Chocolate">
  <p itemprop="description">Uma receita de cookies caseiros de gotas de chocolate.</p>
  <ul>
    <li itemprop="recipeIngredient">280g de farinha de trigo</li>
    <li itemprop="recipeIngredient">1 colher de chá de bicarbonato de sódio</li>
    <li itemprop="recipeIngredient">1 colher de chá de sal</li>
    <li itemprop="recipeIngredient">230g de manteiga, em temperatura ambiente</li>
    <li itemprop="recipeIngredient">150g de açúcar granulado</li>
    <li itemprop="recipeIngredient">150g de açúcar mascavo</li>
    <li itemprop="recipeIngredient">1 colher de chá de extrato de baunilha</li>
    <li itemprop="recipeIngredient">2 ovos grandes</li>
    <li itemprop="recipeIngredient">340g de gotas de chocolate meio amargo</li>
  </ul>
  <ol itemprop="recipeInstructions">
    <li>Pré-aqueça o forno a 190°C.</li>
    <li>Misture a farinha, o bicarbonato de sódio e o sal em uma tigela pequena.</li>
    <li>Bata a manteiga, o açúcar granulado, o açúcar mascavo e o extrato de baunilha em uma tigela grande até ficar cremoso.</li>
    <li>Adicione os ovos, um de cada vez, batendo bem após cada adição.</li>
    <li>Gradualmente, misture a mistura de farinha.</li>
    <li>Adicione as gotas de chocolate.</li>
    <li>Coloque colheradas arredondadas em assadeiras não untadas.</li>
    <li>Asse por 9 a 11 minutos ou até dourar.</li>
    <li>Deixe esfriar nas assadeiras por 2 minutos; transfira para grades para esfriar completamente.</li>
  </ol>
  <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
    <span itemprop="calories">260 calorias</span>,
    <span itemprop="fatContent">12 gramas de gordura</span>
  </div>
</div>