Módulo 12: Microdados e Dados Estruturados
2. Resumo da Aula Anterior
No último módulo, aprendeste a falar para o mundo com a Internacionalização. Agora, vamos aprender a falar "máquina com máquina", ajudando o Google a entender exatamente o que são os teus dados (se são um preço, uma morada ou uma avaliação).
3. O Que Vais Aprender Hoje
- ✅ O que são Dados Estruturados e Microdados.
- ✅ Como usar o vocabulário do Schema.org.
- ✅ Implementar o formato JSON-LD (o preferido do Google).
- ✅ Como criar Rich Snippets (estrelas e preços no Google).
4. Teoria: A Etiqueta Inteligente
Conceito: Microdados são atributos que adicionas ao teu HTML para dar um significado específico a cada pedaço de texto. O Google usa isto para criar resultados de pesquisa mais bonitos e informativos.
🏷️ Analogia: O Rótulo Nutricional
Imagina que estás num supermercado:
- HTML Normal: É uma lata de comida sem rótulo. Tu sabes que é comida, mas não sabes se é sopa ou feijão.
- Marcadores Semânticos: É a imagem na lata que mostra que é "Sopa de Legumes".
- Dados Estruturados (Microdados): É a tabela nutricional atrás da lata. Diz exatamente quantos gramas de sal, açúcar e proteínas tem. O computador (o robô do supermercado) consegue ler essa tabela e organizar as latas por "mais saudáveis" automaticamente.
5. Exemplos Práticos
Exemplo 1: Microdados Inline (Tradicional)
Adicionar atributos diretamente nas tags.
<div itemscope itemtype="https://schema.org/Product">
<h1 itemprop="name">iPhone 15 Pro</h1>
<p>Preço: <span itemprop="price" content="1200">1.200€</span></p>
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
Nota: <span itemprop="ratingValue">4.8</span> estrelas
</div>
</div>
Os atributos itemscope, itemtype e itemprop ligam o teu conteúdo ao vocabulário oficial.
Exemplo 2: JSON-LD (O Padrão Moderno)
O método mais limpo e recomendado pelo Google.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Recipe",
"name": "Bacalhau à Brás",
"author": "Chef Silva",
"prepTime": "PT30M",
"recipeYield": "4 pessoas"
}
</script>
Este bloco de código pode ficar em qualquer lugar (habitualmente no head) e não afeta o visual do site.
Exemplo 3: Rich Snippets (O Resultado)
Como o Google mostra o teu site quando tem estes dados.
Resultados com estrelas e tempos de preparação têm muito mais cliques do que resultados simples!
6. Agora é a Tua Vez!
Vamos criar os dados para um "Evento de Música":
- Vai ao site Schema.org e procura por "Event".
- Cria um bloco
<script type="application/ld+json">. - Define o nome do evento, a data (ex: 2025-12-25) e o local (Venue).
- Adiciona o preço do bilhete usando a propriedade
offers.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Dados Estruturados ajudam o Google a ser mais inteligente.
- 📌 Schema.org é o dicionário que todos os motores de busca usam.
- 📌 JSON-LD é a forma recomendada de implementar estes dados.
- 📌 Implementar isto não muda o design, mas muda o sucesso do site nas buscas.
9. Desafios Práticos
Desafio 1: O Detetive de Erros
Se escreveres itemprop="price" mas o Google não mostrar o preço, onde podes testar se o teu código está correto?
Desafio 2: Receita de Sucesso
Numa receita, que dados estruturados seriam os mais importantes para atrair cliques?
Desafio 3: Onde colocar o JSON-LD?
É obrigatório colocar o script JSON-LD dentro da tag <body>?