🧩

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

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.

Bacalhau à Brás Tradicional - O Melhor Site
⭐⭐⭐⭐⭐ Avaliação: 4.9 - 120 votos - 30 min
Aprenda a fazer o verdadeiro Bacalhau à Brás com esta receita passo a passo...

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":

  1. Vai ao site Schema.org e procura por "Event".
  2. Cria um bloco <script type="application/ld+json">.
  3. Define o nome do evento, a data (ex: 2025-12-25) e o local (Venue).
  4. Adiciona o preço do bilhete usando a propriedade offers.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

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>?

« Aula Anterior Próxima Aula »