9.1 O que são microdados?
Microdados (structured data) — é uma maneira de adicionar metadados aos documentos HTML para melhorar a interpretação do conteúdo da página da web pelos motores de busca e outros serviços. Os microdados são usados para descrever várias entidades e seus relacionamentos em uma página web, o que ajuda a melhorar a visibilidade da página nos resultados de busca e fornece funcionalidades adicionais, como rich snippets.
Microdados são dados estruturados que são adicionados ao código HTML de uma página. Eles fornecem aos motores de busca informações adicionais sobre o conteúdo da página, como tipo de conteúdo, autor, data de publicação, classificação e outros dados.
Os microdados são compostos por duas partes: um vocabulário — com que termos descrever as entidades — e uma sintaxe — como escrever esses termos fisicamente no HTML. São níveis diferentes e não devem ser confundidos.
O vocabulário é o Schema.org: um conjunto comum de tipos (Article, Product, Event, Organization e outros) e das suas propriedades. O Schema.org foi fundado por Google, Microsoft, Yahoo e Yandex, é desenvolvido por uma comunidade aberta e é compreendido por todos os principais motores de busca.
A sintaxe é a forma de escrever. O mesmo vocabulário do Schema.org pode ser escrito de três maneiras diferentes:
- JSON-LD: os dados ficam num bloco separado dentro de
<script type="application/ld+json">e não se misturam com a marcação da página. Padrão do W3C; é exatamente este que o Google recomenda. - Microdata: os atributos
itemscope,itemtype,itempropsão adicionados diretamente aos elementos HTML. Descrito no HTML Living Standard. - RDFa (RDFa Lite 1.1): os atributos
vocab,typeof,property— também diretamente nos elementos HTML. Recomendação do W3C.
Além do Schema.org existem outros vocabulários para tarefas específicas — por exemplo o Open Graph (pré-visualização de links nas redes sociais) e o microformats2. Nesta aula trabalhamos com o Schema.org.
9.2 Schema.org
Schema.org é um vocabulário de tipos de dados e suas propriedades, desenvolvido para estruturar dados em páginas da web. Ele suporta uma variedade de tipos de dados, como artigos, eventos, organizações, produtos, etc.
Exemplos de uso do Schema.org
Artigo (Article):
<article>
<h1>Título do artigo</h1>
<p>Autor: Nome do autor</p>
<p>Data de publicação: 1 de janeiro de 2024</p>
<img src="https://example.com/image.jpg" alt="Exemplo de imagem">
<p>Texto do artigo...</p>
</article>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Título do artigo",
"author": {
"@type": "Person",
"name": "Nome do autor"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg",
"publisher": {
"@type": "Organization",
"name": "Editora",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
Produto (Product):
<body>
<h1>Nome do produto</h1>
<img src="https://example.com/product.jpg" alt="Imagem do produto">
<p>Descrição do produto</p>
<p>Preço: $29.99</p>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Nome do produto",
"image": "https://example.com/product.jpg",
"description": "Descrição do produto",
"sku": "0446310786",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "29.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"url": "https://example.com/product"
}
}
</script>
Vantagens de usar Schema.org:
- Melhoria da visibilidade: os motores de busca podem exibir dados adicionais nos resultados de busca (rich snippets).
- Melhoria da interpretação: os motores de busca compreendem melhor o conteúdo, o que pode melhorar o ranking da página.
- Suporte a padrões: o Schema.org é suportado por todos os principais motores de busca.
9.3 JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data) é um método de codificação de microdados no formato JSON, que é inserido na tag <script> na página. O Google recomenda o uso de JSON-LD para dados estruturados.
Exemplo de uso de JSON-LD
Organização (Organization):
<body>
<h1>Nome da empresa</h1>
<p>Descrição da empresa</p>
<div>Contatos</div>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Nome da empresa",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-555-1212",
"contactType": "Customer Service"
}
}
</script>
9.4 Microdata
Microdata é uma sintaxe de microdados embutida diretamente no HTML. Os atributos especiais itemscope, itemtype e itemprop (bem como itemid e itemref) são adicionados a elementos HTML comuns e ligam-nos a tipos e propriedades do vocabulário Schema.org.
Exemplo de uso de Microdata
Evento (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">Nome do evento</h1>
<time itemprop="startDate" datetime="2024-05-01T19:00">1º de maio de 2024, 19:00</time>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">Local do evento</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">Rua, número</span>
<span itemprop="addressLocality">Cidade</span>
<span itemprop="postalCode">Código postal</span>
<span itemprop="addressCountry">País</span>
</div>
</div>
</body>
Vantagens de usar microdados:
- Rich snippets: os motores de busca podem mostrar snippets avançados nos resultados de busca, aumentando a taxa de cliques.
- Compreensão aprimorada do conteúdo: os motores de busca entendem melhor o conteúdo, o que pode melhorar o ranking da página.
- Suporte a busca por voz: dados estruturados podem melhorar os resultados da busca por voz.
- Integração com outros serviços: microdados permitem integrar conteúdo com vários serviços, como o Google Knowledge Graph e outros.
GO TO FULL VERSION