Metadados

O head do Belavista guarda mais do que título e charset. Metadados descrevem a página para o navegador, para compartilhamento e para mecanismos de busca — sem aparecer como parágrafo na tela.

O exemplo deste capítulo é 03-metadados, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Revisar charset e viewport com mais precisão.
• Usar meta com name e content.
• Entender description e quando http-equiv aparece.
• Ligar CSS ou ícone com link (conceito).
• Não confundir metadado com conteúdo visível.

Meta com name e content

A maioria dos meta oficiais usa name (o tipo) e content (o valor):

<meta name="description" content="Ateliê de tipografia e cartaz em Recife.">
<meta name="author" content="Equipe fictícia do Laboratório Belavista">

A description pode aparecer em resultados de busca. Escreva uma frase clara. Não encha de palavras-chave. Conteúdo fictício: nada de dados pessoais reais.

Charset e viewport de novo

charset veio de um antigo http-equiv="Content-Type". Hoje o padrão é:

<meta charset="utf-8">

Coloque-o entre as primeiras tags do head. Sem isso, “Belavista” e “tipografia” podem virar caracteres quebrados.

O viewport continua essencial:

<meta name="viewport" content="width=device-width, initial-scale=1">

http-equiv e pragmas

Alguns meta usam http-equiv para imitar cabeçalhos HTTP (redirecionamento, tipo de conteúdo antigo). No volume introdutório você quase não precisa deles. Prefira charset moderno e configuração do servidor real quando publicar. Em estudo local, foque em name + content e no title.

link, style e script no head

Além de meta, o head acolhe:

• link — CSS, ícone da aba (rel="icon"), pré-conexões.
• style — CSS embutido (use com parcimônia).
• script — comportamento (só quando o módulo pedir).

Neste capítulo o exemplo pode incluir um link simbólico ou um comentário. O ponto é: metadado e recursos ficam no head; texto da visitante fica no body.

Erro comum: usar meta description como se fosse um subtítulo na página. A visitante não lê isso no body. Se a frase importa na tela, escreva um p ou um h2.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Laboratório Belavista: tipografia, cartaz e oficinas em Recife.">
    <title>Metadados — Laboratório Belavista</title>
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
  </head>
  <body>
    <main>
      <h1>Metadados do ateliê</h1>
      <p>A descrição desta página está no <code>head</code>. Este parágrafo é conteúdo visível.</p>
      <p>Mude a <code>meta description</code> e inspecione o elemento no DevTools. A aba usa o <code>title</code>.</p>
    </main>
  </body>
</html>

Redes sociais e SEO (visão rápida)

Existem metadados extras (Open Graph, Twitter Cards) para prévias ao compartilhar. Eles seguem o mesmo espírito: meta + atributos. Não são obrigatórios nesta etapa. Domine description, title e charset antes de empilhar dezenas de tags.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. O que muda na experiência da visitante se você alterar só a meta description?
2. Por que o charset deve aparecer cedo no head?
3. Qual a diferença de papel entre title e meta name="description"?

Respostas comentadas

1. Quase nada na página renderizada. A description serve a buscadores e ferramentas; o texto na tela não muda.
2. Para o navegador interpretar bytes corretamente antes de ler o restante do documento, evitando acentos quebrados.
3. title alimenta a aba e o título da janela/resultado. description resume o conteúdo para listagens; não substitui um subtítulo visível.